526互联

动态表单如何校验？

发布时间 2023-12-19 11:08:24作者: yaokunlun

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

注：

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)),
    };
}