[Table]在筛选的输入框中按回车键会触发表单提交

[Kigoal]

tdesign-vue-next 版本

1.0.8

重现链接

无

重现步骤

<script setup lang="ts">
import { ref, rective } from 'vue';

const formData = rective({
  title: undefined,
});

const formRules = {
  title: [{ required: true, message: `请输入内容`, type: 'error' }],
};

const tableData = [
  {
    test1: 1,
    test2: 'asdassaasasas',
    test3: '12456443532',
  },
];

const tableColumns = [
  {
    colKey: 'test1',
    title: 'test1',
    width: 100,
    fixed: 'left',
    filter: {
      type: 'input',
      props: {
        clearable: true,
        // onEnter(value: InputValue, { e }: { e: KeyboardEvent }) {
        //   e.preventDefault();
        // },
      },
    },
  },
  {
    colKey: 'test2',
    title: 'test2',
    width: 100,
    fixed: 'left',
  },
  {
    colKey: 'test3',
    title: 'test3',
    width: 1000,
  },
];

const filterValue = ref<FilterValue>({});
</script>

<template>
  <Form :data="formData" :rules="formRules">
    <FormItem label="test">
      <PrimaryTable
        :data="tableData"
        :columns="tableColumns"
        v-model:filter-value="filterValue"
      />
    </FormItem>
    <FormItem>
      <Button theme="primary" type="submit">提交</Button>
    </FormItem>
  </Form>
</template>

期望结果

按下回车键时仅隐藏筛选的弹窗，不要触发表单校验

实际结果

按下回车时会隐藏筛选的弹窗，同时也会触发表单校验

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[github-actions]

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

[github-actions]

♥️ 有劳 @realyuyanan @Louiszhai @PengYYYYY @chaishi 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @Kigoal 。

[chaishi]

今天群里有位同学说，正好是期望触发 form 表单，不知道是你不

[Kigoal]

今天群里有位同学说，正好是期望触发 form 表单，不知道是你不

是我，我是不希望在筛选弹窗的input中触发提交。😂
如果table在编辑模式下能自动触发检验更好了，目前我是手动触发

// form

// 提交表单事件
const onSubmit = async () => {
  const responseData = await Create(formData.value);
  console.log(responseData);
};

const onSubmitClick = async () => {
  const error: [boolean, boolean] = [false, false];

  // 校验表单数据
  if ((await formRef.value?.validate()) !== true) {
    error[0] = true;
  }

  // 校验表格数据
  if ((await tableRef.value?.validate()) !== true) {
    error[1] = true;
  }

  if (!error.some((value) => value === true)) {
    // 执行表单提交
    await formRef.value?.submit();
  }
};

// table

const onValidateTableData = async () => {
  if (tableRef.value) {
    const { result } = await tableRef.value.validateTableData();
    // 这里在检验成功时返回{}而不是true
    return Object.keys(result).length > 0 ? result : true;
  }

  return undefined;
};

defineExpose({
  validate: onValidateTableData,
});

[chaishi]

好奇一个使用场景：什么样的情况下会把 Table 放在 Form 中使用。印象中没有给过这样的示例

[chaishi]

1. 已支持回车键不会触发表单提交
2. 已新增 col.edit.validateTrigger ，用于支持是否在数据变化时，实时校验

resolved in #2515

待发布