Ant design of vue (表格相同數據動態合併) 出坑代碼！

螞蟻金服的design Vue表格 動態合併代碼詳情!

你好！咱們本次合併表格是實現的列 合併 rowSpan
在上代碼 以前 咱們先講一下表格
Ui框架：
一、Vue
二、Ant design Vue

表格：
一、行是 colSpan
二、列是 rowSpan
design 表格的title 是不計算 索引的 ！

咱們開始貼圖上代碼，所有代碼在文章末尾！

完成效果：

舉例：咱們以紅框選中列作相同數據合併

一、Vue 展現 Ant table 代碼

二、展現 data 數據

三、vue 導出代碼

四、methods 方法裏面實現 rowSpan
一、 注意 這裏 key 是傳值 聲明方法的時候能夠後寫
二、使用的時候 在 mounted 裏面調用便可

五、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>