When there are multiple El select, the selected value is filtered by El select, and the last selected value is filtered by the second El select

el-select Many times ,el-select Filter selected values , the second el-select Filter the last selected value in

Code

DOM 
<tepmlate>
l-dialog
      title=" Proofreading assignment "
      :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=" Selection box 1:">
                <el-select
                  id="jiaoDui0"
                  ref="myselect"
                  v-model="params.jiaodui0"
                  name=" Selection box 1"
                  placeholder=" Please select "
                  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=" Selection box 2:">
                <el-select
                  id="jiaoDui2"
                  v-model="params.jiaodui1"
                  name=" Selection box 2"
                  placeholder=" Please select "
                  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=" Selection box 3:">
                <el-select
                  id="jiaoDui3"
                  v-model="params.jiaodui2"
                  name=" Selection box 3"
                  placeholder=" Please select "
                  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=" Selection box 4:">
                <el-select
                  id="jiaoDui4"
                  v-model="params.jiaodui3"
                  name=" Selection box 4"
                  placeholder=" Please select "
                  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=" Selection box 5:">
                <el-select
                  id="jiaoDui5"
                  v-model="params.jiaodui4"
                  name=" Selection box 5"
                  placeholder=" Please select "
                  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="* Selection box 6:">
                <el-select
                  id="jiaoDui6"
                  v-model="params.jiaodui5"
                  name=" Selection box 6"
                  placeholder=" Please select "
                  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"> indeed   set </el-button>
          <el-button @click="dialogFormVisible = false"> take   eliminate </el-button>
        </div>
      </div>
    </el-dialog>
</tepmlate>

data And logical processing

<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: ' Being loaded ...',
        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: ' The agent cannot be empty ' },
          ],
        },
        dialogViews: false,
        daibanList: [],
        daibanObj: {
          bookId: '',
          stepId: '',
          fromUserId: '', // The original handler ID
          fromUserName: '', // Name of the original handler 
          toUserId: '', // people ID
          toUserName: '', // Name of person 
        },
      }
    },
    computed: {
      height() {
        return this.$baseTableHeight()
      },
    },
    created() {
      this.handleQuery()
    },
    methods: {
      // Inquire about 
      handleQuery() {
        this.queryForm.pageIndex = 1
        this.fetchData(this.queryForm)
      },
      // Get proofing assignments 
      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)
          }
        })
      },
      // Get users under proofing role 
      getUsersByRoleName(row) {
        getUsersByRoleName({ roleName: ' proofreading ' }).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)
          }
        })
      },
      // Get agent information 
      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 = {}
      },
      // Proofread assignment echo 
      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 pop-up information 
      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(' Proofing assignment succeeded ！', 'success')
            this.dialogFormVisible = false
          }
        })
      },
      // Close the pop-up window 
      close() {
        this.$refs['formData'].resetFields()
      },
      handleChange(val, i) {
        console.log(i, 'index', val)

        let departmentIds = [] // Initialization data 
        let departmentNames = [] // Initialization data 
        for (let i = 0; i <= val.length - 1; i++) {
          this.bookItemTypeList.find((item) => {
            // there options It's the data source 
            if (item.id == val[i]) {
              departmentIds.push(item.id) // there value I changed it to id
              departmentNames.push(item.userName) // there label I changed it to roleName
            }
          })
        }
        this.result[i] = {}
        this.result[i].ID = departmentIds
        this.result[i].NAME = departmentNames

        // Of all selected people ID
        this.alreadyUsedJiaoDuiRen = []
        this.result.forEach((element) => {
          let ids = element.ID
          for (let id of ids) {
            this.alreadyUsedJiaoDuiRen.push(id)
          }
        })
        // Calculate who can choose 
        let alternativeJiaoDuiRen = []
        this.bookItemTypeList.forEach((element) => {
          let id = element.id
          if (this.alreadyUsedJiaoDuiRen.indexOf(id) > -1) {
          } else {
            alternativeJiaoDuiRen.push(element)
          }
        })
        // Traverse , Assign optional values to each option 
        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(" proofreading 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(" proofreading 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 {
                }
              })
            }
          }
        }
      },

      // Agent function 
      daiBan(obj) {
        daiBan(obj).then((e) => {
          if (e.code == 200) {
            this.$notify({
              title: '',
              message: ' The agency succeeded ',
              type: 'success',
            })
            this.dialogViews = false
            this.handleQuery()
          }
        })
      },
      // The agent selects the role 
      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
      },
      // Agency confirmation 
      daibanConfrim() {
        console.log(this.daibanObj)
        this.$refs['daibanObj'].validate(async (valid) => {
          if (valid) {
            this.daiBan(this.daibanObj)
          }
        })
      },
      // agency 
      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>```