Vue基础篇--table的封装

1、 在components文件夹中新建一个ITable的vue文件

<template><div class="tl-rl"><template :table="table"><el-tablev-loading="table.loading":show-summary="table.hasShowSummary":summary-method="table.getSummaries"ref="TlRlTable":data="table.data"tooltip-effect="dark":border="table.border":height="table.height":align="table.align"style="width: 100%":show-overflow-tooltip="true":row-class-name="rowClassName":span-method="objectSpanMethod"header-row-class-name="thClassName"@selection-change="handleSelectionChange"@row-click="rowClick"><el-table-column:align="table.align":show-overflow-tooltip="true"v-if="table.hasSelect"type="selection"width="55"></el-table-column><el-table-column type="expand" :show-overflow-tooltip="true" :align="table.align" v-if="table.hasExpand"><template slot-scope="props"><el-form label-position="left" inline class="demo-table-expand"><el-form-item :label="item.label" v-for="item in table.expands" :key="item.id"><span>{{ props.row[item.prop] }}</span></el-form-item></el-form></template></el-table-column><!--<el-table-column--><!--v-for="item in table.tr"--><!--v-if="item.show === false ? item.show : true"--><!--:label="item.label"--><!--:prop="item.prop"--><!--:class-name="item.className ? item.className : ''"--><!--:key="item.id"--><!--:width="item.width ? item.width : ''"--><!--:min-width="item.minWidth ? item.minWidth : ''">--><!--</el-table-column>--><template v-for="item in table.tr"><el-table-column:show-overflow-tooltip="true":align="table.align"v-if="item.show !== false && item.show === 'template'":label="item.label":class-name="item.className ? item.className : ''":key="item.id":width="item.width ? item.width : ''":min-width="item.minWidth ? item.minWidth : ''" ><template slot-scope="scope"><slot :name="item.prop" :obj="scope"></slot></template></el-table-column><el-table-column:show-overflow-tooltip="true":align="table.align"v-else-if="item.show !== false && item.show !== 'template'":label="item.label":prop="item.prop":class-name="item.className ? item.className : ''":key="item.id":width="item.width ? item.width : ''":min-width="item.minWidth ? item.minWidth : ''" ></el-table-column></template><el-table-column:align="table.align"column-key="operation":label="table.operation.label":width="table.operation.width ? table.operation.width : ''":min-width="table.operation.minWidth ? table.operation.minWidth : ''":class-name="table.operation.className"v-if="table.hasOperation"><template slot-scope="scope"><el-buttonv-for="item in table.operation.data":class="item.classname ? item.classname : ''":key="item.id":type="item.type":size="item.size"@click.stop="handleOperation(scope.$index, scope.row, item.id)">{{ item.label }}</el-button></template></el-table-column></el-table></template></div>
</template><script>export default {name: 'recordlist',props: {table: {type: Object,default() {return {hasMergeRowOrColumn: false, // 是否合并单元格loading: false,          // 加载中动画hasShowSummary: false,   // 是否显示表位合计行border: false,           // 是否带有纵向边框，默认为falseheight: "",        // 设置table的高度align: 'center',   // 设置数据居中显示hasSelect: false,        // 有无选中功能hasOperation: false,     // 有无操作功能hasExpand: false,        // 有无展开行功能tr: [                    // 表头数据 —— className:列的class名{id: '1',label: 'label',prop: 'prop',className: 'classname',minWidth: '80',show: true           // show有三种值：false隐藏当前列，true常规表格列，template自定义表格列
//          <template slot-scope="props" slot="example">
//                <a class="list-a" target="_blank" :href="'/#/bombscreen?mobile=' + props.obj.row.mobile">{{ props.obj.row.username }}</a>
//          </template>}],data: [],                // 表格数据 —— 如需添加行class，处理数据时则需要传入class名， class需为数组operation: {             // 操作功能label: '操作',                // 操作列的行首文字width: '200',                // 操作列的宽度className: '',               // 操作列的class名data: [                      // 操作列数据{label: '通过',                // 按钮文字Fun: 'handleSubmit',         // 点击按钮后触发的父组件事件size: 'mini',                // 按钮大小id: '1',                     // 按钮循环组件的key值classname: 'show',         // 按钮的类名type: 'primary'             // 按钮的类型}]},expands: [               // 展开行数据{id: '1',label: 'label',prop: 'prop'}],getSummaries(param) {               // 自定义表位合计行数据// *** 此函数传入param参数console.log(param);// *** 最后返回一个数组，合计行会显示数组中的内容return []}}}}},methods: {handleSelectionChange(val) {this.$emit('onHandleSelectionChange', val);},handleOperation(a, b, id) {const data = this.table.operation.data;for (let i = 0; i < data.length; i++) {if (id === data[i].id) {this.$emit(data[i].Fun, a, b);}}},objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (!this.hasMergeRowOrColumn) {return} else {this.$emit('onMergeRowOrColumn', { row, column, rowIndex, columnIndex });}},// 点击某一行时触发的函数// *** 按下左键然后移动鼠标到其它列放开左键，会有报错 -- 优化：添加点击行参数，rowClick(Row, Event, Column) {if (!Column || Column.type === 'selection' || Column.columnKey === 'operation' || Column.type === 'expand') {return}const data = {row: Row,event: Event,column: Column};this.$emit('onRowClick', data)},// 行类名的回调函数// 在表格数据中添加class字段即为表格行类名，配合css可对表格行中的自定义标签进行样式优化rowClassName(rowdata) {const data = this.table.data;let className = data[rowdata.rowIndex].class ? data[rowdata.rowIndex].class : '';if (className.length === 0) {return}className = className.join(' ');return className},}}
</script>

2、在单页面中引入ITable组件并使用，代码如下：

<template>  
<!--region table 表格--><iTable :table="dataTable" @onRowClick="rowClick"><!--自定义当前的列--><template slot-scope="props" slot="username"><a class="template-username" style="color: blueviolet;border:1px solid #ccc" :href="'/#/bombscreen?mobile=' + props.obj.row.id" target="_blank">{{ props.obj.row.username }}</a></template></iTable>
</template>
<script>
import iTable from '@/components/ITable'export default {name: 'Dept',components: {iTable},
data() {return {dataTable: {tr: [{id: '1',label: '用户名',prop: 'username',show: 'template',className: 'username'},{id: '2',label: '真实姓名',prop: 'real_name'},{id: '3',label: '性别',prop: 'sex_value'},{id: '11',label: '客服',prop: 'agent_name'},{id: '7',label: '渠道',prop: 'channel_id'},{id: '8',label: '注册时间',prop: 'regist_time',minWidth: '150'},{id: '9',label: '上次登录时间',prop: 'login_time',minWidth: '150'},{id: '10',label: '用户状态',prop: 'status_value'}],operation:{label: '操作',                // 操作列的行首文字width: '200',data: [                      // 操作列数据{label: '添加',                // 按钮文字Fun: 'commitDate',         // 点击按钮后触发的父组件事件size: 'mini',                // 按钮大小id: '1',                     // 按钮循环组件的key值classname: 'show',            // 按钮的类名type: 'primary'},{label: '删除',                // 按钮文字Fun: 'deleteDate',         // 点击按钮后触发的父组件事件size: 'mini',                // 按钮大小id: '1',                     // 按钮循环组件的key值classname: 'show',            // 按钮的类名type: 'danger'}]},data: [{username: '呆萌图',real_name: '张三',sex_value: '男',agent_name: '黎明',channel_id: '网购22222222222222222222222211111111111111111',regist_time: '2020-1-2',login_time: '2020-1-22',status_value: 'ok'},{username: '呆萌图',real_name: '张三',sex_value: '男',agent_name: '黎明',channel_id: '网购',regist_time: '2020-1-2',login_time: '2020-1-22',status_value: 'ok'},{username: '呆萌图',real_name: '张三',sex_value: '男',agent_name: '黎明',channel_id: '网购',regist_time: '2020-1-2',login_time: '2020-1-22',status_value: 'ok'},{username: '呆萌图',real_name: '张三',sex_value: '男',agent_name: '黎明',channel_id: '网购',regist_time: '2020-1-2',login_time: '2020-1-22',status_value: 'ok'}],border: true,height:"calc(100vh - 300px)",loading: false,align: "center",hasOperation: true,}}}
}