封装代码:
<!-- * @Descripttion:表格组件--> <template> <div class='YxkTable'> <el-table :data="data" v-bind="tableBind" v-on="this.$listeners"> <ELTableColumn v-for="(item, index) in column" :key="index" :column="item"> <!-- 自定义表头/内容 slot --> <template v-if="item.slotsHeader" v-slot:Header="scope"> <slot :name="item.slots" :scope="scope"> {{item.label}} </slot> </template> <template v-if="item.slots" v-slot:[item.slots]="scope"> <slot :name="item.slots" :scope="{$index: index, ...scope}"> {{scope.row[item.prop]}} </slot> </template> </ELTableColumn> </el-table> </div> </template> <script> import { TableColumn } from 'element-ui' // defalut el-table const tableDefault = { border: true, size: 'medium', 'header-cell-style': { color: '#333', background: '#F5F7FA', 'font-size': '12px' }, 'cell-style': { 'font-size': '12px' } } // default el-table-column const tableColumnDefault = { resizable: true, 'show-overflow-tooltip': true } // render const ELTableColumn = { props: { column: { type: Object } }, render(createElement) { // 插槽 const createScopedSlots = (slot, params) => { let scopedSlots = {} // 表头slots if (params.slotsHeader) { scopedSlots = { header: scope => { return this.$scopedSlots.Header(scope) } } } // 自定义内容slots if (slot && !params.slotsHeader) { Object.assign(scopedSlots, { default: scope => { if (this.$scopedSlots[slot]) { return this.$scopedSlots[slot](scope) } } }) } return { scopedSlots } } const createNode = params => { // ele let ele = params.ele || TableColumn // 参数 let props = { attrs: { ...tableColumnDefault, ...params }, on: {} } // on if (params.on) { Object.assign(props.on, params.on) } // childNodes let childNodes = [] if (params.children) { childNodes = params.children.map(item => { return createNode(item) }) } // slot if (params.slots) { params.slotsHeader = params.slots.includes('header') Object.assign(props, createScopedSlots(params.slots, params)) } return createElement(ele, props, childNodes) } return createNode(this.column) }, } export default { name: 'YxkTables', componentName: 'YxkTables', props: { data: { type: Array }, column: { type: Array } }, components: { ELTableColumn }, data() { return {} }, methods: {}, computed: { tableBind() { return Object.assign(tableDefault, this.$attrs) } }, watch: {}, created() {}, mounted() {} } </script> <style lang='scss'> .YxkTable { padding: 20px; background: #fff; .el-button { font-size: 12px; } .el-link { font-size: 12px; } } </style>
示例:
参数说明:
2、使用: <YxkTable :data="tableData" :column="tableColumn"> // 插槽(可选) </YxkTable> 3、参数: { data: '', // 表格数据,Array column: '', // 表格表头数据,Array ... // el-table 属性、方法、事件 (https://element.eleme.cn/#/zh-CN/component/table) } column: [{ prop: '', // 对应列内容的字段名 label: '', // 显示的标题 handler: [], // el-table-column 方法、事件 slots: '', // 插槽名称 ... // el-table-column 属性 (https://element.eleme.cn/#/zh-CN/component/table) }] 4、插槽 <template v-slot:插槽名称>...</template> 或 <template v-slot:插槽名称="{ scope }">...</template> 5、事件 el-table 方法、事件 6、示例 更多示例搜索 @components/common/YxkTable/YxkTable 7、插件(已安装) npm install element-ui -S