vue2使用el-form动态参数展示并非空校验
需求：需要根据类型type动态显示某些参数，并且后端需要的参数也不同，比如type为1：后端要aa和bb参数，type为2：后端要cc和dd参数，前端显示的字段名也不一样，但是样式是不变的。
1.效果
2.主要代码讲解
因为vue的限制，所以需要使用this.$set让数组变为响应式，不然会导致输入框输入不了
handleChange(value) {let params = {1: [{label: '姓名',name: ''},{label: '年龄',age: ''}],2: [{label: '开始时间',start: ''},{label: '结束时间',end: ''}]};this.$set(this.formObj, 'paramsList', params[value]);},这句话的意思就是在对象中找到不是label的属性
v-model="formObj.paramsList[index][Object.keys(item).find((key) => key !== 'label')]"可以打印一下输出，结果是name
let aa = Object.keys({label: '姓名',name: ''}).find((key) => key !== 'label');console.log(aa);//name3.完整代码
<!--* @Description:* @Author: guoxiaxue* @Date: 2025-04-27 14:56:56* @FilePath: \vue-secondMenu-test-master\src\page\test4\zongti\01.Deepseek.vue
-->
<template><div style="margin-top: 40px"><el-select v-model="selectedOptions" clearable placeholder="请选择" @change="handleChange"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option></el-select><el-form :model="formObj" ref="addBaseRef" label-width="95px" class="demo-ruleForm add-point-form" style="margin: 40px 0px"><el-descriptions labelClassName="labelClassName" direction="vertical" :column="5" border style="width: 500px"><el-descriptions-item :label="item.label" v-for="(item, index) in formObj.paramsList" :key="item.label" :span="1"><el-form-item:prop="`paramsList[${index}].${Object.keys(item).find((key) => key !== 'label')}`":rules="[{required: true,message: '',trigger: 'blur',message: `请输入${item.label}`}]"label-width="0px"><el-inputstyle="width: 167px"size="small"v-model="formObj.paramsList[index][Object.keys(item).find((key) => key !== 'label')]":placeholder="`请输入${item.label}`"></el-input></el-form-item></el-descriptions-item></el-descriptions></el-form><el-button type="primary" @click="submitForm('addBaseRef')">立即创建</el-button></div>
</template><script>
export default {data() {return {formObj: {paramsList: []},selectedOptions: 1,options: [{value: 1,label: '参数1'},{value: 2,label: '参数2'}]};},mounted() {this.handleChange(this.selectedOptions);},methods: {handleChange(value) {let params = {1: [{label: '姓名',name: ''},{label: '年龄',age: ''}],2: [{label: '开始时间',start: ''},{label: '结束时间',end: ''}]};this.$set(this.formObj, 'paramsList', params[value]);},submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});}}
};
</script><style lang="scss" scoped></style>
文章到此结束希望对你有所帮助~