vue选择下拉框动态变化表单

落日映苍穹つ 2022-10-05 05:49 204阅读 0赞

场景：一个表单，在选择某个下拉框时，动态添加选中该下拉框值对应的输入框或下拉框等。相当于有部分输入框或下拉框是动态变化的。

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
          <el-form-item label="名称" prop="name">
            <el-input v-model="ruleForm.name" maxLength="20" "></el-input>
          </el-form-item>
          <el-form-item label="方式" prop="type">
            <el-select v-model="ruleForm.type" placeholder="请选择方式" style="width:100%;" @change="changeType" >
              <el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.type"></el-option>
            </el-select>
          </el-form-item>
          <template v-for="(item, index) in Object.keys(ruleForm.info)">
            <el-form-item v-if="getNameByOptions(item)" :label="getNameByKey(item)" :prop="`info.${item}`" :key="index" :rules="{ required: true, message: `${getNameByKey(item)}不能为空`, trigger: 'change' }">
              <el-select v-model="ruleForm.info[item]" :placeholder="`请选择${getNameByKey(item)}`" style="width:100%;" >
                <el-option v-for="(ele, key) in getNameByOptions(item)" :key="key" :label="ele.label" :value="ele.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-else :label="getNameByKey(item)" :prop="`info.${item}`" :key="index" :rules="{ required: true, message: `${getNameByKey(item)}不能为空`, trigger: 'blur' }">
              <el-input v-model="ruleForm.info[item]" maxLength="20"></el-input>
            </el-form-item>
          </template>
        </el-form>

注意：如果要验证动态生成的表单，可以单独添加 `:rules="{ required: true, message:`KaTeX parse error: Expected 'EOF', got '\}' at position 46: …gger: 'change' \}̲"\`。\`prop\` 要写成对应…\{item\}`"` 才会生效。

使用 `Object.keys(ruleForm.info)` 来遍历是为了防止动态生成的表单不具有唯一性，即输入某一项值，其余输入框也会填入相同的值。

data() { 
        return { 
          ruleForm: { 
            type: '',
            name: '',
            remark: '',
            info: { }
          },
          rules: { 
            name: [
              {  required: true, message: '请输入名称', trigger: 'blur' }
            ]
          },
          curForm: [],
          typeList: [] // 数据源类型
        }
      },
      methods: { 
    	// 选择不同的接入方式，输出不同的输入框
        changeType(val) { 
          this.ruleForm.info = { }
          this.typeList.forEach(item => { 
            if (item.type === val) { 
              this.curForm = item.props
            }
          })
          this.curForm.forEach(item => { 
            this.$set(this.ruleForm.info, item.field, '')
          })
        },
         // 根据 key 获取 label
        getNameByKey (key) { 
          return this.curForm.find(item => item.field === key).label
        },
        // 根据 key 获取 options
        getNameByOptions (key) { 
          return this.curForm.find(item => item.field === key).options
        }
      }

数据格式不同的话，学会灵活变换