ant-design中表格合并单元格并填充按钮
效果如下
代码如下
<template>
<a-card>
<a-table
:columns="columns"
:data-source="data"
@change="changePage"
:rowKey="(record) => { return record.seckill_goods_id;}"
:customRow="handleClickRow"
>
<template
slot="name"
slot-scope="text"
>
<a>{{ text }}</a>
</template>
</a-table>
</a-card>
</template>
<script>
const data = [
{
key: "1",
name: "John Brown",
age: 32,
tel: "0571-22098909",
phone: 18889898989,
address: "New York No. 1 Lake Park",
},
{
key: "2",
name: "Jim Green",
tel: "0571-22098333",
phone: 18889898888,
age: 42,
address: "London No. 1 Lake Park",
},
{
key: "3",
name: "Joe Black",
age: 32,
tel: "0575-22098909",
phone: 18900010002,
address: "Sidney No. 1 Lake Park",
},
{
key: "4",
name: "Jim Red",
age: 18,
tel: "0575-22098909",
phone: 18900010002,
address: "London No. 2 Lake Park",
},
{
key: "5",
name: "Jake White",
age: 18,
tel: "0575-22098909",
phone: 18900010002,
address: "Dublin No. 2 Lake Park",
},
];
export default {
data() {
const renderContent = () => {
return (
<div class="long-btn">
<a-button type="primary" block vOn:click={this.seeDetail}>
查看信息
</a-button>
</div>
);
};
const columns = [
{
title: "Name",
dataIndex: "name",
scopedSlots: { customRender: "name" },
},
{
title: "Age",
dataIndex: "age",
scopedSlots: { customRender: "age" },
},
{
title: "Home phone",
dataIndex: "tel",
customRender: (value, row, index) => {
let obj = {
children: renderContent(index),
attrs: { colSpan: 2 },
};
return obj;
},
},
{
title: "Phone",
dataIndex: "phone",
customRender: (value) => {
const obj = {
children: value,
attrs: { colSpan: 0 },
};
return obj;
},
},
{
title: "Address",
dataIndex: "address",
scopedSlots: { customRender: "address" },
},
];
return {
data,
columns,
};
},
methods: {
// 换页
changePage(e) {
console.log("e: ", e);
},
//点击了按钮,如果在合并单元格中填充按钮,这个按钮无法与这一行的数据绑定,可以结合表格的行点击事件去做,但注意这一行行内的方法可能会冒泡,所以这一行的其他事件要在点击时要加上修饰符@click.native.stop
seeDetail() {
console.info("点击了");
},
// 点击了某行,
handleClickRow(record) {
console.log("record: ", record);
},
},
};
</script>