ant-design-vue/components/vc-table/demo/colspan-rowspan.js

/* eslint-disable no-console,func-names,react/no-multi-comp */
import Table from '../index';
import '../assets/index.less';

const data = [
  { a: '13812340987', b: '0571-12345678', c: '张三', d: '文一西路', e: 'Male', key: '1' },
  { a: '13812340986', b: '0571-98787658', c: '张夫人', d: '文一西路', e: 'Female', key: '2' },
  { a: '13812988888', b: '0571-099877', c: '李四', d: '文二西路', e: 'Male', key: '3' },
  { a: '1381200008888', b: '0571-099877', c: '王五', d: '文二西路', e: 'Male', key: '4' },
  { a: '0571-88888110', c: '李警官', d: '武林门', e: 'Male', key: '5' },
  { a: '资料统计完毕于xxxx年xxx月xxx日', key: '6' },
];

export default {
  data() {
    this.columns = [
      {
        title: '手机号',
        dataIndex: 'a',
        colSpan: 2,
        width: 100,
        key: 'a',
        customRender: (o, row, index) => {
          const obj = {
            children: o,
            attrs: {},
          };
          // 设置第一行为链接
          if (index === 0) {
            obj.children = <a href="#">{o}</a>;
          }
          // 第5行合并两列
          if (index === 4) {
            obj.attrs.colSpan = 2;
          }

          if (index === 5) {
            obj.attrs.colSpan = 6;
          }
          return obj;
        },
      },
      {
        title: '电话',
        dataIndex: 'b',
        colSpan: 0,
        width: 100,
        key: 'b',
        customRender: (o, row, index) => {
          const obj = {
            children: o,
            attrs: {},
          };
          // 列合并掉的表格设置colSpan=0，不会去渲染
          if (index === 4 || index === 5) {
            obj.attrs.colSpan = 0;
          }
          return obj;
        },
      },
      {
        title: 'Name',
        dataIndex: 'c',
        width: 100,
        key: 'c',
        customRender: (o, row, index) => {
          const obj = {
            children: o,
            attrs: {},
          };

          if (index === 5) {
            obj.attrs.colSpan = 0;
          }
          return obj;
        },
      },
      {
        title: 'Address',
        dataIndex: 'd',
        width: 200,
        key: 'd',
        customRender: (o, row, index) => {
          const obj = {
            children: o,
            attrs: {},
          };
          if (index === 0) {
            obj.attrs.rowSpan = 2;
          }
          if (index === 1 || index === 5) {
            obj.attrs.rowSpan = 0;
          }

          return obj;
        },
      },
      {
        title: 'Gender',
        dataIndex: 'e',
        width: 200,
        key: 'e',
        customRender: (o, row, index) => {
          const obj = {
            children: o,
            attrs: {},
          };
          if (index === 5) {
            obj.attrs.colSpan = 0;
          }
          return obj;
        },
      },
      {
        title: 'Operations',
        dataIndex: '',
        key: 'f',
        customRender: (o, row, index) => {
          if (index === 5) {
            return {
              attrs: {
                colSpan: 0,
              },
            };
          }
          return <a href="#">Operations</a>;
        },
      },
    ];
    return {};
  },
  render() {
    return (
      <div>
        <h2>colSpan & rowSpan</h2>
        <Table columns={this.columns} data={data} class="table" />
      </div>
    );
  },
};