蚂蚁金服的design Vue表格 动态合并代码详情!
你好!我们本次合并表格是实现的列 合并 rowSpan
在上代码 之前 我们先讲一下表格
Ui框架:
1、Vue
2、Ant design Vue
表格:
1、行是 colSpan
2、列是 rowSpan
design 表格的title 是不计算 索引的 !
我们开始贴图上代码,全部代码在文章末尾!
完成效果:
举例:我们以红框选中列做相同数据合并
1、Vue 展示 Ant table 代码
2、展示 data 数据
3、vue 导出代码
4、methods 方法里面实现 rowSpan
1、 注意 这里 key 是传值 声明方法的时候可以后写
2、使用的时候 在 mounted 里面调用即可
5、customRender 实现合并
代码部分:
<template>
<a-table :columns="columns" :data-source="data" bordered>
<template slot="name" slot-scope="text">
<a>{
{
text }}</a>
</template>
</a-table>
</template>
<script>
const data = [
{
key: "1",
name: "张三",
age: 32,
tel: "0571-22098909",
phone: 18889898989,
address: "New York No. 1 Lake Park",
},
{
key: "2",
name: "张三",
tel: "0571-22098333",
phone: 18889898888,
age: 42,
address: "London No. 1 Lake Park",
},
{
key: "3",
name: "李四",
age: 32,
tel: "0575-22098909",
phone: 18900010002,
address: "Sidney No. 1 Lake Park",
},
{
key: "4",
name: "王五",
age: 18,
tel: "0575-22098909",
phone: 18900010002,
address: "London No. 2 Lake Park",
},
{
key: "5",
name: "赵六",
age: 18,
tel: "0575-22098909",
phone: 18900010002,
address: "Dublin No. 2 Lake Park",
},
{
key: "6",
name: "赵六",
age: 18,
tel: "0575-22098909",
phone: 18900010002,
address: "Dublin No. 2 Lake Park",
},
];
export default {
data() {
return {
data,
columns: [],
};
},
created() {
this.columns = [
{
title: "第一个",
dataIndex: "phone",
key: "phone",
},
{
title: "第二个",
dataIndex: "tel",
key: "tel",
customRender(text, row) {
return {
children: text,
attrs: {
rowSpan: row.nameRowSpan,
},
};
},
},
{
title: "第三个",
dataIndex: "name",
key: "name",
width: 200,
customRender(text, row) {
return {
children: text,
attrs: {
rowSpan: row.nameRowSpan,
},
};
},
},
{
title: "第四个",
dataIndex: "key",
key: "key",
},
{
title: "第五个",
dataIndex: "age",
key: "age",
},
{
title: "第六个",
dataIndex: "address",
key: "address",
},
];
this.rowSpan("name");
this.rowSpan("tel");
},
methods: {
rowSpan(key) {
let arr = this.data
.reduce((result, item) => {
if (result.indexOf(item[key]) < 0) {
result.push(item[key]);
}
return result;
}, [])
.reduce((result, keys) => {
const children = this.data.filter((item) => item[key] === keys);
result = result.concat(
children.map((item, index) => ({
...item,
[`${key}RowSpan`]: index === 0 ? children.length : 0,
}))
);
return result;
}, []);
this.data = arr;
},
},
mounted() {
this.rowSpan();
},
};
</script>
<style>
th.column-money,
td.column-money {
text-align: right !important;
}
</style>
来源:oschina
链接:https://my.oschina.net/u/4335406/blog/4821476