antd table 表头分组了的表格该怎么实现单元格编辑呀
头大
没个分组的表头下面对应的都是不同的分数 想让这些分数都可以编辑
首先,建立一个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
}
}
},