d2-crud-plus 使用小技巧（七）—— 表单动态校验（跟进前置条件的值，校验其他的字段）

问题

vue2 + elementUI + d2-crud-plus，文档中没有关于表单动态校验的内容，但需求是前置条件满足时，后面的字段需要校验必填，前置条件不满足，后面的字段不校验必填。

期望

前置条件不满足，后面的字段不校验必填

前置条件满足时，后面的字段需要校验必填

思路

通过阅读文档，发现可以通过crud.js > crudOptions > columns > form > itemProps 设置el-form-item的配置。

在elementUI > form > Form-Item Attributes 中可以设置是否校验

代码

export const crudOptions = (vm) => {
  return {
    ...
    columns: [
      ...
      {
        title: '设置',
        key: 'set',
        type: 'select',
        dict: {
          data: [
            { value: 1, label: '开启' },
            { value: 0, label: '关闭' }
          ],
          value: 'value',
          label: 'label'
        },
        form: {
          value: 0,
          component: {
            span: 8
          },
          valueChange(key, value, form, { getColumn, mode, component, immediate, getComponent }) {
            if (value === 0) {
              form.province = []
              getColumn('province').itemProps.rules[0].required = false
              getColumn('province').itemProps.class.yxtInput = false
              getColumn('province').itemProps.required = false
            } else {
              getColumn('province').itemProps.rules[0].required = true
              getColumn('province').itemProps.class.yxtInput = true
              getColumn('province').itemProps.required = true
              if (!form.province) {
                form.province = []
              }
            }
          },
          valueChangeImmediate: true
        }
      },
      ...
      {
        title: '省份',
        key: 'province',
        type: 'select',
        dict: {
          cache: true,
          url: '/api/...',
          value: 'id', // 数据字典中value字段的属性名
          label: 'name' // 数据字典中label字段的属性名
        },
        form: {
          itemProps: {
            required: false,
            rules: [{ required: false, message: '必填项' }],
            class: { yxtInput: false }
          },
          component: {
            span: 12,
            name: 'dict-select',
            props: {
              filterable: true, // 可过滤选择项
              multiple: true, // 支持多选
              clearable: true // 可清除
            },
            disabled(context) {
              return !context.form.province_check
            }
          }
        }
      }
    ]
  }
}