秃头的欧皇
2021-07-04 03:09
采纳率: 25%
浏览 27

求问ant vue表格怎么实现多级表头循环

img

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • 已采纳

    参考:

    <template>
      <a-table :columns="columns" :data-source="data" bordered></a-table>
    </template>
    <script>
    const renderContent = (value) => {
      const obj = {
        children: value,
        attrs: {},
      };
      return obj;
    };
    
    const data = [
      {
        key: "1",
        name: "John Brown",
        age: 32,
        tel: "0571-22098900",
        phone: 18889898989,
        address: "New York No. 1 Lake Park",
      },
      {
        key: "2",
        name: "John Brown",
        tel: "0571-220983d33",
        phone: 18889898888,
        age: 42,
        address: "New York No. 1 Lake Park",
      },
      {
        key: "3",
        name: "John Brown",
        age: 32,
        tel: "0575-2209890d9",
        phone: 18900010002,
        address: "Sidney No. 1 Lake Park",
      },
      {
        key: "4",
        name: "JimcRed",
        age: 18,
        tel: "0575-22090dd9",
        phone: 189010002,
        address: "London No. Lake Park",
      },
      {
        key: "5",
        name: "Jim Red",
        age: 11,
        tel: "0575d-2098909",
        phone: 18900010002,
        address: "Dublin No. 2 Lake Park",
      },
      {
        key: "6",
        name: "Jim Red",
        age: 11,
        tel: "0575d-2209909",
        phone: 18900010002,
        address: "Dublin No. 2 Lake Park",
      },
      {
        key: "7",
        name: "Jim Red",
        age: 11,
        tel: "0575d-2208909",
        phone: 18900010002,
        address: "Dublin No. 2 Lake Park",
      },
    ];
    
    export default {
      data() {
        return {
          data,
          columns: [],
        };
      },
      created() {
        this.columns = [
          {
            title: "名字",
            dataIndex: "name",
            key: "name",
            //customRender这个函数返回要合并的数据
            customRender(_, row) {
              return {
                children: row.name,
                attrs: {
                  rowSpan: row.nameRowSpan,
                },
              };
            },
          },
          {
            title: "地址",
            dataIndex: "age",
            key: "age",
            customRender(_, row) {
              return {
                children: row.age,
                attrs: {
                  rowSpan: row.ageRowSpan,
                },
              };
            },
          },
          {
            title: "年龄",
            dataIndex: "address",
            key: "address",
            customRender: renderContent,
          },
        ];
        this.rowSpan("name");
        this.rowSpan("age");
      },
      methods: {
        // 合并单元格,这里我抽出了一个函数,调用的时候只需要将dataIndex作为参数传入即可
        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;
        },
      },
    };
    </script>
    
    点赞 打赏 评论

相关推荐 更多相似问题