动态表单如何校验?

记录一下,直接上代码,核心代码就一行。

注:

prop需要定位到表单项的值,如下定义为[${index}].value,即校验canConfigList[${index}].value的值

        <el-form :inline="true" ref="addChannelRef" :model="canConfigList" label-width="110px">
            <el-form-item
                :prop="`[${index}].value`"
                :rules="rules[config.prop]"
                v-for="(config, index) in canConfigList"
                :label="config.label"
            >
                <el-select
                    v-if="config.type === 'select'"
                    @change="handleSelectChange"
                    v-model="config.value"
                    :disabled="config.isDisabled"
                    :placeholder="config.label"
                    :clearable="config.clearable"
                >
                    <el-option
                        v-for="option in config.options"
                        :label="option.label"
                        :value="option.value"
                    />
                </el-select>
                <el-input
                    v-else
                    v-model="config.value"
                    :placeholder="config.label"
                    :clearable="config.clearable"
                />
            </el-form-item>
        </el-form>
const canConfigList = [
    {
        label: "通道类型",
        prop: "type",
        value: 1,
        type: "select",
        clearable: false,
        options: deviceList,
        isShowType: [1, 2, 3],
        required: true
    },
    {
        label: "串口号",
        prop: "serial_port",
        value: "",
        type: "select",
        clearable: true,
        options: [],
        isShowType: [2],
        required: true
    },
    {
        label: "波特率",
        prop: "baudrate",
        value: "9600",
        type: "select",
        clearable: true,
        options: baudrateList,
        isShowType: [2],
        required: true
    }
];
data() {
return {
    canConfigList,
      rules: {
     serial_port: [
          {
required: true,
message: this.$t("请选择串口号"),
trigger: "change",
},
],
can_baudrate: [
{
required: true,
message: this.$t("请选择波特率"),
trigger: "change",
},
]
},
portList: [],
canConfigList: JSON.parse(JSON.stringify(canConfigList)),
};
}
 

 

posted @ 2023-12-19 11:07  yaokunlun  阅读(46)  评论(0编辑  收藏  举报