vue antd table 合并的表格中进行编辑操作
1、插槽部分
<template slot="manualPlanBatch" slot-scope="text, record">
<a-input
v-if="record[`manualPlanBatch_editable`]"
:value="text"
size="small"
style="width: 90%;height:18px;"
placeholder="请选择"
@change="value => handlePlanBatchChange(value, record)"
@blur="value => handlePlanBatchEdit(value, record)"
></a-input>
<div style="height:18px" v-else @click="handlePlanBatchClick(text, record)">
{{ record.manualPlanBatch }}
</div>
</template>
2、 created() {
this.setContractNumClickEvent();
},
**//由于在columns中使用$createElement方法会报错:undefined,所有在这里重写customRender方法
// columns[0]是指columns的第一列,你们是第几列就改成对应的下标**
setContractNumClickEvent() {
columns[14].customRender = (text, record, index, column) => {
const { firstColRowSpan, manualPlanBatch_editable } = record || {};
let _this = this;
const child1 = _this.$createElement('div', {
domProps: {
innerHTML: text
},
on: {
click: function() {
_this.handlePlanBatchClick(text, record);
}
}
});
const child2 = _this.$createElement('input', {
domProps: {
value: text
},
style: {
width: '100px'
},
on: {
click: function() {
_this.handlePlanBatchClick(text, record);
},
blur: function() {
_this.handlePlanBatchEdit(text, record);
},
input: function(value) {
_this.handlePlanBatchChange(value, record);
}
}
});
return {
children: manualPlanBatch_editable ? child2 : child1,
attrs: {
rowSpan: firstColRowSpan
}
};
};
},
handlePlanBatchChange(e, record) {
console.log(e, e.target.value);
record[`manualPlanBatch`] = e.target.value;
},
//这里给数据添加 _editable来控制单元格的编辑
handlePlanBatchClick(text, record) {
console.log(text, record, '---------------------text');
record[`manualPlanBatch_editable`] = true;
// this.oldPlantName = text;
},
handlePlanBatchEdit(value, record) {
console.log(value, record);
record[`manualPlanBatch`] = value;
record[`manualPlanBatch_editable`] = false;
const { manualPlanBatch, semiProductCode } = record || {};
const { year, month } = this.queryData || {};
let obj = {
batch: manualPlanBatch,
month,
semiProductCode,
year
};
this.toupdate(obj) //调用保存接口
},
//这里是在数据返回后进行合并操作并给能编辑的单元格加属性
formatData() {
// 在这里给数据按照前几列依次排序
const data = _.sortBy(this.tableData, ['semiProductCode']);
const object = _.groupBy(data, 'semiProductCode');
for (const firstKey in object) {
let firstColRowSpan = 1;
if (Object.hasOwnProperty.call(object, firstKey)) {
firstColRowSpan = object[firstKey].length;
// 根据firstKey找到对应的半成品编码,赋值firstColRowSpan
const filterPlantData = data.filter(item => item['semiProductCode'] === firstKey);
filterPlantData.forEach((element, i) => {
element.firstColRowSpan = i % firstColRowSpan === 0 ? firstColRowSpan : 0;
});
}
}
data.forEach((ele, i) => {
**this.$set(ele, 'manualPlanBatch_editable', false);**
});
this.tableData = data;
},