vue2+antd实现table合并单元格并自定义内容实现点击事件

前言

因为项目中表格的操作栏需要合并相同的项，内容需要加入删除、修改等按钮点击事件，经过百度各种实验终于找到了方法。

实现

<template>
  <w-table
    bordered
    :columns="columns"
    :data-source="data"
    :loading="false"
    :pagination="false"
    :row-key="record => record.id"
    :scroll="{ x: 1000, y: 300 }"
  />
</template>
<script>
export default {
  components: {},
  data() {
    return {
      columns: [
        {
          title: '栏目1',
          dataIndex: 'lm1',
          key: 'lm1',
          customRender: (value, row) => {
            const obj = {
              children: value,
              attrs: {
                rowSpan: row.rowSpan
              }
            };
            return obj;
          }
        },
        {
          title: '栏目2',
          dataIndex: 'lm1',
          key: 'lm1'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          customRender: (value, row) => {
            const obj = {
              children: (
                <div>
                  <a onClick={() => this.handleEditDeployFile(row, 'view')}>查看</a>
                  {this.buttonCodes.includes('DeployEdit') ? <w-divider type="vertical" /> : null}
                  {this.buttonCodes.includes('DeployEdit') ? (
                    <a onClick={() => this.handleEditDeployFile(row, 'edit')}>编辑</a>
                  ) : null}
                </div>
              ),
              attrs: {
                rowSpan: row.rowSpan
              }
            };
            return obj;
          }
        }
      ],
      data: [
        {
          lm1: '1',
          lm2: '2',
          rowSpan: 2
        },
        {
          lm1: '1',
          lm2: '3',
          rowSpan: 0
        }
      ],
      loading: false
    };
  },
  activated() {},

  methods: {
    handleEditDeployFile(record, type) {
      console.log(record, type);
    }
  }
};
</script>
<style lang="less" scoped></style>

合并效果图

image.png