关于 Pull Requests #3418 ”fix: EditableCell about checked/unChecked Value, getDisable, rowKey“示例补充

[xachary]

• 已阅读 文档.
• 确保您的代码已是最新或者所报告的 Bug 在最新版本中可以重现. (部分 Bug 可能已经在最近的代码中修复)
• 已在 Issues 中搜索了相关的关键词
• 不是 ant design vue 组件库的 Bug

描述 Bug

使用 EditableCell 遇到以下问题（场景）：
1、当 editComponent 为 switch 的时候，设置 editComponentProps 的 checkedValue 和 unCheckedValue 无效。
2、假如存在多列均可以 edit，列A 受 列B 的值影响，列A 在 列B 为某个值的时候应该被禁用，此时 editDynamicDisabled 获得参数 record 中 列B 的值是旧值，没有变化，导致 列A 无法动态变成禁止 edit 状态。
3、禁用状的 EditableCell，”禁用“的表达应该提前，应该不允许点击切换至 editable 状态，无需用表单的禁用表达。
4、table 列设置里没有定义 id 列，在 beforeEditSubmit 返回到 record 中就不存在 id 属性，此时就缺失 id 用于提交表单了。此时可以根据 rowKey，补充至返回到 record 中。
5、使用 render 的时候，例如希望用彩色的 tag 显示记录的状态，此时出现类似上面”2“的情况，如果此记录经过 EditableCell 修改过，返回到 record 的是旧值，无法通过 render 显示最新的状态。

复现 Bug

<template>
  <div class="p-4">
    <BasicTable @register="registerTable" :beforeEditSubmit="beforeEditSubmit" />
  </div>
</template>
<script lang="ts" setup>
  import { h } from 'vue';
  import { BasicTable, useTable, BasicColumn } from '@/components/Table';
  import { Tag as ATag } from 'ant-design-vue';
  import { promiseTimeout } from '@vueuse/core';
  import { useMessage } from '@/hooks/web/useMessage';

  const { createMessage } = useMessage();

  enum YesOrNo {
    '是' = 'yes',
    '否' = 'no',
  }

  const columns: BasicColumn[] = [
    {
      title: '列A',
      dataIndex: 'A',
      edit: true,
      editComponent: 'Switch',
      editValueMap: (v) => {
        // 是否是 checkedValue/unCheckedValue 定义的值
        // 旧版本不支持，导致无法正常修改 switch 的值
        console.log(v);
        if (typeof v === 'string') {
          return v.toUpperCase();
        }
        return v.toString();
      },
      editComponentProps: {
        checkedValue: YesOrNo.是,
        unCheckedValue: YesOrNo.否,
      },
      editRender: ({ record: { A }, currentValue }) => {
        // 这里用新增的 currentValue
        // 这里取的 A 值，作用只是兼容旧版本不报错
        // 问题浮现可以参考 列 B
        return h(
          ATag,
          {
            color:
              { [YesOrNo.是]: 'success', [YesOrNo.否]: 'default' }[
                currentValue?.toString() ?? A.toString()
              ] ?? 'error',
            bordered: false,
          },
          () => [currentValue?.toString() ?? A.toString()],
        );
      },
      editDynamicDisabled: ({ record: { B }, currentValue }) => {
        // 场景：是 B 为 false 的时候，不允许 A 修改
        console.log(B, currentValue);
        // 这里不用新增的 currentValue，直接用 record 的值
        // 测试步骤（去操作列 B，不是列 A 哦）：
        // 1、点击触发 edit 状态
        // 2、修改 switch 的值
        // 3、点“x”放弃修改
        // 此时 record.B 的值是被 switch 修改的值，导致 cell 显示有误（强调：点的是“x”不是“✓”哦）
        // 同时导致，B 没有被真实改变，A 却受到影响
        //
        return B === false; // 不正常
        // return currentValue === false; // 用新增的 currentValue，正常
      },
    },
    {
      title: '列B',
      dataIndex: 'B',
      edit: true,
      editComponent: 'Switch',
      editRender: ({ record: { B }, currentValue }) => {
        console.log(B, currentValue);
        // 这里不用新增的 currentValue，直接用 record 的值
        // 测试步骤：
        // 1、点击触发 edit 状态
        // 2、修改 switch 的值
        // 3、点“x”放弃修改
        // 此时 record.B 的值是被 switch 修改的值，导致 cell 显示有误（强调：点的是“x”不是“✓”哦）
        return h(
          ATag,
          {
            color: B ? 'success' : 'default', // 不正常
            // color: currentValue ? 'success' : 'default', // 用新增的 currentValue，正常
            bordered: false,
          },
          () => [B.toString()], // 不正常
          // () => [currentValue.toString()], // 用新增的 currentValue，正常
        );
      },
    },
  ];

  const [registerTable] = useTable({
    title: '可编辑单元格示例',
    api: () =>
      Promise.resolve([
        { id: 1, A: YesOrNo.是, B: true },
        { id: 2, A: YesOrNo.否, B: true },
        { id: 3, A: YesOrNo.是, B: false },
      ]),
    columns: columns,
    showIndexColumn: false,
    bordered: true,
    rowKey: 'id',
  });

  const beforeEditSubmit = async (res) => {
    const {
      value,
      key,
      record: { id },
    } = res;

    if (key === 'A') {
      console.log(`A 的新值`, value);
      // 是否携带 id（columns没有定义 id 列）
      console.log('id', id);
      //
      if (id) {
        await promiseTimeout(1000);
        createMessage.success('操作成功');
        return true;
      } else {
        createMessage.error('操作失败：id 缺失！');
        return false;
      }
    } else {
      return true;
    }
  };
</script>

@wangjue666