antd 分组了的表格该怎么实现单元格编辑

Question

antd table 表头分组了的表格该怎么实现单元格编辑呀
头大
没个分组的表头下面对应的都是不同的分数 想让这些分数都可以编辑

Answer 1

首先，建立一个currentSlots 把你需要修改的列的key放入其中

reMatchData(collumData,config){//执行这个方法前，this.currentSlots需要置空：this.currentSlots = []; this.rematchData(this.collumData,config)
      collumData.map((item,index)=>{
        if(item.children){
          this.reMatchData(item.children,config)
        }else{
          item.dataIndex = item.key
          item.align = 'center'
          item.color = '#fff'
          item.slots = {customRender: item.key}
          this.currentSlots.push(item.key) //这里是循环collumData，如果要特定slot,需要加判断
          if(config.find(ite=>{return ite.key == item.key})){//这里是特殊的判断，可忽略
            item.width = 150
            item.color = index==1?'#eee':'#ccc'
            if(index == 0){
              item.fixed = 'left'
            }
          }
        }
      })
    },

然后，在table中把这些slots循环加入,editing状态下可修改，非editing状态不修改

<template v-for="item in currentSlots" #[item]="{record}">
              <span v-if="!record.editing">{{record[item]}}</span>
              <span v-if="record.editing"><a-input v-model:value="record[item]">{{record[item]}}</a-input></span>
            </template>

然后，在customRow的dlclick事件中，给单行数据修改editing
再然后，在单击事件中，判定如果该行非editing状态，那么，循环table所有行重置为非editing,

rowClick(record, index) {
      return {
        onclick: (e) => {
          if(!record.editing){
            this.tableData.map(item => {
              item.editing = false
            })
          }
          if (record.clicking) {
          } else {
            this.tableData.map(item => {
              item.clicking = false
            })
            record.clicking = true
            this.selectedRowKeys = [index + 1]
          }
        },
        ondblclick: (e) => {
          this.tableData.map(item => {
            item.editing = false
          })
          record.editing = true
        }
      }
    },