elementUI 다 중 선택 상자 역 선택 구현 코드

최근 에 필요 한 것 이 있 습 니 다.추가 단 추 를 누 르 면 팝 업 창(창 표시 다 중 선택,페이지 넘 기기,검색 가능 목록)을 선택 하고 여러 가지 정 보 를 선택 하 십시오.확인 단 추 를 누 르 면 선택 한 정 보 를 페이지 에 표시 합 니 다.취 소 를 누 르 면 선택 한 정보 가 페이지 에 표시 되 지 않 습 니 다.페이지 에 있 는 정 보 를 선택 한 상태 로 다시 엽 니 다.
사고:처음에 element UI 홈 페이지 의 예 를 들 어 selection-change 를 사 용 했 지만 현재 변 화 된 선택 만 표시 하고 내 가 페이지 를 넘 기 고 검색 한 후에 데 이 터 를 선택 할 수 있 는 문 제 를 만족 시 킬 수 없 었 다.

toggleSelection(rows) {
    if (rows) {
     rows.forEach(row => {
      this.$refs.multipleTable.toggleRowSelection(row);
     });
    } else {
     this.$refs.multipleTable.clearSelection();
    }
   }

나중에 api 를 조회 한 결과 다른 2 개의 api 를 발 견 했 습 니 다.페이지 에 로 컬 필드 glht 가 존재 하고 목록 에 선택 한 로 컬 필드 yglht 가 존재 합 니 다.
페이지 에 표 시 된 데 이 터 를 계산 할 때마다 목록 의 몇 번 째 데이터 입 니 다.대상 을 직접 넣 으 면 제 가 선택 한 데 이 터 를 업로드 하 는 것 을 선택 하지 않 습 니 다.
emmm..................................................................
탄 상자:

<el-dialog class="contract_modal" title="  " :visible.sync="glht_modal" width="80%" :modal="false" @close="cancel">
 <el-form :inline="true" :model="searchData" label-width="90px">
  <el-form-item label="  ：">
   <el-input v-model.trim="searchData.mc_" size="small" class="contract_input"></el-input>
  </el-form-item>
  <span class="list_btns">
   <el-button type="primary" size="small" @click="listSearch(page, 1)" class="con_btn">  </el-button>
   <el-button size="small" @click="searchData = {}" class="con_btn">  </el-button>
  </span>
 </el-form>
 <div id="list_body" class="list-body" style="padding-left: 0;">
  <el-table :data="tableData" stripe border style="width: 100%" max-height="480" ref="multipleTable" @select-all="handleSelectionAll" @select="handleSelectionChange">
   <el-table-column type="selection" width="26" align="right"></el-table-column>
   <el-table-column type="index" width="50" label="  " align="left" header-align="left"></el-table-column>
   <el-table-column prop="mc_" label="  " width="180" show-overflow-tooltip align="left"></el-table-column>
   
  </el-table>
  <div class="list-pagination">
   <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
           :current-page.sync="page.page" :page-sizes="[10, 20, 50, 100]":page-size="page.pageCount"
           layout="total, sizes, prev, pager, next, jumper, ->"
           :total="page.total"></el-pagination>
  </div>
 </div>
 <div slot="footer" class="dialog-footer">
  <el-button type="primary" @click="save" size="small">  </el-button>
  <el-button @click="cancel" size="small">  </el-button>
 </div>
</el-dialog>

methods 에서 선택 할 때 와 선택 할 때 하 는 동작:

//      val   ，    ；    ，      
handleSelectionAll (val) {
 //           
 this.records = JSON.parse(localStorage.getItem('glht'))
 if(val.length !== 0) {  
  //  
  // this.records = Array.from(new Set(val.concat(this.records)))         ！    push 
  //               ，      
  this.tableData.forEach((v) => {
   if(this.records.find((e,index) => { return v.id_ === e.id_})){}else {
    //             push  
    this.records.push(v)
   }
  })
 } else {   
  //     ，                  
  this.tableData.forEach((v) => {
   this.records.forEach((e,index) => {
    if (e.id_ === v.id_) {
     this.records.splice(index, 1)
    }
   })
  })
 }
 //            
 localStorage.setItem('glht', JSON.stringify(this.records))
},
//    
handleSelectionChange(val, row) {
 //           
 this.records = JSON.parse(localStorage.getItem('glht'))
 if (this.records.length === 0) {
  //          
  this.records = [row]
 } else {
  if (this.records.filter(i => { return i.id_ === row.id_ }).length === 0) {
    //            (  )，      
   this.records.push(row)
  } else {
    //           (    )，     
   this.records.forEach((e,index) => {
    if (e.id_ === row.id_) {
     this.records.splice(index, 1)
    }
   })
  }
 }
 //            
 localStorage.setItem('glht', JSON.stringify(this.records))
},

methods 에서 팝 업 상자 목록 과 선택 한 데 이 터 를 가 져 옵 니 다:

listGet() {
  this.$axios.post("interface", {}, { params: searchData }).then(res => {
   if (res.data.success) {
    this.tableData = res.data.data.rows;
    this.page.total = res.data.data.total;
    this.records = JSON.parse(localStorage.getItem('yglht'))
    this.toggleSelection(JSON.parse(localStorage.getItem('yglht')));  //     
   } else {
    this.$message.error(res.data.message)
   }
  })
 .catch(err => console.log(err));
},
//     
toggleSelection(rows) {
 let arr =[]
 this.tableData.forEach((e, index) => {
  rows.forEach((i, ind) => {
   if (e.id_ === i.id_) {
     arr.push(this.tableData[index])
   }
  })
 })
 if (arr) {
  this.$nextTick(() => {
   arr.forEach(row => {
    this.$refs.multipleTable.toggleRowSelection(row);
   });
  })
 } else {
  this.$refs.multipleTable.clearSelection();
 }
},

methods 에서 단일 작업 을 저장 하고 취소 합 니 다.

save () {
 this.glht_modal = false
 localStorage.setItem('yglht', localStorage.getItem('glht'))
 this.yglht()
},
cancel () {
 this.glht_modal = false
 //            
 localStorage.setItem('glht', localStorage.getItem('yglht'))
 // this.toggleSelection(JSON.parse(localStorage.getItem('yglht')));        
 this.listGet({})  //          ，                           
 this.yglht()
},
yglht() {
  this.list = JSON.parse(localStorage.getItem('yglht'))
  //   this.list   、         
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.