iview实现table默认勾选,搜索勾选。

<Modal
      v-model="zsdepartmentModal"
      title="选择部门"
      :mask-closable="false"
      width="1200"
      @on-cancel="zsdepartmentModalCancel"
    >
      <div class="department-modal">
        <div class="top-style">
          <Select v-model="districtValue" @on-change="districtSelect"  style="width:120px">
            <Option v-for="item in districtMap" :value="item.value" :key="item.value">{{ item.district_name }}</Option>
          </Select>
          <Input class="left-style" @on-search="searchDistrict" v-model="districtName" search placeholder="请输入要查找部门的关键字" style="width: 300px" />
          <Button class="left-style" @click="zsdepartmentModalSubmit" type="primary">确认选择</Button>
        </div>
        <div class="top-style">
          <Table border ref="selection" highlight-row :columns="departmentHands" :data="mainSendDepart1" @on-current-change="zsdepartSelect"></Table>
        </div>
      </div>
      <div slot="footer"> 
      </div>
    </Modal>
    openCcdepartSelect(value){
        this.changeModel = value
        this.mainSendDepart = this.mainSendDepart.map((x)=>{
          x._checked = false
          return x
        })
        this.mainSendDepart2 = this.mainSendDepart.map((x)=>{
          if(value == 0){
            for(var i = 0;i<this.submitData.maindeliverydepartment.length;i++){
              
              if(x.id == this.submitData.maindeliverydepartment[i]){
                x._checked = true
              }
            }
          }else if(value == 1){
            for(var i = 0;i<this.submitData.ccdepartment.length;i++){
              
              if(x.id == this.submitData.ccdepartment[i]){
                x._checked = true
              }
            }
          }
          return x
        })
        this.mainSendDepart1 = this.mainSendDepart2
      this.ccdepartmentModal = true
    },
    //选择部门
    ccdepartSelect(selection) {
      if(selection.length == 0){
        this.mainSendDepart2 = this.mainSendDepart.map((x)=>{
          for (var i = 0;i < this.oldSelection.length;i++){
            if(x.id == this.oldSelection[i].id){
              x._checked = false
            }
          }
          return x
        })
        this.oldSelection.push(...selection)
      }else{
      let newMapValue = this.mainSendDepart1.filter((x)=>{
        for(var i = 0 ;i<this.oldSelection.length;i++){
          if(this.oldSelection[i].id == x.id){
            return x
          }
        }
      })
      for(var e = 0;e<newMapValue.length;e++){
        let s = 0
        for(var i = 0;i<selection.length;i++){
          if(newMapValue.id == selection[i].id){
            s = -1
          }
        }
        if(s == 0){
          for(var j = 0;j<this.oldSelection.length;j++){
            for(var k =0 ;k<newMapValue.length;k++)
            if(this.oldSelection[j].id == newMapValue[k].id){
              this.oldSelection.splice(j,1)
            }
          }
        }
      }
      for(var n = 0;n<this.oldSelection.length;n++){
        for(var m = 0;m<selection.length;m++){
          if(this.oldSelection[n].id == selection[m].id){
            this.oldSelection.splice(n,1)
          }
        }
      }
      this.oldSelection.push(...selection)
      this.mainSendDepart2 = this.mainSendDepart.map((x)=>{
        let y = 0;
        for (var i = 0;i < this.oldSelection.length;i++){
          if(x.id == this.oldSelection[i].id){
            x._checked = true
            y = -1
          }
          if(y == 0){
            x._checked = false
          }
        }
        return x
      })
      }
    },
    //查找部门关键字
    searchDistrict(value){
      this.mainSendDepart1 = []
      if(this.districtValue == 0){
        this.mainSendDepart1 = this.mainSendDepart2.filter((x)=>{
          if(this.districtName){
            return x.depart_name.indexOf(value) !== -1
          }
          else
            return x
        })
      }else{
        this.mainSendDepart1 = this.mainSendDepart2.filter((x)=>{
          if(value){
            return x.district_name === this.districtMap[this.districtValue].district_name && x.depart_name.indexOf(value) !== -1
          }
          else
            return x.depart_name.indexOf(this.districtName) !== -1
        })
      }
    },
    //选择校区
    districtSelect(value){
      this.districtValue = value
      this.mainSendDepart1 = []
      if(value == 0){
        this.mainSendDepart1 = this.mainSendDepart2.filter((x)=>{
          if(this.districtName){
            // console.log(x.depart_name.indexOf(this.districtName))
            return x.depart_name.indexOf(this.districtName) !== -1
          }
            else
              // console.log(x.depart_name.indexOf(this.districtName))
              return x
        })
      }else{
        this.mainSendDepart1 = this.mainSendDepart2.filter((x)=>{
          // if(x.district_name.indexOf(this.districtMap[value].district_name))
            if(this.districtName){
              // console.log(this.districtName)
              return x.district_name === this.districtMap[value].district_name && x.depart_name.indexOf(this.districtName) !== -1
            }
            else
              // console.log(this.districtName)
              return x.district_name === this.districtMap[value].district_name
        })
      }
    },
     //确定选择部门
    ccdepartmentModalSubmit(){
      let s = this.mainSendDepart2.filter((x)=>{
        return x._checked == true
      })
        this.opCcdepartment.ccdepartmentName = ""
        this.submitData.ccdepartment = ""
        this.submitData.ccdepartment = s.map((x)=>{
          return x.id
        })
        let y = s.map(res=>{return res.depart_name})
        this.opCcdepartment.ccdepartmentName = y.join(",")
        // for(var i=0;i<s.length;i++){
        //   this.opCcdepartment.ccdepartmentName += s[i].depart_name + " "
        // }
      // }
      this.districtName = ""
      this.ccdepartmentModal = false
    },
    //关闭选择部门弹窗
    ccdepartmentModalCancel () {
      this.districtName = ""
      this.districtValue=0
      this.mainSendDepart = this.mainSendDepart.map((x)=>{
        x._checked = false
        return x
      })
      this.mainSendDepart1 = this.mainSendDepart
      this.mainSendDepart2 = this.mainSendDepart
      this.ccdepartmentModal = false
    }
posted @ 2022-06-08 16:32  Chaplink  阅读(672)  评论(0编辑  收藏  举报