合并表格列和数据渲染

合并表格列和合并后的数据增添

需求：用ant-design-vue渲染一个表格,表格存在合并列,添加数据会使非合并列数量增加，合并列高度增加。

如下图：

点击添加后：

因为刚接触ant-design-vue,对其表格的设计实在是不太熟悉,肯定还有更好的实现方案,我这算是抛砖引玉了,希望有更好方案的前辈在评论区讨论。

ant-design-vue的合并行和合并列方法（没有找到无法实现上述要求的方案）

方法：customRender((value,row,index)=>{})（属于columns的配置）

value: 该列的值

row:表示该行（object:包含改行所有属性）

index: 该行属于第几列

可通过scopedSlots: {customRender: "emission"}和slot-scope=(value,row,index)拿到这些值

合并行和合并列：

customRender: (value, row, index) => {                
                 const obj = {
                    children: value,
                    attrs: {},
                  };
                  obj.attrs.colSpan = 2; //合并行
                  if (index % 4 == 0) {
                    obj.attrs.rowSpan = 4; //合并列 数字是要合并多少行
                  } else {
                    obj.attrs.rowSpan = 0;
                  }
                  return obj;
                },

然而这样并不能实现上面要求的功能，因为渲染数据是一行行渲染的

真实现方案

不通过合并列的方法实现，而是用div来伪装新增列

template

<template>
  <div class="simples">
      <a-table :columns="columns" :data-source="data" bordered>
          <template slot="emission" slot-scope="text">
              <div class="inTD" v-for="(item,index) in text" :key="index + item.toString()">{{item}}</div>
          </template>
          <template slot="operation" slot-scope="text,row">
              <a-button @click="minuRow(row.key)" type="danger" shape="circle" icon="minus" :disabled="text === 1"></a-button>
              <a-button @click="addRow(row.key)" type="primary" shape="circle" icon="plus"></a-button>
          </template>
      </a-table>
  </div>
</template>

js

<script>
const columns = [
    {
        title: '测试',
        dataIndex: 'check_factor',
        key: 'check_factor'
    },
    {
        title: '单位',
        dataIndex: 'unit',
        key: 'unit'
    },
    {
        title: '量程',
        dataIndex: 'range',
        key: 'range'
    },
    {
        title: '排放标准',
        dataIndex: 'emission',
        key: 'emission',
        scopedSlots: {customRender: "emission"}
    },
    {
        title: '监测时间',
        dataIndex: 'monitor',
        key: 'monitor'
    },
    {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        scopedSlots: {customRender: "operation"}
    }
]
const data = [
    {
        key: 1,
        check_factor: 'PH',
        unit: 'mg/L',
        range: 60,
        emission: ['测试','测试','测试'],//用来假装列表
        monitor: '2020-12-13',
        operation: 3,//传递emission的长度
    },
    {
        key: 2,
        check_factor: 'PH',
        unit: 'mg/L',
        range: 60,
        emission: ['测试','测试','测试'],
        monitor: '2020-12-13',
        operation: 3
    },
    {
        key: 3,
        check_factor: 'PH',
        unit: 'mg/L',
        range: 60,
        emission: ['测试','测试','测试'],
        monitor: '2020-12-13',
        operation: 3
    },
]
export default {
    name: 'Simples',
    data(){
        return {
            columns,
            data
        }
    },
    methods: {
        minuRow(key){
            //用operation来存放数组的长度，并实时增减
          this.data[key-1].operation--
          //通过增加数组长度来增加假的列
          this.data[key-1].emission.pop(key, 1);
        },
        addRow(key){           
          this.data[key-1].operation++          
          this.data[key-1].emission.push('测试1');
        }
    }
}
</script>

CSS

<style>
/* 去除原单元格样式 */
.ant-table-tbody .ant-table-row td:nth-child(4) {
    padding: 0;
}
/* 写假装是单元格的样式 颜色不同是为了做区分*/
.inTD {
    margin: 0;
    padding: 0 16px;
    width: 100%;
    /* border-bottom: 1px solid #e8e8e8; */
    border-bottom: 1px solid #000;
    height: 64px;
    line-height: 64px;
}
.inTD:last-child {
border-bottom: none;
}
</style>

/* border-bottom: 1px solid #e8e8e8; */
border-bottom: 1px solid #000;
height: 64px;
line-height: 64px;
}
.inTD:last-child {
border-bottom: none;
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201106170839338.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Njk5Mjcw,size_16,color_FFFFFF,t_70#pic_center)