el-select 下拉框数据共享

第一次记录

需求：是第一组选完下拉框，第二组里面的下拉框就不能选，第二组选完下拉框，第三组里面的下拉框就不能选第一组和第二组的下拉内容，每组带一个删除按钮，删除完自己组的，数据是可以被其他组选择，以此类推

代码：

<template>

  <div>

    <div v-for="(items, indexs) in selectList" :key="indexs">

      <el-select

        v-model="items.one"

        placeholder="请选择"

        @change="aaa(items.one)"

      >

        <el-option

          v-for="(item, index) in cities"

          :key="index"

          :label="item.label"

          :disabled="item.disabled"

          :value="item.value"

        >

        </el-option>

      </el-select>

      <el-select

        v-model="items.two"

        placeholder="请选择"

        collapse-tags

        @remove-tag="qqq(items.two)"

        multiple

      >

        <el-option

          v-for="(item, index) in cities"

          :key="index"

          :label="item.label"

          :disabled="item.disabled"

          :value="item.value"

        >

          <span style="float: left">{{ item.label }}</span>

          <span

            style="float: right; color: #8492a6; font-size: 13px"

            @click="bbb(index)"

            >XXX</span

          >

        </el-option>

      </el-select>

      <el-button @click="ccc(indexs)">删除</el-button>

    </div>

    <el-button @click="ddd">添加</el-button

    ><el-button @click="eee">提交</el-button>

  </div>

</template>

<script>

export default {

  data() {

    return {

      cities: [{

        value: 'Beijing',

        label: '北京',

        disabled: false

      }, {

        value: 'Shanghai',

        label: '上海',

        disabled: false

      }, {

        value: 'Nanjing',

        label: '南京',

        disabled: false

      }, {

        value: 'Chengdu',

        label: '成都',

        disabled: false

      }, {

        value: 'Shenzhen',

        label: '深圳',

        disabled: false

      }, {

        value: 'Guangzhou',

        label: '广州',

        disabled: false

      }],

      selectList: [{

        one: '',

        two: ''

      },],

      aa: []

    }

  },

  mounted() {

  },

  methods: {

    aaa(val) {

      this.cities.forEach((it2) => {

        if (it2.value == val) {

          it2.disabled = true

        }

      })

    },

    bbb(index) {

      this.cities[index].disabled = false

    },

    ccc(index) {

      let aa = []

      let bb = this.selectList[index].one.split()

      Object.assign(aa, [...bb], [... this.selectList[index].two])

      this.cities.forEach((it2) => {

        if (aa.indexOf(it2.value) != -1) {

          it2.disabled = false

        }

      })

      this.selectList.splice(index, 1)

    },

    ddd() {

      this.selectList.push({

        one: '',

        two: ''

      })

    },

    eee() {

      console.log(this.selectList);

    },

    qqq() {

    },

  },

  watch: {

    selectList: {

      handler() {

        this.aa = []

        this.selectList.forEach((it) => {

          let bb = it.one.split()

          this.aa.push(...bb)

          this.aa.push(...it.two)

          this.cities.forEach((it2) => {

            if (this.aa.indexOf(it2.value) != -1) {

              it2.disabled = true

            } else {

              it2.disabled = false

            }

          })

        })

      },

      deep: true

    },

  },

}

</script>