vue+element table的二次封装

table.vue文件

<el-table

                                                                  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: ""            }        }    }

很多人不明白为什么这里要加一个slot，这个封装实际上就是把前面的tableList 作为一个 prop 传入，通过这个属性，我们就可以在table中编辑任何简单或者复制的列， 完美～

使用方法如下：

     const PrefixPlusText = {  props: ['colConfig'],  template: `                  {{ parseInt(row[colConfig.prop]) > 0 ? '+' + row[colConfig.prop] : row[colConfig.prop] }}            `} 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%'      }]    }  }}

总结

table 作为数据展示组件，在日常开发中经常被用到，通过这篇文章，可以看到结合 vue 的 slot/component 特性，做一层封装，可以大大简化 table 的使用，大部分时候只需写一个配置属性就可以了。

文章来源：田珊珊个人博客

来源地址：http://www.tianshan277.com/708.html