动态表单如何校验?
记录一下,直接上代码,核心代码就一行。
注:
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)),
};
}