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

最新推荐文章于 2024-08-01 14:22:09 发布

前端开心果

最新推荐文章于 2024-08-01 14:22:09 发布

阅读量3.9k

点赞数 3

分类专栏： vue

本文链接：https://blog.csdn.net/qq_38157825/article/details/117654233

版权

vue 专栏收录该内容

116 篇文章 11 订阅

订阅专栏

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

    <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: \dotsgger: 'change' }̲"`。`prop` 要写成对应\dots$ {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
    }
  }