基于element-ui表格的二次封装怎么实现

这篇文章主要讲解了“基于element-ui表格的二次封装怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“基于element-ui表格的二次封装怎么实现”吧！

在项目中经常会使用到element的表格，如果每次都cv,也确实有点麻烦，基于这个情况我对表格进行了二次封装

写一个Table组件

首先先写表格样式

    <el-table      :data="tableData"      :header-cell-      :height="height"      :border="border"      @selection-change="handleSelectionChange"    >      <el-table-column        v-if='selection'        type="selection"        width="55">      </el-table-column>      <el-table-column        v-for="v in tableProp"        :key="v.label"        :prop="v.code"        :sortable='v.sortable'        :label="v.label"        :width="v.width"      >        <template slot-scope="scope">          <div v-if='!v.code'>            {{ scope.row[scope.column.property] }}          </div>          <div v-else>              <slot name="row" :row="scope.row"></slot>          </div>        </template>        <el-table-column          v-for="(item, i) in v.data"          :key="i"          :sortable='item.sortable'          align="center"          :width="item.width"          :prop="item.code"          :label="item.label"        >          <template slot-scope="scope">              <div v-if='!v.code'>                {{ scope.row[scope.column.property] }}              </div>              <div v-else>                  <slot name="row" :row="scope.row"></slot>              </div>          </template>        </el-table-column>      </el-table-column>       <el-table-column label="操作" v-if='ishandle'>        <template slot-scope="scope">          <slot name="edit" :row="scope.row" :index="scope.$index"></slot>        </template>      </el-table-column>    </el-table>

tableData为当前显示的数据，tableProp为表头的名称，可以为多级也可以为单级，区别为data是否存在，headerStyle为表头样式，height为表的高度，sortable以该列为基准的排序，border是否显示边框,handleSelectionChange多选，selection是否显示多选，ishandle是否显示操作，这里使用插槽进行写操作

export default {  props: {    height: {      type: Number,      default: 220,    },    ishandle:{      type: Boolean,      default: false,    },    border:{      type: Boolean,      default: false,    },    tableProp: {      type: Array,      default: () => [        {          code: 'index',          label: '指标',          width: 100,        },        {          code: 'PAC',          label: 'PAC',          width: 120,          data:{            code: 'PAB',            label: 'PAB',            width: 60,              }        },        {          code: 'PAM',          label: 'PAM',          width: 60,          code:true,        },        {          code: 'POWER_CONSUMPTION',          label: '综合电耗(kW·h)',          width: 50,        },        {          code: 'WATER_CONSUMPTION',          label: '自用水率(%)',        },      ],    },    tableData: {      type: Array,      default:() => [        {          index:1,          PAC:'1'          PAM:'1',          POWER_CONSUMPTION:'1',          WATER_CONSUMPTION:'1'        }      ]    },    Style:{      type:String,      default:'font-size: 12px;padding:0;line-height: inherit;font-weight: 500;color: #6A7474;'    }  },  data() {    return {      show: false,    };  },  methods: {  // 样式    headerStyle() {      return this.Style;    },    // 多选    handleSelectionChange(val){      this.$emit('SelectionChange',val)    }  },};

第二步加分页

<el-pagination      :background='background'      :layout="layout"      :total="total"      :page-size="pageSize"      :current-page.sync="current"      :page-sizes="pageSizes"      @size-change="handleSizeChange"      @current-change="handleCurrentChange"      :hide-on-single-page='singlepage'      >    </el-pagination>

background背景是否显示，layout组件布局，子组件名用逗号分隔，total总条数，pageSizes每页显示个数选择器的选项设置，current当前页码，pageSize每页显示条目个数，singlepage只有一页时是否隐藏,handleSizeChangepageSize 改变时会触发,handleCurrentChange改变时会触发

export default {  props: {    background: {      type: Boolean,      default: false,    },    layout:{      type: String,      default: 'total, sizes, prev, pager, next, jumper',    },    total:{      type: Number,      default: 100,    },    pageSize:{      type: Number,      default: 10,    },    pageSizes:{      type: Array,      default: () => [10, 20, 30, 40, 50, 100],    },    singlepage: {      type: Boolean,      default: false,    },    current:{      type: Number,      default: 1,    },  },  methods: {    // pageSize 改变时会触发    handleSizeChangepageSize (val) {      this.$emit('handleSizeChangepageSize ',val)    },    // currentPage 改变时会触发    handleCurrentChange(val){      this.$emit('handleCurrentChange',val)    }  },};

在页面中使用

先引入Table.Vue页面

        <Table          :height="90"          class="left-top-table"          :tableData="tableIndex"          :tableProp="tableProp"          @handleCurrentChange='handleCurrentChange'          @handleSizeChangepageSize ='handleSizeChangepageSize '        >          <template slot="edit" slot-scope="scope">            <el-button size="mini" @click="handleEdit(scope.index, scope.row)"              >编辑</el-button            >          </template>        </Table>

//pageSize 改变时会触发handleCurrentChange(val){....}// currentPage 改变时会触发handleSizeChangepageSize (val){....}// 编辑方法handleEdit(index,row){....}

更多的可以根据自己项目的需求进行修改，这只是一个大概的项目雏形

感谢各位的阅读，以上就是“基于element-ui表格的二次封装怎么实现”的内容了，经过本文的学习后，相信大家对基于element-ui表格的二次封装怎么实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！