View Design之table自定义单元格模版

在 columns 的某列声明 slot 后，就可以在 Table 的 slot 中使用参数。
slot 的参数有 3 个：当前行数据 row，当前列数据 column，当前行序号 index。

完整示例

<template><Table border :columns="columns" :data="data"><template #name="{ row }"><strong>{{ row.name }}</strong></template><template #action="{ row, index }"><Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button><Button type="error" size="small" @click="remove(index)">Delete</Button></template></Table>
</template>
<script>export default {data () {return {columns: [{title: 'Name',slot: 'name'},{title: 'Age',key: 'age'},{title: 'Address',key: 'address'},{title: 'Action',slot: 'action',width: 150,align: 'center'}],data: [{name: 'John Brown',age: 18,address: 'New York No. 1 Lake Park'},{name: 'Jim Green',age: 24,address: 'London No. 1 Lake Park'},{name: 'Joe Black',age: 30,address: 'Sydney No. 1 Lake Park'},{name: 'Jon Snow',age: 26,address: 'Ottawa No. 2 Lake Park'}]}},methods: {show (index) {this.$Modal.info({title: 'User Info',content: `Name：${this.data[index].name}<br>Age：${this.data[index].age}<br>Address：${this.data[index].address}`})},remove (index) {this.data.splice(index, 1);}}}
</script>

引用出处：
https://www.iviewui.com/view-ui-plus/component/form/table