Open BryantOut opened 2 weeks ago
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
18.15.0
👋 @BryantOut,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。
tdesign-vue-next 版本
1.9.5
重现链接
No response
重现步骤
期望结果
当校验不通过的时候tableRef.value.validateTableData的结果应该每次都是有结果过的,而不是变成{}
实际结果
首次点击校验,console打印正常,但是当再次点击就通过了{}
框架版本
3.2.47
浏览器版本
No response
系统版本
No response
Node版本
18.15.0
补充说明
No response