table.vue文件
<el-table< p=""><prestyle="box-sizing: border-box; font-size: 13px; overflow: auto; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; word-spacing: 0px; text-transform: none; word-break: break-all; font-weight: 300; color: #333333; font-style: normal; orphans: 2; widows: 2; margin: 0px 0px 10px; display: block; letter-spacing: normal; line-height: 1.4285; background-color: #f5f5f5; text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow-wrap: break-word; border-radius: 0px; border: #cccccc 1px solid; padding: 9px;"><code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; white-space: pre-wrap; margin: 0px 5px; background-color: transparent; border-radius: 0px; border: #e1e1e1 1px solid; padding: 0px;"><template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName":cell-style="{textAlign:'center'}"@selection-change="change":show-header="showHeader":border="border":max-height="maxHeight":v-loading="loading":element-loading-text="给我一点时间"stripefithighlight-current-row><template v-for="tableColumn in tableList"><el-table-column:type="tableColumn.type":width="tableColumn.width"v-if="tableColumn.type === 'selection'"></el-table-column><!--slot 添加自定义配置项--><slotv-if="tableColumn.slot":name="tableColumn.slot"></slot> <!--component 特殊处理某一项--><componentv-else-if="tableColumn.component":is="config.component":col-config="tableColumn"></component><el-table-column:label="tableColumn.label":type="tableColumn.type":prop="tableColumn.prop":width="tableColumn.width":fixed="tableColumn.fixed ":sortable="tableColumn.sortable"v-if="(tableColumn.type !== 'selection')&&(tableColumn.type !== 'slot')"></el-table-column> </template></el-table></template><ｓｃｒｉｐｔ>export default {data(){return{}},props: {tableList: {type: Array,default: function() {return [];}},tableData: {type: Array,default: function() {return [];}},showHeader: {type: Boolean,default: true},border: {type: Boolean,default: false},maxHeight: {type: [String, Number],default: null},loading: {type: Boolean,default: false},className: {type: String,default: ""},tableRowClassName: {type: String,default: ""}}}</ｓｃｒｉｐｔ><style scoped></style></code></pre>很多人不明白为什么这里要加一个slot，这个封装实际上就是把前面的tableList 作为一个 prop 传入，通过这个属性，我们就可以在table中编辑任何简单或者复制的列， 完美～
使用方法如下：<pre ><code><template><my-table:tableData="tableData":tableList="colConfigs"></my-table></template><ｓｃｒｉｐｔ> const PrefixPlusText = {props: ['colConfig'],template: `<el-table-column :label="colConfig.label"><span :slot-scope="{ row }">{{ parseInt(row[colConfig.prop]) > 0 ? '+' + row[colConfig.prop] : row[colConfig.prop] }}</span></el-table-column>`} export default {data () {this.colConfigs = [{ prop: 'change', label: '变化' component: PrefixPlusText },{ prop: 'name', label: '趋势', component: PrefixPlusText },]return {tableData: [{change: '12%',trend: '10%}, {change: '-12%',trend: '-10%'}]}}}</ｓｃｒｉｐｔ></code></pre>总结
table 作为数据展示组件，在日常开发中经常被用到，通过这篇文章，可以看到结合 vue 的 slot/component 特性，做一层封装，可以大大简化 table 的使用，大部分时候只需写一个配置属性就可以了。
