el-select多个时，el-select筛选选中过的值，第二个el-select中过滤上一个选中的值

el-select多个时，el-select筛选选中过的值，第二个el-select中过滤上一个选中的值

代码

DOM 
<tepmlate>
l-dialog
      title="校对分配"
      :visible.sync="dialogFormVisible"
      width="350px"
      @close="close"
    >
      <div id="dialogBox">
        <el-form id="domData" ref="formData" :model="params" label-width="70px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="选择框1:">
                <el-select
                  id="jiaoDui0"
                  ref="myselect"
                  v-model="params.jiaodui0"
                  name="选择框1"
                  placeholder="请选择"
                  filterable
                  multiple
                  :disabled="isDisabled0"
                  @change="handleChange($event, 0)"
                >
                  <el-option
                    v-for="item in jiaoDuiRenList0"
                    :key="item.userNo"
                    :label="item.userName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择框2:">
                <el-select
                  id="jiaoDui2"
                  v-model="params.jiaodui1"
                  name="选择框2"
                  placeholder="请选择"
                  filterable
                  multiple
                  :disabled="isDisabled1"
                  @change="handleChange($event, 1)"
                >
                  <el-option
                    v-for="item in jiaoDuiRenList1"
                    :key="item.userNo"
                    :label="item.userName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择框3:">
                <el-select
                  id="jiaoDui3"
                  v-model="params.jiaodui2"
                  name="选择框3"
                  placeholder="请选择"
                  filterable
                  multiple
                  :disabled="isDisabled2"
                  @change="handleChange($event, 2)"
                >
                  <el-option
                    v-for="item in jiaoDuiRenList2"
                    :key="item.userNo"
                    :label="item.userName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择框4:">
                <el-select
                  id="jiaoDui4"
                  v-model="params.jiaodui3"
                  name="选择框4"
                  placeholder="请选择"
                  filterable
                  multiple
                  :disabled="isDisabled3"
                  @change="handleChange($event, 3)"
                >
                  <el-option
                    v-for="item in jiaoDuiRenList3"
                    :key="item.id"
                    :label="item.userName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择框5:">
                <el-select
                  id="jiaoDui5"
                  v-model="params.jiaodui4"
                  name="选择框5"
                  placeholder="请选择"
                  filterable
                  multiple
                  :disabled="isDisabled4"
                  @change="handleChange($event, 4)"
                >
                  <el-option
                    v-for="item in jiaoDuiRenList4"
                    :key="item.id"
                    :label="item.userName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="*选择框6:">
                <el-select
                  id="jiaoDui6"
                  v-model="params.jiaodui5"
                  name="选择框6"
                  placeholder="请选择"
                  filterable
                  multiple
                  :disabled="isDisabled5"
                  @change="handleChange($event, 5)"
                >
                  <el-option
                    v-for="item in jiaoDuiRenList5"
                    :key="item.id"
                    :label="item.userName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="footCenter">
          <el-button type="primary" @click="save">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </div>
    </el-dialog>
</tepmlate>

data和逻辑处理

<script>
  import {
    getJiaoDuiFP,
    jiaoDuiFPNextStep,
    getUsersByRoleName,
    saveJiaoDuiFPRY,
    getAgentUsers,
    daiBan,
    getJiaoDuiFPRY,
  } from '@/api/manage'
  import NextStep from '../../../components/NextStepDialog'
  export default {
    components: {
      NextStep,
    },
    data() {
      return {
        dialogFormVisible: false,
        list: [],
        imageList: [],
        listLoading: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        background: true,
        selectRows: '',
        elementLoadingText: '正在加载...',
        queryFormData: {},
        queryForm: {
          bookName: '',
          pageIndex: 1,
          pageSize: 10,
        },
        params: {
          jiaodui0: [],
          jiaodui1: [],
          jiaodui2: [],
          jiaodui3: [],
          jiaodui4: [],
          jiaodui5: [],
        },
        result: [],
        bookItemTypeList: [],
        jiaoDuiRenList: [[], [], [], [], [], []],
        jiaoDuiRenList0: [],
        jiaoDuiRenList1: [],
        jiaoDuiRenList2: [],
        jiaoDuiRenList3: [],
        jiaoDuiRenList4: [],
        jiaoDuiRenList5: [],
        prejiaodui0: [],
        prejiaodui1: [],
        prejiaodui2: [],
        prejiaodui3: [],
        prejiaodui4: [],
        prejiaodui5: [],
        isDisabled0: false,
        isDisabled1: false,
        isDisabled2: false,
        isDisabled3: false,
        isDisabled4: false,
        isDisabled5: false,
        alreadyUsedJiaoDuiRen: [],
        stepId: '',
        bookId: '',
        rulesDaiban: {
          toUserId: [
            { required: true, trigger: 'change', message: '代办人不能为空' },
          ],
        },
        dialogViews: false,
        daibanList: [],
        daibanObj: {
          bookId: '',
          stepId: '',
          fromUserId: '', //原来处理人ID
          fromUserName: '', //原来处理人姓名
          toUserId: '', //人ID
          toUserName: '', //人姓名
        },
      }
    },
    computed: {
      height() {
        return this.$baseTableHeight()
      },
    },
    created() {
      this.handleQuery()
    },
    methods: {
      //查询
      handleQuery() {
        this.queryForm.pageIndex = 1
        this.fetchData(this.queryForm)
      },
      //获取校对分配
      fetchData(val) {
        this.listLoading = true
        getJiaoDuiFP(val).then((res) => {
          this.list = []
          if (res.code == 200) {
            this.list = res.data.list
            this.total = res.data.total
            setTimeout(() => {
              this.listLoading = false
            }, 500)
          } else {
            setTimeout(() => {
              this.listLoading = false
            }, 500)
          }
        })
      },
      //获取校对角色下的用户
      getUsersByRoleName(row) {
        getUsersByRoleName({ roleName: '校对' }).then((val) => {
          if (val.code == 200) {
            this.bookItemTypeList = val.data
            console.log(111, val.data)
            this.$set(this.jiaoDuiRenList, 0, this.bookItemTypeList)
            this.$set(this.jiaoDuiRenList, 1, this.bookItemTypeList)
            this.$set(this.jiaoDuiRenList, 2, this.bookItemTypeList)
            this.$set(this.jiaoDuiRenList, 3, this.bookItemTypeList)
            this.$set(this.jiaoDuiRenList, 4, this.bookItemTypeList)
            this.$set(this.jiaoDuiRenList, 5, this.bookItemTypeList)
            this.getjiaoduiFPhuixian(row)
          }
        })
      },
      //获取代办人信息
      getAgentUsers() {
        getAgentUsers().then((res) => {
          if (res.code == 200) {
            this.daibanList = res.data
          }
        })
      },
      handleEdit(row) {
        this.getUsersByRoleName(row)
        this.stepId = row.stepId
        this.bookId = row.bookId
        this.dialogFormVisible = true
        this.result = []
        this.params = {}
      },
      //校对分配回显
      getjiaoduiFPhuixian(row) {
        getJiaoDuiFPRY({ bookId: row.bookId }).then((res) => {
          console.log(res)
          if (res.code == 200) {
            if (res.data.length != 0) {
              if (res.data[0]) {
                this.params.jiaodui0 = res.data[0].userIds
                this.prejiaodui0 = res.data[0].userIds
                this.isDisabled0 = res.data[0].complete
                this.handleChange(res.data[0].userIds, 0)
              }
              if (res.data[1]) {
                this.params.jiaodui1 = res.data[1].userIds
                this.prejiaodui1 = res.data[1].userIds
                this.isDisabled1 = res.data[1].complete
                this.handleChange(res.data[1].userIds, 1)
              }
              if (res.data[2]) {
                this.params.jiaodui2 = res.data[2].userIds
                this.prejiaodui2 = res.data[2].userIds
                this.isDisabled2 = res.data[2].complete
                this.handleChange(res.data[2].userIds, 2)
              }
              if (res.data[3]) {
                this.params.jiaodui3 = res.data[3].userIds
                this.prejiaodui3 = res.data[3].userIds
                this.isDisabled3 = res.data[3].complete
                this.handleChange(res.data[3].userIds, 3)
              }
              if (res.data[4]) {
                this.params.jiaodui4 = res.data[4].userIds
                this.prejiaodui4 = res.data[4].userIds
                this.isDisabled4 = res.data[4].complete
                this.handleChange(res.data[4].userIds, 4)
              }
              if (res.data[5]) {
                this.params.jiaodui5 = res.data[5].userIds
                this.prejiaodui5 = res.data[5].userIds
                this.isDisabled5 = res.data[5].complete
                this.handleChange(res.data[5].userIds, 5)
              }
            } else {
              this.jiaoDuiRenList0 = []
              this.jiaoDuiRenList1 = []
              this.jiaoDuiRenList2 = []
              this.jiaoDuiRenList3 = []
              this.jiaoDuiRenList4 = []
              this.jiaoDuiRenList5 = []
              console.log(2222, this.bookItemTypeList)
              this.bookItemTypeList.forEach((item) => {
                this.jiaoDuiRenList0.push(item)
                this.jiaoDuiRenList1.push(item)
                this.jiaoDuiRenList2.push(item)
                this.jiaoDuiRenList3.push(item)
                this.jiaoDuiRenList4.push(item)
                this.jiaoDuiRenList5.push(item)
              })
            }
          }
        })
      },

      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData(this.queryForm)
      },
      handleCurrentChange(val) {
        this.queryForm.pageIndex = val
        this.fetchData(this.queryForm)
      },
      //弹窗信息保存
      save() {
        let data = this.getElementDatas('domData')
        let details = []
        saveJiaoDuiFPRY({
          datas: data,
          stepId: this.stepId,
          bookId: this.bookId,
          jiaoDuiRY: this.result,
        }).then((res) => {
          if (res.code == 200) {
            this.$baseMessage('校对分配成功！', 'success')
            this.dialogFormVisible = false
          }
        })
      },
      //关闭弹窗
      close() {
        this.$refs['formData'].resetFields()
      },
      handleChange(val, i) {
        console.log(i, 'index', val)

        let departmentIds = [] //初始化数据
        let departmentNames = [] //初始化数据
        for (let i = 0; i <= val.length - 1; i++) {
          this.bookItemTypeList.find((item) => {
            //这里的options就是数据源
            if (item.id == val[i]) {
              departmentIds.push(item.id) //这里的value我改成了id
              departmentNames.push(item.userName) //这里的label我改成了roleName
            }
          })
        }
        this.result[i] = {}
        this.result[i].ID = departmentIds
        this.result[i].NAME = departmentNames

        //所有已选人员的ID
        this.alreadyUsedJiaoDuiRen = []
        this.result.forEach((element) => {
          let ids = element.ID
          for (let id of ids) {
            this.alreadyUsedJiaoDuiRen.push(id)
          }
        })
        //计算可以选择的人
        let alternativeJiaoDuiRen = []
        this.bookItemTypeList.forEach((element) => {
          let id = element.id
          if (this.alreadyUsedJiaoDuiRen.indexOf(id) > -1) {
          } else {
            alternativeJiaoDuiRen.push(element)
          }
        })
        //遍历，给每个选项赋可选的值
        for (let j = 0; j < 6; j++) {
          let tempAlternativeJiaoDuiRen = []
          for (let t of alternativeJiaoDuiRen) {
            tempAlternativeJiaoDuiRen.push(t)
          }
          if (j == 0) {
            let value = this.params.jiaodui0
            this.jiaoDuiRenList0 = []
            this.jiaoDuiRenList0 = tempAlternativeJiaoDuiRen
            if (value) {
              this.bookItemTypeList.forEach((element) => {
                let id = element.id
                if (value.indexOf(id) > -1) {
                  this.jiaoDuiRenList0.push(element)
                } else {
                }
              })
            }
            // console.log("校对1",this.jiaoDuiRenList0)
          } else if (j == 1) {
            let value = this.params.jiaodui1
            this.jiaoDuiRenList1 = []
            this.jiaoDuiRenList1 = tempAlternativeJiaoDuiRen
            if (value) {
              this.bookItemTypeList.forEach((element) => {
                let id = element.id
                if (value.indexOf(id) > -1) {
                  this.jiaoDuiRenList1.push(element)
                } else {
                }
              })
            }
            // console.log("校对2",this.jiaoDuiRenList1)
          } else if (j == 2) {
            let value = this.params.jiaodui2
            this.jiaoDuiRenList2 = []
            this.jiaoDuiRenList2 = tempAlternativeJiaoDuiRen
            if (value) {
              this.bookItemTypeList.forEach((element) => {
                let id = element.id
                if (value.indexOf(id) > -1) {
                  this.jiaoDuiRenList2.push(element)
                } else {
                }
              })
            }
          } else if (j == 3) {
            let value = this.params.jiaodui3
            this.jiaoDuiRenList3 = []
            this.jiaoDuiRenList3 = tempAlternativeJiaoDuiRen
            if (value) {
              this.bookItemTypeList.forEach((element) => {
                let id = element.id
                if (value.indexOf(id) > -1) {
                  this.jiaoDuiRenList3.push(element)
                } else {
                }
              })
            }
          } else if (j == 4) {
            let value = this.params.jiaodui4
            this.jiaoDuiRenList4 = []
            this.jiaoDuiRenList4 = tempAlternativeJiaoDuiRen
            if (value) {
              this.bookItemTypeList.forEach((element) => {
                let id = element.id
                if (value.indexOf(id) > -1) {
                  this.jiaoDuiRenList4.push(element)
                } else {
                }
              })
            }
          } else if (j == 5) {
            let value = this.params.jiaodui5
            this.jiaoDuiRenList5 = []
            this.jiaoDuiRenList5 = tempAlternativeJiaoDuiRen
            if (value) {
              this.bookItemTypeList.forEach((element) => {
                let id = element.id
                if (value.indexOf(id) > -1) {
                  this.jiaoDuiRenList5.push(element)
                } else {
                }
              })
            }
          }
        }
      },

      //代办函数
      daiBan(obj) {
        daiBan(obj).then((e) => {
          if (e.code == 200) {
            this.$notify({
              title: '',
              message: '代办成功',
              type: 'success',
            })
            this.dialogViews = false
            this.handleQuery()
          }
        })
      },
      //代办选择角色
      selectionRole(val) {
        let temp = this.daibanList.find(function (item) {
          if (item.id == val) {
            return item
          }
        })
        console.log(temp)
        this.daibanObj.toUserId = temp.id
        this.daibanObj.toUserName = temp.userName
      },
      //代办确定
      daibanConfrim() {
        console.log(this.daibanObj)
        this.$refs['daibanObj'].validate(async (valid) => {
          if (valid) {
            this.daiBan(this.daibanObj)
          }
        })
      },
      //代办
      daibanButton(row) {
        console.log(row)
        this.dialogViews = true
        this.getAgentUsers()
        this.daibanObj.fromUserId = row.stepUserId
        this.daibanObj.fromUserName = row.stepUserName
        this.daibanObj.bookId = row.bookId
        this.daibanObj.stepId = row.stepId
      },
      handleClose() {
        this.$refs['daibanObj'].resetFields()
      },
    },
  }
</script>```