Element Ui 实现 Select选择器 新增或删除下拉选择框功能

需求描述： 点击按钮新增一个 Select 选择器 ，在每个新增的选择器下拉框后面都有删除按钮，并且最后一个下拉框后还有新增按钮。

<div>
  <div style="margin-bottom: 8px">选择区域</div>
  <el-button v-if="!buildings.length" type="link" @click="handleAdd">
    新增区域
  </el-button>
  <el-form-item v-for="(building, index) in buildings" :key="index">
    <div class="form-item-inner">
      <el-select v-model="building.regionCode" placeholder="请选择">
        <el-option
          v-for="item in buildingList"
          :key="item.regionCode"
          :label="item.regionPathName"
          :value="item.regionCode"
        />
      </el-select>
      <div class="btns">
        <el-button v-if="showAdd(index)" type="link" @click="handleAdd">新增</el-button>
        <el-button type="link" @click="handleDel(building)">删除</el-button>
      </div>
    </div>
  </el-form-item>
</div>

获取最后一个下拉框，以添加新增按钮 

computed: {
  showAdd() {
    return function (index) {
      return index + 1 === this.buildings.length
    }
  },
},

buildings[ ]是一个对象数组，每个Select选择器下拉框相当于是其中的一个对象，对象中可以存储序号、选中id等等，我这里点击保存或是保存后进入页面回显内容都只需要regionCode

handleAdd() {
  this.buildings.push({
     regionCode: '',
  })
},

 

点击删除按钮，从点击事件中传过来building参数，通过findIndex方法拿到building当前下标，通过splice方法删除当前下标所在数据

handleDel(building) {
  const index = this.buildings.findIndex(el => el === building)
  this.buildings.splice(index, 1)
},

点击保存按钮，判断是否有下拉选择框没选择。然后只需要传入所选择的区域id

handleSubmit() {
  const hasNoSelectBuild = this.buildings.filter(item => !item.regionCode).length !== 0
  if (hasNoSelectBuild) {
    this.$message.warning('请选择区域!')
    return
  }
  const regionRangeList = this.buildings.map(({ regionCode }) => regionCode)
  const params = {
    regionRangeList,
    ....
  }
  submitInfo(params).then(res => {
    ...
  })
},

 

点击保存按钮以后，需要将设置参数保存下来（数组形式），再次进入页面时获取（数组对象形式）以回显。如果接口参数格式相同就不用转换。

fetchDetail() {
  getDetail({ type: this.activeSidebar }).then(res => {
    const { code, data } = res
    if (Number(code) === 0) {
      const { regionRangeList, ... } = data || {}
      this.buildings = regionRangeList
        ? regionRangeList.map(item => {
            return { regionCode: item }
          })
        : []
    }
  })
},