Tencent / tdesign-vue-next

A Vue3.x UI components lib for TDesign.
https://tdesign.tencent.com/vue-next
MIT License
1.35k stars 445 forks source link

[table] 可编辑的表格,清空文本,点击校验,首次校验正常打印不通过的行信息,但是再点击第二次就验证就打印为空 #4308

Open BryantOut opened 2 weeks ago

BryantOut commented 2 weeks ago

tdesign-vue-next 版本

1.9.5

重现链接

No response

重现步骤

<template>
  <div>
    <!-- 当前示例包含:输入框、单选、多选、日期 等场景 -->
    <!-- editableCellState 用于控制某些单元格为只读状态 -->
    <t-table
      ref="tableRef"
      row-key="key"
      :columns="columns"
      :data="data"
      :editable-cell-state="editableCellState"
      bordered
      lazy-load
    />
    <br />

    <!-- 示例代码有效,勿删 -->
    <t-space>
      <t-button @click="validateTableData">校验</t-button>
    </t-space>
  </div>
</template>

<script lang="tsx" setup>
import { BaseTableCol, ButtonProps, Input, MessagePlugin, TableInstanceFunctions, TableProps } from 'tdesign-vue-next';
import { computed, ref } from 'vue';

const initData = new Array(1).fill(null).map((_, i) => ({
  key: String(i + 1),
  firstName: ['贾明', '张三', '王芳'][i % 3],
}));
const align = ref<BaseTableCol['align']>('left');
const data = ref<TableProps['data']>([...initData]);

// 用于控制哪些行或哪些单元格不允许出现编辑态,参数有 { row, col, rowIndex, colIndex }
const editableCellState: TableProps['editableCellState'] = (cellParams) => {
  // 第一行不允许编辑
  const { row } = cellParams;
  return row.status !== 2;
};
const tableRef = ref<TableInstanceFunctions>();
// 用于提交前校验数据(示例代码有效,勿删)
const validateTableData: ButtonProps['onClick'] = () => {
  // 仅校验处于编辑态的单元格
  tableRef.value.validateTableData().then((result) => {
    console.log(data.value);
    console.log('validate result: ', result);
  });
};
const columns = computed<TableProps['columns']>(() => [
  {
    title: '申请人',
    colKey: 'firstName',
    align: align.value,
    // 编辑状态相关配置,全部集中在 edit
    edit: {
      // 始终保持为编辑态
      keepEditMode: true,
      // 1. 支持任意组件。需保证组件包含 `value` 和 `onChange` 两个属性,且 onChange 的第一个参数值为 new value。
      // 2. 如果希望支持校验,组件还需包含 `status` 和 `tips` 属性。具体 API 含义参考 Input 组件
      component: Input,
      // props, 透传全部属性到 Input 组件。可以是一个函数,不同行有不同的 props 属性 时,使用 Function)
      props: ({ rowIndex, editedRow }) => {
        return {
          clearable: true,
          theme: 'normal',
          min: 0,
          placeholder: '请输入申请人',
          onChange: () => {
            data.value.splice(rowIndex, 1, {
              ...editedRow,
            });
          },
        };
      },
      // 触发校验的时机(when to validate)
      validateTrigger: 'change',
      // 校验规则,此处同 Form 表单。https://tdesign.tencent.com/vue-next/components/form
      rules: [
        {
          required: true,
          message: '不能为空',
        },
        {
          max: 10,
          message: '字符数量不能超过 10',
          type: 'warning',
        },
      ],
      // 默认是否为编辑状态
      defaultEditable: true,
    },
  },
]);
</script>

期望结果

当校验不通过的时候tableRef.value.validateTableData的结果应该每次都是有结果过的,而不是变成{}

实际结果

首次点击校验,console打印正常,但是当再次点击就通过了{}

框架版本

3.2.47

浏览器版本

No response

系统版本

No response

Node版本

18.15.0

补充说明

No response

github-actions[bot] commented 2 weeks ago

👋 @BryantOut,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。