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

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

原因：

  1. dataSource必须是数组，否则不生效，且每次数据更新时，都需要重新渲染表格
  2. dataSource数组中必须有key属性，且必须是唯一的，否则不生效

解决办法：

  1. table元素上先判断dataSource是否存在：<a-table v-if="dataSource && dataSource.length" ......>
  2. 确保dataSource中每个对象都有唯一的key属性，如果原始中没有，则可以在table设置rowKey="id"，这个id可以换成其它唯一值的字段，或者在数据渲染前给每个对象添加key属性
  3. 给table设置一个key属性，例如：<a-table :key="Date.now()"，每次数据更新时，修改这个key值，也可以设置成一个响应值，每次数据更新时，自动+1，原始数据变更后，让table重新渲染（步骤1就可以省略了）
  4. 确保defaultExpandAllRows设置为true

示例： <a-table :columns="columns" :data-source="dataSource" rowKey="code" :key="Date.now()" :defaultExpandAllRows="true">