Form 表单

官方文档：https://antdv.com/components/form-cn

问题：通过对象数据遍历表单组件，校验不生效或者校验不通过：

原因：

  1. rules必须加载<a-form-item>上，不能加载input、select等组件上，否则校验不生效
  2. 组件的v-model:value必须单独关联一个formdata对象中，不能直接使用原始数据对象，否则任何时候都显示校验提示，可以先将原始数据对象深拷贝到formdata对象中，然后再使用formdata对象进行校验，校验通过后再将formdata对象赋值给原始数据对象。
    • 示例：
       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

      // 原始表单数据对象
const formObject = ref({
    name: {
        label: '分类名称',
        name: 'name',
        type: 'input',
        placeholder: '请输入分类名称',
        default: '默认数据',
        rules: [{ required: true, message: '请输入分类名称'}],
    },
    status: {
        label: '状态',
        name: 'status',
        type: 'select',
        placeholder: '请选择状态',
        default: 1,
        options: [
            { label: '启用', value: 1 },
            { label: '禁用', value: 0 },
        ],
        rules: [{ required: true, message: '请选择状态'}],
    },
})
// 表单数据存储对象
const formData = ref({})
// 原始数据对象深拷贝到表单数据存储对象中
const dataExtract = (data) => {
    Object.keys(data).forEach(key => {
        formData.value[key] = data[key].default
    })
}
// 监听原始数据对象变化，将变化后的数据深拷贝到表单数据存储对象中
watch(formObject, (val) => {
    dataExtract(val)
}, { immediate : true})

// 提取后的formData
{
    name: '默认数据',
    status: 1,
}

Table 表格

官方文档：https://antdv.com/components/table-cn

问题：defaultExpandAllRows设置为true时，表格默认展开所有行不生效：

原因：

  1. dataSource必须是数组，否则不生效
  2. dataSource数组中必须有key属性，且必须是唯一的，否则不生效
  3. 必须在获取到dataSource数据后再设置defaultExpandAllRows为true，否则不生效，建议使用useEffect钩子函数
    • 使用v-if指令，适用于简单的条件控制，可以确保数据加载完成后再渲染表格。
    • 使用onBeforeMount()和onMounted()生命周期钩子，需要配合async/await使用，适用于需要在组件挂载前后执行逻辑的场景。
    • 使用defineAsyncComponent()异步组件加载，适用于需要动态加载组件的场景，可以有效减少初始加载时间。