vue+element table的二次封装

table.vue文件 <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" :class="className" element-loading-text="给我一点时间" stripe fit highlight-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 添加自定义配置项--> <slot v-if="tableColumn.slot" :name="tableColumn.slot" ></slot> <!-- component 特殊处理某一项--> <component v-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> <script> 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: "" } } } </script> <style scoped> </style> 很多人不明白为什么这里要加一个slot,这个封装实际上就是把前面的tableList 作为一个 prop 传入,通过这个属性,我们就可以在table中编辑任何简单或者复制的列, 完美~ 使用方法如下: <!-- slot="sex" 不能省略,需要与下面配置项中的对应 --> <el-table-column slot="sex" label="性别"> <template slot-scope="scope"> <el-input :v-model='scope.row.sex === 0 ? "男" : "女"' :value='scope.row.sex === 0 ? "男" : "女"'></el-input> </template> </el-table-column> tableList = [ { prop: 'date', label: '日期' }, { prop: 'name', label: '姓名' }, { prop: 'address', label: '地址' }, // 模版中的元素需要对应的有 slot="opt" 属性 { slot: 'opt' }] 等等,假设我的 table 中有几列渲染比较复杂,那几列又都比较相似,像下面这种: <el-table-column label="变化" slot="change"> <span :slot-scope="row"> {{ row['change'] > 0 ? '+' + row['change']: row['change'] }} </span> </el-table-column> <el-table-column label="趋势" slot="trend"> <span :slot-scope="row"> {{ row['trend'] > 0 ? '+' + row['trend']: row['trend'] }} </span> </el-table-column> 又重复写模版了… 使用 :is=”component”
我们可以为配置项再增加一个属性 component, 用户可以指定 component 属性来特殊处理某列,实现如下:
<template> <my-table :tableData="tableData" :tableList="colConfigs"> </my-table> </template> <script> 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%' }] } } } </script>

总结

table 作为数据展示组件,在日常开发中经常被用到,通过这篇文章,可以看到结合 vue 的 slot/component 特性,做一层封装,可以大大简化 table 的使用,大部分时候只需写一个配置属性就可以了。 版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创 转载请注明:出处来自田珊珊个人博客 » vue+element table的二次封装
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注
U乐娱乐注册