vue中用table_element-ui中的 table 组件在vue中的使用

经常使用 element-ui 的小伙伴应该对 el-table 组件非常熟悉，通常它长下面这个样子：

但是我们可以使用使用 v-for 来优化模版中的 el-table-column

v-for="{ prop, label } in colConfigs"

:key="prop"

:prop="prop"

:label="label">

export default {

data () {

this.colConfigs = [

{ prop: 'date', label: '日期' },

{ prop: 'name', label: '姓名' },

{ prop: 'address', label: '地址' }

]

return {

tableData: [{

date: '2016-05-02',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-04',

name: '王小虎',

address: '上海市普陀区金沙江路 1517 弄'

}]

}

}

}

这样做的好处在于，如果想再增加一列，完全可以不用动 template，只需要简单的在 this.colConfigs 这个数组中增加一个配置项 { prop: 'xxx', label: 'xxx' } 即可

如果我们即想要简单的属性可以直接加个配置项渲染出来，又希望复杂的渲染能在模版中写出来，要怎么实现呢？---巧用 slot，为 el-table 封装一层

我们先来看一下封装的组件 my-table：

// my-table.vue

export default {

props: ['colConfigs', 'data']

}

这个封装实际上就是把前面的 colConfigs 作为一个 prop 传入，但是跟上面例子有一点不同的是，配置项中多了一个 slot 属性，通过这个属性，我们就可以像文章最开始那样在模版中写了，用法如下：

:data="tableData"

:col-configs="colConfigs">

查看

export default {

data () {

this.colConfigs = [

{ prop: 'date', label: '日期' },

{ prop: 'name', label: '姓名' },

{ prop: 'address', label: '地址' },

// 模版中的元素需要对应的有 slot="opt" 属性

{ slot: 'opt' }

]

return {

tableData: [{

date: '2016-05-02',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-04',

name: '王小虎',

address: '上海市普陀区金沙江路 1517 弄'

}]

}

}

}

现在我们想要增加一个列，只要加个配置项，或者加个 slot ，完美～

等等，假设我的 table 中有几列渲染比较复杂，那几列又都比较相似，像下面这种：

:data="tableData"

:col-configs="colConfigs">

{{ row['change'] > 0 ? '+' + row['change']: row['change'] }}

{{ row['trend'] > 0 ? '+' + row['trend']: row['trend'] }}

这又重复写模版了…

使用 :is=”component”

我们可以为配置项再增加一个属性 component, 用户可以指定 component 属性来特殊处理某列，实现如下：

// my-table.vue

v-else-if="colConfig.component"

:is="config.component"

:col-config="colConfig">

export default {

props: ['colConfigs', 'data']

}

然后上面的例子就可以改写成：

:data="tableData"

:col-configs="colConfigs">

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 的使用，大部分时候只需写一个配置属性就可以了。