antdv table表單合並多個單元格,設置列寬

根據字段進行多個單元格合並

適用於動態數據且多個需要合並的

效果圖：

代碼：

<template>
  <a-table
    bordered
    :columns="columns"
    :data-source="mergeData(data,['age','phone'])"
  />
</template>
<script>
  const columns = [
    {
      title: 'recordName',
      dataIndex: 'recordName',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      customRender: (value, row) => {
        const obj = {
          children:value,
          attrs: {}
        };
        obj.attrs.rowSpan = row.ageRowNum;
        return obj;
      }
    },
    {
      title: 'Phone',
      dataIndex: 'phone',
      customRender: (value, row) => {
        const obj = {
          children:value,
          attrs: {}
        };
        obj.attrs.rowSpan = row.phoneRowNum;
        return obj;
      }
    },
    {
      title: 'Address',
      dataIndex: 'address',
    },
  ];

  const data = [];
  for (let i = 0; i < 5; i++) {
    data.push({
      key: i,
      recordName: `Edward King ${i}`,
      age: 32,
      phone:[phone],
      address: `London, Park Lane no. ${i}`,
    });
  }

  export default {
    data() {
      return {
        data,
        columns,
      };
    },
    methods:{
      //data:表單的數據
      //mergeField:要合並的列
      mergeData(data,mergeField){
        mergeField.forEach(item=>{
          let recordList,recordName;
          for (let i = 0; i < data.length; i++){
            let currentRow = data[i][item]; //當前行
            let preRow = i ? data[i - 1][item] :"";//上一行
            if(i == 0 || currentRow != preRow){ //第一行無需比較  當前行與上一行不相同
              data[i][item+"RowNum"] = 1; //rowSpan設置為1 
              recordList = data[i]; //記錄當前的數據
              recordName = [item+"RowNum"];
            }else if(currentRow === preRow){ //當前行與上行相同
              data[i][item+"RowNum"] = 0; //設置當前行數為0
              recordList[recordName] += 1; //將剛才記錄的數據 進行+1
            }

          }

        })
        return data;
      },
    }
  };
</script>

表單是自動撐開的，顯着這兩列格外的難看 設置列寬

可通過設置width屬性或class屬性

修改后效果圖：

代碼：

  const columns = [
    {
      title: 'recordName',
      dataIndex: 'recordName',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      width:100,
      customRender: (value, row) => {
        const obj = {
          children:value,
          attrs: {}
        };
        obj.attrs.rowSpan = row.ageRowNum;
        return obj;
      }
    },
    {
      title: 'Phone',
      dataIndex: 'phone',
      className:"setLine",
      customRender: (value, row) => {
        const obj = {
          children:value,
          attrs: {}
        };
        obj.attrs.rowSpan = row.phoneRowNum;
        return obj;
      }
    },
    {
      title: 'Address',
      dataIndex: 'address',
    },
  ];
<style scoped>
  /deep/.setLine{
    width: 50px;
  }
</style>