ant design vue table单元格编辑，点击全部显示可编辑单元

 

借鉴官方的示例我们往里面插入一个select标签使用，在删除操作时候，对tableData数据直接进行删除操作（不涉及调用接口），打印数据可以看出指定行的数据已经删除，但是在select里面剩下的数据并没有改变，这种情况出现在从上往下删除的时候。解决办法，把select 用于显示值的属性换成:value 而不是:default-value。下面有代码分享，

<a-table
          :scroll="{ x: 'max-content', y: 240 }"
          :columns="columns"
          :data-source="tableData"
          bordered
          size="small"
          :rowKey="
            (record, index) => {
              return index;
            }
          "
        >
          <template
            v-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-option
                v-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-else
              class="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)">
              <a
                href="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;
      that.companys.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;
}