在vue中，在使用antdesign的table组件时，实现可以直接编辑修改某个单元格的值

例如，在一个表格中，有一列叫做“权重”，想要实现单独编辑某个权重。

const columns = ref([
  {
    title: "权重",
    dataIndex: "weightiness",
    key: "weightiness",
  }
]);

<template #bodyCell="{ column, value, record }">
  <template v-if="column.key === 'weightiness'">
    <div>
      <!-- 处于编辑状态的时候 -->
      <div
        v-if="editableData[record.id]"
        style="display: flex"
      >
        <a-input
          v-model:value="editableData[record.id].weightiness"
          style="width: 50px"
        />
        <check-outlined
          @click="save(record)"
        />
      </div>
      <!-- 正常展示的时候 -->
      <div v-else>
        {{ value || 0 }}
        <img
          src="@/assets/images/settings/weightiness-edit.png"
          @click="edit(record)"
        />
      </div>
    </div>
  </template>
</template>

const data = ref(); // 表格展示的数据源
const editableData = reactive({});

// 点击编辑
const edit = (record: any) => {
  // cloneDeep是Loadash库中的一个函数，用于进行深拷贝
  editableData[record.id] = cloneDeep(
    data.value.filter((item: { id: String }) => record.id === item.id)[0]
  );
};

// 点击提交，修改权重
const save = async (record: any) => {
  Object.assign(
    data.value.filter((item: { id: String }) => record.id === item.id)[0],
    editableData[record.id]
  );
  // 把修改后的最新的当前行的数据作为接口参数
  await goodsOptionUpdate(
    data.value.filter((item: { id: String }) => record.id === item.id)[0]
  );
  delete editableData[record.id];
};