螞蟻金服的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>