vue table表格的封装和使用

<template> <div class='tableBox'> <div> <el-table v-loading="loading" element-loading-text="正在加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255,255,255, 0.8)" :data="tableData" ref="multipleTable" @selection-change="handleSelectionChange" :highlightCurrentRow="highlightCurrentRow" @current-change="handleCurrentChange" :max-height="tableHeight" @filter-change="filterTag" @sort-change='sortChange' @row-click="handleClick" @cell-click="cellClick" @expand-change="expandChange" :span-method="arraySpanMethod" border style="width: 100%" size="mini" :row-class-name="rowClassName" :cell-style="cellStyle" :header-cell-style="headerCellStyle" :row-key="rowId" :show-header="status" :id="tableId" :lazy="lazy" :load="loadChildren" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> <template v-for="(item, index) of model"> <el-table-column v-if="item.type === 'expand'" :type="item.type" :prop="item.prop" :width="item.width || 30" :key="index"> <template slot-scope="scope"> <slot :name="item.prop" :row="scope.row" :$index="scope.$index"></slot> </template> </el-table-column> <!-- 表格序列 --> <el-table-column fixed v-else-if="item.type === 'index'" :label="item.label" :type="item.type" :width="item.width || 60" :key="index"> </el-table-column> <el-table-column sortable='custom' v-else-if="item.type === 'sortable'" :prop="item.prop" :label="item.label" :width="item.width" :min-width="item.minWidth" :key="index"> </el-table-column> <!-- 多选表格 --> <el-table-column v-else-if="(item.type === 'selection') && (typeof(item.show)=='function'?item.show():(item.show!=undefined?item.show:true))" :label="item.label" :type="item.type" :width="item.width" :min-width="item.minWidth" :fixed="item.fixed" :key="index"> </el-table-column> <!-- 自定义模板表格列 --> <el-table-column v-else-if="item.template" :prop="item.prop" :label="item.label" :width="item.width" :column-key="item.columnKey" :filters="item.filters?item.filters:null" :filter-multiple="item.filterMultiple?item.filterMultiple:null" :min-width="item.minWidth" :show-overflow-tooltip="true" :align="item.align" :fixed="item.fixed" :key="index"> <template slot-scope="scope"> <slot :name="item.prop" :row="scope.row" :$index="scope.$index"></slot> </template> </el-table-column> <!-- 原生element-ui列 --> <el-table-column v-else-if="!(item.type === 'selection') && (typeof(item.show)=='function'?item.show():(item.show!=undefined?item.show:true))" :prop="item.prop" :label="item.label" :width="item.width" :column-key="item.columnKey" :filters="item.filters?item.filters:null" :filter-multiple="item.filterMultiple?item.filterMultiple:null" :min-width="item.minWidth" :show-overflow-tooltip="true" :align="item.align" :fixed="item.fixed" :key="index"> </el-table-column> </template> </el-table> </div> <!-- 反选按钮 --> <div class="mtop10 invertBtn" v-if="isShowBtn"> <el-button type="primary" size="mini" plain @click="invertCheck">反选</el-button> </div> <!-- 表格分页 --> <div class="text-center mtop10" v-if="isShowPage"> <el-pagination background layout="prev, pager, next, sizes, total, jumper" :total="totalSize" :current-page='page.pageNumber' :page-size='page.pageSize' :page-sizes='pageSizes' @current-change='changePage' @size-change='changeSize' > </el-pagination> </div> </div> </template> <script> export default { name: 'FrTable', props: { tableData: { type: Array, default () { return [] } }, totalSize: { type: Number, default: 0 }, /** * @param {Array} model - 表格模型 * @param {String} model.label - 列头标题 * @param {String} model.prop - 列头字段名，对应的tableData中的key * @param {String} model.template - 自定义列模板名称，对应slot的name * @param {String} model.type - 列类型 可选值 index, checkbox * @param {Boolean} model.hidden - 列是否隐藏 * @param {String} model.align 表格列对齐方式 可选值 left,right,center */ highlightCurrentRow: { type: Boolean, default: false }, model: { type: Array, required: true }, arraySpanMethod: {type: Function,default () { return function(){} } }, /*** * row为某一行的除操作外的全部数据 * column为某一列的属性 * rowIndex为某一行（从0开始数起） * columnIndex为某一列（从0开始数起） */ cellStyle: {type: Function,default () { return function(){} } }, headerCellStyle: {type: Object,default () { return {} } }, rowClassName: {type: Function,default () { return function(){} } }, isShowPage: { type: Boolean, default: true }, isShowBtn: { type: Boolean, default: false }, rowId: { type: String, default: null }, lazy: { type: Boolean, default: false }, loadChildren:{ type: Function,default () { return function(){} } }, loading: { type: Boolean, default: false }, tableHeight: { type: Number, default: 500 }, status: { type: Boolean, default: true }, tableId: { type: String, default: null } }, data () { return { page: {pageNumber: 1, pageSize: 10 }, pageSizes: [10, 20, 30, 50, 100, 200], isChangePage: false, // 标志变量，是否为切换当前页 selectList: [] } }, watch: { tableHeight(newValue) { this.tableHeight = newValue }, immediate:true,//关键 deep:true// 深度监听父组件传过来对象变化 }, methods: { sortChange(column, prop, order) { this.page.order = column.order; this.getTableList(); this.isChangePage = false; }, expandChange(row){ this.$emit("expandChange", row) }, getTableList () { if (this.isChangePage) { this.isChangePage = false } else { this.page.pageNumber = 1 } this.$emit("getTableList", this.page); }, // 当type为selection时，出发选择事件 handleSelectionChange (val) { this.selectList = val this.$emit('multipleSelect', val) }, //行绑定事件 handleClick(val){ this.$emit("handleClick", val) }, //单元格绑定事件 cellClick(row, column, cell, event){ this.$emit("cellClick", row, column, cell, event) }, handleCurrentChange (val) { // this.currentRow = val; this.$emit('singleSelect', val) }, // 页面跳转