view design之table自定义单元格模版
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