动态表单配置select

1、通过el-form-item v-for=“(formName, index) in dynamicForm.formNames”
遍历多个动态表单，

        <el-form-item
          v-for="(formName, index) in dynamicForm.formNames"
          :key="formName.key"
          :lable="'域名' + (index + 1)"
          :prop="'formNames.' + index + '.value'"
          :rules="{
    
            required: true,
            message: '不能为空,请选择',
            trigger: 'blur',
          }"
        >
          <el-select v-model="formName.value" placeholder="请选择">
            <el-option
              v-for="item in filterOptions[index]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button @click.prevent="removeForm(formName)">删除表单</el-button>
        </el-form-item>

数据项：

      // 动态表单
      dynamicForm: {
    
        formNames: [
          {
    
            value: ''
          }
        ],
        email: ''
      },

默认的下拉框属性值：

      // 原始options是不能更改的
      options: [
        {
    
          value: 1,
          label: '臭豆腐'
        },
        {
    
          value: 2,
          label: '榴莲'
        },
        {
    
          value: 3,
          label: '炸鸡'
        },
        {
    
          value: 4,
          label: '蛋挞'
        },
        {
    
          value: 5,
          label: '披萨'
        },
      ]

遍历的option是用计算属性
el-option v-for=“item in filterOptions[index]”

  computed: {
    
    // filterOptions所依赖的数据是formNames，添加表单时会更改，当选择下拉值时value更改也会重新计算
    filterOptions () {
    
      // itemOptions : [ [options1],[options2],[options3],[options4],[options5]]
      const itemOptions = this.dynamicForm.formNames.map((item, index) => {
    
        // checkIds已经被选中的。比如第一个表单选中了臭豆腐,value就是1，遍历到第二个表单时就要考虑第一个表单已经选中的。
        // 当item是第二个表单时，再遍历formNames，val再从新开始,因为第一个被选了，所以val.value 不为空，且被选的val.value不等于当前item的value
        // 也就是自己的item.value要留下来，filter进行选择的已选中不包含自己
        const checkIds = this.dynamicForm.formNames.filter(val => val.value !== '' && val.value !== item.value).map(v => v.value)
        console.log('checkIds是', checkIds)
        // list 就是当前item可以进行选择的 把已经选择的去掉
        const list = this.options.filter(val => !checkIds.includes(val.value))
        return list
      })
      return itemOptions
    }
  }

添加表单：

        <el-form-item>
          <el-button type="primary" @click="submitForm(dynamicForm)"
            >提交</el-button
          >
          <el-button @click="addForm">新增表单</el-button>
        </el-form-item>

实现添加表单

    addForm () {
    
      if (this.dynamicForm.formNames.length === 5) {
    
        this.$message({
    
          message: '最多添加5个表单',
          type: 'warning'
        })
        return
      }
      this.dynamicForm.formNames.push({
    
        value: '',
        key: Date.now()
      })
    }

实现删除表单：

    removeForm (item) {
    
      if (this.dynamicForm.formNames.length === 1) {
    
        this.$message({
    
          message: '最少1个表单',
          type: 'warning'
        })
        return
      }
      var index = this.dynamicForm.formNames.indexOf(item)
      if (index !== -1) {
    
        this.dynamicForm.formNames.splice(index, 1)
      }
    },

随意的提交

    submitForm (formNames) {
    
      this.$refs.dynamicFormRef.validate(valid => {
    
        if (valid) {
    
          alert('提交啦')
        } else {
    
          return false
        }
      })
    },

全部代码：

<template>
  <div id="app">
    <div class="box">
      <el-form :model="dynamicForm" ref="dynamicFormRef" label-width="80px">
        <el-form-item
          v-for="(formName, index) in dynamicForm.formNames"
          :key="formName.key"
          :lable="'域名' + (index + 1)"
          :prop="'formNames.' + index + '.value'"
          :rules="{
    
            required: true,
            message: '不能为空,请选择',
            trigger: 'blur',
          }"
        >
          <el-select v-model="formName.value" placeholder="请选择">
            <el-option
              v-for="item in filterOptions[index]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button @click.prevent="removeForm(formName)">删除表单</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(dynamicForm)"
            >提交</el-button
          >
          <el-button @click="addForm">新增表单</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
    
  data () {
    
    return {
    
      // 动态表单
      dynamicForm: {
    
        formNames: [
          {
    
            value: ''
          }
        ],
        email: ''
      },
      // 原始options是不能更改的
      options: [
        {
    
          value: 1,
          label: '臭豆腐'
        },
        {
    
          value: 2,
          label: '榴莲'
        },
        {
    
          value: 3,
          label: '炸鸡'
        },
        {
    
          value: 4,
          label: '蛋挞'
        },
        {
    
          value: 5,
          label: '披萨'
        },
      ]
    }
  },
  methods: {
    
    submitForm (formNames) {
    
      this.$refs.dynamicFormRef.validate(valid => {
    
        if (valid) {
    
          alert('提交啦')
        } else {
    
          return false
        }
      })
    },
    removeForm (item) {
    
      if (this.dynamicForm.formNames.length === 1) {
    
        this.$message({
    
          message: '最少1个表单',
          type: 'warning'
        })
        return
      }
      var index = this.dynamicForm.formNames.indexOf(item)
      if (index !== -1) {
    
        this.dynamicForm.formNames.splice(index, 1)
      }
    },
    addForm () {
    
      if (this.dynamicForm.formNames.length === 5) {
    
        this.$message({
    
          message: '最多添加5个表单',
          type: 'warning'
        })
        return
      }
      this.dynamicForm.formNames.push({
    
        value: '',
        key: Date.now()
      })
    }
  },
  computed: {
    
    // filterOptions所依赖的数据是formNames，添加表单时会更改，当选择下拉值时value更改也会重新计算
    filterOptions () {
    
      // itemOptions : [ [options1],[options2],[options3],[options4],[options5]]
      const itemOptions = this.dynamicForm.formNames.map((item, index) => {
    
        // checkIds已经被选中的。比如第一个表单选中了臭豆腐,value就是1，遍历到第二个表单时就要考虑第一个表单已经选中的。
        // 当item是第二个表单时，再遍历formNames，val再从新开始,因为第一个被选了，所以val.value 不为空，且被选的val.value不等于当前item的value
        // 也就是自己的item.value要留下来，filter进行选择的已选中不包含自己
        const checkIds = this.dynamicForm.formNames.filter(val => val.value !== '' && val.value !== item.value).map(v => v.value)
        console.log('checkIds是', checkIds)
        // list 就是当前item可以进行选择的 把已经选择的去掉
        const list = this.options.filter(val => !checkIds.includes(val.value))
        return list
      })
      return itemOptions
    }
  }
}
</script>
<style>
#app {
    
  font-family: Helvetica, sans-serif;
  text-align: center;
}
.box {
    
  width: 800px;
  height: auto;
  margin: 0 auto;
}
</style>