借鉴官方的示例我们往里面插入一个select标签使用，在删除操作时候，对tableData数据直接进行删除操作（不涉及调用接口），打印数据可以看出指定行的数据已经删除，但是在select里面剩下的数据并没有改变，这种情况出现在从上往下删除的时候。解决办法，把select 用于显示值的属性换成:value 而不是:default-value。下面有代码分享，
<a-table:scroll="{ x: 'max-content', y: 240 }":columns="columns":data-source="tableData"borderedsize="small":rowKey="(record, index) => {return index;}"><templatev-for="(col, index) in columnsSe":slot="col"slot-scope="text, record, row"><!-- 单位名称为下拉选择 --><a-select:key="index"style="width: 100%"@change="(e) => unitChange(row, e)"v-if="editable && index == 0"placeholder="请选择单位名称":value="text"><a-select-optionv-for="(i, index1) in companys":key="index1":value="i.id">{{ i.name }}</a-select-option></a-select><!-- 其他的为输入框 --><a-input:key="index"v-else-if="editable && index > 0 && index < columnsSe.length"style="margin: -5px 0; width: 100%; padding: 0px":value="text"@change="(e) => handleChange(e.target.value, row, col)"/><!-- 默认显示 --><p:key="index"v-elseclass="set-height"v-html="index == 0 ? unitName(text) : text"></p></template><template slot="action" slot-scope="text, record, row"><!-- 操作栏 --><a-popconfirm title="确定要删除吗?" @confirm="() => onDelete(row)"><ahref="javascript:;"style="margin: 0 4px"class="font-color-red"><a-icon type="delete" />删除</a></a-popconfirm></template></a-table>
mounted() {that = this;//后端获取select列表数据this.getCompany();this.columns = getHeader();this.columnsSe = getSeColum();},method:{unitName(value) {let name;panys.forEach((element) => {if (value == element.id) {name = element.name;}});return name;},// 选择单位煤矿unitChange(row, id) {this.tableData[row].unit = id;},onDelete(row) {this.tableData.splice(row, 1);},// 编辑表格按钮editTable() {this.editable = !this.editable;this.showAction();},showAction(open = true) {if (open) {if (this.editable) {this.columns.push({title: "操作",dataIndex: "action",width: 100,align: "center",fixed: "right",scopedSlots: { customRender: "action" },});} else {this.columns.pop();}}},// 新增行addRow() {this.editable = true;// 添加一条空数据this.tableData.push(backOneRow());this.showAction(!this.exitAction());},backPage() {this.$router.go(-1);},//判断是否存在操作列exitAction() {let flag = false;this.columns.forEach((element) => {if (element.dataIndex == "action") {flag = true;}});return flag;},}
生成头和列构建的方法
export function getHeader() {let colums = [{title: "单位名称",dataIndex: "unit",fixed: "left",width: 156,align: "center",scopedSlots: { customRender: "unit" },},];for (let i = 1; i <= 12; i++) {let obj = {title: i + "月",dataIndex: "month" + i,children: [{title: "取水",dataIndex: "fetch" + i,width: 80,align: "center",scopedSlots: { customRender: "fetch" + i },},{title: "用水",dataIndex: "use" + i,width: 80,align: "center",scopedSlots: { customRender: "use" + i },},{title: "合计",dataIndex: "total" + i,width: 80,align: "center",scopedSlots: { customRender: "total" + i },},],};colums.push(obj);}return colums;}// 返回二级头的数组export function getSeColum() {let colums = getHeader();let temparr = [];colums.forEach((item) => {if (item.children && item.children.length > 0) {item.children.forEach((element) => {temparr.push(element.dataIndex);});}});temparr.unshift("unit");return temparr;}// 返回一行空数据export function backOneRow() {let temparr = getSeColum();temparr.pop();let obj = {};temparr.forEach((item) => {obj[item] = "";});return obj;}
