1. 程式人生 > >Element ui 中使用table組件實現分頁記憶選中

Element ui 中使用table組件實現分頁記憶選中

ids select microsoft 調用 tid 直接 ont LIDS 彈窗

我們再用vue和element-ui,或者其他的表格的時候,可能需要能記憶翻頁勾選,那麽實現以下幾個方法就ok了

首先定義個data值

data () {
   return {
      multipleSelectionAll: [],   // 所有選中的數據包含跨頁數據
   idKey: ‘personId‘
// 標識列表數據中每一行的唯一鍵的名稱(需要按自己的數據改一下)
}
}

方法中定義以下:

methods : {
// 設置選中的方法 setSelectRow() {
if
(!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) { return; } // 標識當前行的唯一鍵的名稱 let idKey = this.idKey; let selectAllIds = []; let that = this; this.multipleSelectionAll.forEach(row=>{ selectAllIds.push(row[idKey]); })
this.$refs.table.clearSelection(); for(var i = 0; i < this.tableData.length; i++) { if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
// 設置選中,記住table組件需要使用ref="table"
this.$refs.table.toggleRowSelection(this
.tableData[i], true); } } } , // 記憶選擇核心方法 changePageCoreRecordData () { // 標識當前行的唯一鍵的名稱 let idKey = this.idKey; let that = this; // 如果總記憶中還沒有選擇的數據,那麽就直接取當前頁選中的數據,不需要後面一系列計算 if (this.multipleSelectionAll.length <= 0) { this.multipleSelectionAll = this.multipleSelection; return; } // 總選擇裏面的key集合 let selectAllIds = []; this.multipleSelectionAll.forEach(row=>{ selectAllIds.push(row[idKey]); }) let selectIds = [] // 獲取當前頁選中的id this.multipleSelection.forEach(row=>{ selectIds.push(row[idKey]); // 如果總選擇裏面不包含當前頁選中的數據,那麽就加入到總選擇集合裏 if (selectAllIds.indexOf(row[idKey]) < 0) { that.multipleSelectionAll.push(row); } }) let noSelectIds = []; // 得到當前頁沒有選中的id this.tableData.forEach(row=>{ if (selectIds.indexOf(row[idKey]) < 0) { noSelectIds.push(row[idKey]); } }) noSelectIds.forEach(id=>{ if (selectAllIds.indexOf(id) >= 0) { for(let i = 0; i< that.multipleSelectionAll.length; i ++) { if (that.multipleSelectionAll[i][idKey] == id) { // 如果總選擇中有未被選中的,那麽就刪除這條 that.multipleSelectionAll.splice(i, 1); break; } } } }) }, currentChange(val){ // 改變頁的時候調用一次 this.changePageCoreRecordData(); ...... }, sizeChange(val){ // 改變每頁顯示條數的時候調用一次 this.changePageCoreRecordData(); ...... }, query () { // 分頁查詢數據方法,在成功返回數據方法裏調用setSelectRow方法,使每次分頁查詢都能勾選中 $.ajax({..., success:(res)=>{
...... setTimeout(()
=>{ this.setSelectRow(); }, 200) } }) } }

如果你的是自定義組件dialog彈窗裏面的表格選擇,如果想每次打開想選中,那麽就直接在props加一個值,然後加一個watch

props: [ "selectData"],
watch: {
    ‘selectData‘ (val) {
        this.multipleSelectionAll = val;
        }
    },

Element ui 中使用table組件實現分頁記憶選中