如何实现表格的隔行编辑

[condorheroblog]

plus-pro-components 版本

0.1.22

vue 版本

3.5.13

element-plus 版本

2.9.8

最小复现环境的链接

https://ant.design/components/table-cn#table-demo-edit-cell

复现步骤

在 React 的 antd 中表头的编辑非常灵活，可以在 onCell 函数中直接再次定义，这样表格的行和列都能拿到，可以实现各行编辑，指定行，指定列等等功能。

  const columns = defaultColumns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record: DataType) => ({
        record,
        editable: col.editable,
        dataIndex: col.dataIndex,
        title: col.title,
        handleSave,
      }),
    };
  });

plus-pro-components 表头的 editable 简单支持一个 boolean 值，只能调整一个列的编辑，是否可以支持函数，或者有别的好的办法实现隔行编辑这种功能。

期望的行为

希望表头的 editable 是一个函数可以获取到 row 和 col 的数据

实际的行为

表头的 editable 是一个 boolean

系统信息

构建工具

Vite

额外留言（可选）

No response

[l-x-f]

【参考】可编辑表格 (手动控制)

[condorheroblog]

项目中遇到可编辑表格的地方不少，而且不是整列或者整行都能编辑这种简单的方式，比如上图这种，我需要在 DOM 渲染完成之后立刻调用 ref API 来开启编辑，这么做有两个痛点：

1. 无法直接拿到 row 和 col 上的相关数据，数据和列、行不相关了，业务实现起来较为复杂
2. 使用 PlusPage 还会遇到一个情况， await nextTick(); 之后必须还要 requestAnimationFrame 或者 setTimeout 才能获取表格的 refs

下面是业务中简单的代码演示，只是为了让某一行的两列不可编辑，但我必须读取和操作所有的单元格：

const updateTableCells = async (
  newAnswers: MetricAnswerItemType["config"]["answers"]
) => {
  if (!newAnswers) {
    return;
  }
  await nextTick();
  requestAnimationFrame(() => {
    if (!answerSingleTableRef.value?.formRefs) return;

    // 1. 找出所有NA_INDICATOR的索引
    const naIndices = newAnswers
      .map((answer, index) => (answer.text === NA_INDICATOR ? index : -1))
      .filter(index => index !== -1);

    // 2. 遍历所有行
    Object.entries(answerSingleTableRef.value.formRefs).forEach(
      ([indexStr, rowFormRefs]) => {
        const rowIndex = parseInt(indexStr);
        const isNaRow = naIndices.includes(rowIndex);

        const editableFormRefs = rowFormRefs.filter(
          item => item.prop === "text" || item.prop === "score"
        );
        // 3. 根据是否是NA行设置编辑状态
        editableFormRefs?.forEach(formRef => {
          if (isNaRow) {
            formRef.stopCellEdit?.();
            // 如果是 NA 行，则重置得分为 0
            if (formRef.prop === "score") {
              answerSingleTableData.value[rowIndex].score = 0;
            }
          } else {
            formRef.startCellEdit?.();
          }
        });
      }
    );
  });
};

---

期望的行为：

像 antd 那样，表格的 editable 字段支持函数是否可行。