vue+iview table实现动态表头且嵌套子级表头,可删除

需求

用户添加一个时间段横向构建一条数据, 添加一个类型则在表格纵向构建一条数据。
表头名字是用户输入的, 每个动态表头对应一个子级表头包含面积和单价是固定的。(如图)
ps: 这里的实现如果大家有其他思路，欢迎探讨~

实现思路+代码

目前项目是iview组件库的Table组件,需要使用到动态表头, 添加时段这里就不赘述了,主要说一下动态表头且有子级表头的实现思路。
1.先定义一个数组用于方便表头识别的唯一key。

/**
 * 为了避免数据取值和赋值的问题,根据该数组来取,
 * 删除则把对应动态表头的值还回来, 添加则在此数组中取出一个并删掉
 * 最多五个则限制到5
*/
let classRandomArr = ref([1, 2, 3, 4, 5]);

2.定义一个用于处理动态表头的公共方法。

/**
 * 动态表头方法
 * @param tTitle 表头名
 * @param tKey 表头key
 * @param index
 */
function classifiedUnitPriceColumnsFun(tTitle: string = '', tKey: string = '') {
  const newColumn: any = {
    title: tTitle,
    key: tKey,
    align: 'center',
    renderHeader: (h, { column }) => {
      return h('div', [
        h('span', column.title),
        h(
          'Button',
          {
            props: {
              type: 'error',
            },
            class: 'nbd Error',
            style: {
              'margin-left': '10px',
            },
            onClick: () => {
              //表头删除按钮点击事件...大家可根据自己业务调整
               initClassifiedUnitPriceColumnsDel(column);
            },
          },
          '删除'
        ),
      ]);
    },
    children: [
      {
        title: '面积(㎡)',
        key: `${tKey}_areaSize`,
        align: 'center',
        width: 120,
      },
      {
        title: '单价(元/㎡)',
        key: `${tKey}_areaPrice`,
        slot: 'price',
        align: 'center',
        width: 140,
      },
    ],
  };
  classifiedUnitPriceColumns.value.splice(-1, 0, newColumn);
}

3.添加时取值数组中的数用于添加唯一的key，并给列表数据中对应的key添加数据。

      const tKey = `type${classRandomArr.value[0]}`;
      classRandomArr.value.shift();
      classifiedUnitPriceColumnsFun(typeModalName, tKey);
      const sizeKey = `${tKey}_areaSize`;
      const nameKey = `${tKey}_name`;
      // 表格数据对应添加
      periodsWithinType.forEach(element => {
        element[nameKey] = typeModalName;//这是添加类型时输入的表头名字
        element[sizeKey] = typeModalAreaSize;//这是添加类型时输入的面积
      });

4.最后附一个表头删除方法

/**
 * 删除动态表头
 * 也要删除表头对应的数据
 * @param column 表行内容
 */
function initClassifiedUnitPriceColumnsDel(column: any) {
  const { key } = column;
  let lastChar = key.slice(-1);
  classRandomArr.value.push(parseInt(lastChar));
  classifiedUnitPriceColumns.value = classifiedUnitPriceColumns.value.filter(item => {
    return item.key !== key;
  });
  periodsWithinType.forEach(obj => {
    for (let k in obj) {
      if (k.includes(key)) {
        obj[k] = ''; // 清除包含指定前缀的键对应的值
      }
    }
  });
}

到这儿就搞定啦~