Vue动态下拉框的去重

297 阅读1分钟

template:

<div v-for="(item, mayindex) in formData.messagePhoneArr" :key="item.name" class="group-row">
  <el-select v-model="item.name" placeholder="请选择" @change="selectName($event, mayindex, 2)">
    <el-option v-for="value in optionsArr" :key="value.id" :label="value.name" :value="value.id">
    </el-option>
  </el-select>
</div>

script:

computed: {
  // 选组中的项目
  optionsArr() {
    const arrData = this.formData.messageNeiArr.reduce((originArr, item) => {
      return originArr.filter(element => {
        return element.name !== item.name
      })
    }, this.originOptions)
    return arrData
  },
},
data() {
  return {
    formData: {
      messageNeiArr: [],
      messagePhoneArr: [],
    },
    originOptions: [],//配置列表自行模拟数据
  }
},
method:{
      // 选择等级
    selectName(value, index, type) {
      const { id, name } = this.originOptions.find(
        item => item.id === value
      )
      switch (type) {
        case 1:
          {
            this.formData.messageNeiArr[index].linkageNotificationProgramId = id
            this.formData.messageNeiArr[index].name = name
            this.formData.messageNeiArr[index].deviceId = this.rowData.deviceId
            this.formData.messageNeiArr[index].deleteStatus = 0
            break
          }
        case 2: //短信
          {
            this.formData.messagePhoneArr[index].linkageNotificationProgramId = id
            this.formData.messagePhoneArr[index].name = name
            this.formData.messagePhoneArr[index].deviceId = this.rowData.deviceId
            this.formData.messagePhoneArr[index].deleteStatus = 0
            this.formData.messagePhoneArr[index].sendUser = 1
            break
          }
        default:
          break
      }
    },
}