官方案例中,我们可通过给columns
的数据项设置render
来自定义列,但如果该列稍微复杂一点的话,那么render
就变得难以编写与维护了.如果有以下需求:
- 列中有两个按钮,[删除] 和 [通过]
- [删除] 按钮点击时需显示poptip确认框
- [通过] 按钮需要通过数据控制是否可点击(disabled)
如果用官方的render方式去实现的话,代码会非常繁琐,并且不好维护,
项目开发过程中发现了另一种实现自定义列的方式,通过table的slot来实现,不啰嗦直接看代码:
<!-- 省略部分代码 -->
<Table ref="myTable" border :data="dataList" :columns="columns">
<!-- 操作 -->
<template slot="action" slot-scope="props">
<Button :disabled="props.age>24" type="primary" size="small">通过</Button>
<Divider type="vertical" />
<Poptip confirm title="Delete this item?" transfer>
<Button type="warning" size="small">删除</Button>
</Poptip>
</template>
</Table>
<!-- 省略部分代码 -->
render: (h, params) => {
return h(
'div',
this.$refs.myTable.$scopedSlots.action({ age: params.row.age })
)
}