使用antdesignvue的规则，分开写和写在一起都不行

Question

使用antdesignvue的规则，为什么没有生效啊，那位知道怎么解决亚，分开写和写在一起都不行

import { columns } from '../../js/data';
export function getForm() {
  const arr = [];
  const form = {};
  Object.keys(columns).forEach((el) => {
    if (columns[el].key !== 'action') {
      arr.push(columns[el].key);
    }
  });
  arr.forEach((key) => {
    form[key] = null;
  });
  return form;
}

export const rules = [
  {
    ProjectCoding: {
      required: true,
      message: '三级单元必填项',
      trigger: 'blur',
    },
  },
];

 <a-modal :visible="dialogVisible" width="40%" title="新增列收" ref="addModal" v-on="$listeners" v-bind="$attrs"
            @ok="onSubmit" @cancel="handleCancel" :confirm-loading="confirmLoading">

            <a-form-model inline class='form' ref="ruleForm" :model="form" :rules="rule" :label-col="labelCol"
                :wrapper-col="wrapperCol">
                <a-form-item label="项目编码" has-feedback prop="ProjectCoding">
                    <a-select :disabled="proView" :show-search="true" style="width: 200px" :loading="loading"
                        @change="getBasicInfo" v-model="form.ProjectCoding">
                        <a-select-option v-for="(item, index) in allProject" :key="item.projectCode"
                            :value="item.projectCode">
                            {{ item.projectCode }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
 </a-form-model>

  async init(...args) {
            // console.log('子组件', args);
            this.proView = false;
            this.type = '1';
            if (args[0] == 0) {
                this.getProject();
                this.form = getForm();
                this.dialogVisible = true;
            } else if (args[0] == 1) {
                this.form = args[1];
                this.proView = true;
                this.type = this.form['LMBI'] == '0.00' ? '2' : '1';
                this.dialogVisible = true;
            };
            let obj = await getLoginUser();
            this.form.createBy = obj?.data?.name;
        },

Answer 1

引自免费微信小程序：皆我百晓生

在您提供的代码片段中，您尝试使用ant-design-vue的表单验证规则，但是似乎rule绑定没有正确引用到外部定义的rules数组。为了让表单验证规则生效，您需要确保在组件中正确地将rules赋值给ruleForm的rules属性。

问题在于这里：

<a-form-model inline class='form' ref="ruleForm" :model="form" :rules="rule" ...

此处:rules="rule"应该改为:rules="rules"以引用您之前导出的规则数组。

修正后的部分代码如下：

// 首先确保已导入rules
import { getForm, rules } from './your-file-path'; // 请替换为实际路径

export default {
  data() {
    return {
      form: {},
      rule: rules, // 将rules赋值给data对象中的rule属性
      dialogVisible: false,
      // ...其他数据和属性
    };
  },
  methods: {
    async init(...args) {
      // ...其它逻辑不变
      this.form = getForm();
      // ...其它逻辑不变
    },
  },
  components: {
    // ...你的组件
  },
};

然后在模板部分：

<a-form-model inline class='form' ref="ruleForm" :model="form" :rules="rule" ...

现在ruleForm会正确绑定到rules数组，从而实现Ant Design Vue的表单验证功能。请检查并确认导入路径是否正确，并且rules数组内的字段名与表单模型form的属性名相匹配（例如这里的ProjectCoding）。