Element UI 表格點(diǎn)擊選中行/取消選中 快捷多選 以及快捷連續(xù)多選,高亮選中行

ElementUI table自帶的有一個(gè)highlight-current-row的屬性,但是只能單選。所以要實(shí)現(xiàn)點(diǎn)擊行選中以及多選得自己實(shí)現(xiàn).
目標(biāo):?jiǎn)螕暨x中/取消, 按ctrl鍵點(diǎn)擊實(shí)現(xiàn)多選 ,按shift/alt鍵實(shí)現(xiàn)連續(xù)多選。

實(shí)現(xiàn)效果

GIF.gif

1. 監(jiān)聽(tīng)row-click事件,實(shí)現(xiàn)選中

 <el-table ref="multipleTable" 
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            @row-click="rowClick" 
            :row-style="rowStyle"
            :row-class-name="rowClassName">
            .....
            .....
</el-table>
rowClick(row, column, event) {

   let refsElTable = this.$refs.multipleTable; // 獲取表格對(duì)象
   refsElTable.toggleRowSelection(row); // 調(diào)用選中行方法
}

2. 實(shí)現(xiàn)選中取消,以及單個(gè)選中

上面已經(jīng)實(shí)現(xiàn)點(diǎn)擊選中,但是會(huì)點(diǎn)擊一行選中一行,所以要使用clearSelection先清空之前選擇的行,然后進(jìn)行選擇,取消選擇首先要確定當(dāng)前點(diǎn)擊的行是否被已被選中,所以先監(jiān)聽(tīng)selection-change事件保存已選中行(或者使用$refs獲取內(nèi)部保存的已選擇行),以及使用row-style給每一行添加唯一標(biāo)識(shí)。

rowClick(row, column, event) {
       let refsElTable = this.$refs.multipleTable; // 獲取表格對(duì)象
       let findRow = this.selectionRow.find(c => c.rowIndex == row.rowIndex);
       if (findRow ) {
           refsElTable.toggleRowSelection(row, false);
            return;
       }
       refsElTable.clearSelection();
       refsElTable.toggleRowSelection(row); // 調(diào)用選中行方法
},

rowStyle({row,rowIndex}) {
         Object.defineProperty(row, 'rowIndex', { //給每一行添加不可枚舉屬性rowIndex來(lái)標(biāo)識(shí)當(dāng)前行
         value: rowIndex, 
         writable: true,
         enumerable: false
       })
 },

handleSelectionChange(rows) {
      this.selectionRow = rows //保存已選擇行
  },

3. 按住ctrl實(shí)現(xiàn)多選

首先要監(jiān)聽(tīng)keydown事件,以及keyup事件,

methods: {
    rowClick(row, column, event) {
       let refsElTable = this.$refs.multipleTable; // 獲取表格對(duì)象
         if (this.CtrlDown) {
              refsElTable.toggleRowSelection(row); // ctrl多選 如果點(diǎn)擊兩次同樣會(huì)取消選中
              return;
       }
       let findRow = this.selectionRow.find(c => c.rowIndex == row.rowIndex);
       if (findRow ) {
           refsElTable.toggleRowSelection(row, false);
            return;
       }

       refsElTable.clearSelection();
       refsElTable.toggleRowSelection(row); // 調(diào)用選中行方法
    },


    keyDown(event) {
                let key = event.keyCode;
                if (key == 17) this.CtrlDown = true;
            },


    keyUp(event) {
                let key = event.keyCode;
                if (key == 17) this.CtrlDown = false;
        },
},
mounted() {
    addEventListener("keydown", this.keyDown, false);
    addEventListener("keyup", this.keyUp, false);
 },
beforeDestroy() { //解綁
    removeEventListener("keydown", this.keyDown);
    removeEventListener("keyup", this.keyUp);
}

4. shift/alt鍵實(shí)現(xiàn)連續(xù)多選

這一步要通過(guò)rowIndex判斷已選擇的行中最上面和最下面的是哪行,再對(duì)比按住shift/alt點(diǎn)擊的當(dāng)前行得到新的最上面和最下面的行,把這兩行中間的行進(jìn)行循環(huán)選中。

computed: { //實(shí)時(shí)得到最上行和最下行
    bottomSelectionRow() {
          if (this.selectionRow.length == 0) return null;
            return this.selectionRow.reduce((start, end) => {
                  return start.rowIndex > end.rowIndex ? start : end;
              });
        },
    topSelectionRow() {
           if (this.selectionRow.length == 0) return null;
              return this.selectionRow.reduce((start, end) => {
                  return start.rowIndex < end.rowIndex ? start : end;
              });
          }
   },

methods: {
   rowClick(row, column, event) {
       let refsElTable = this.$refs.multipleTable; // 獲取表格對(duì)象
         if (this.CtrlDown) {
              refsElTable.toggleRowSelection(row); // ctrl多選 如果點(diǎn)擊兩次同樣會(huì)取消選中
              return;
         }
       
       if ( this.shiftOrAltDown && this.selectionRow.length > 0) { 
                    let topAndBottom = getTopAndBottom(  row, this.bottomSelectionRow, this.topSelectionRow );
                    refsElTable.clearSelection(); //先清空 不然會(huì)導(dǎo)致在這兩行中間之外的行狀態(tài)不變
                    for (let index = topAndBottom.top; index <= topAndBottom.bottom; index++) { //選中兩行之間的所有行
                        refsElTable.toggleRowSelection(this.tableData[index], true);
                    }
         } else {
              let findRow = this.selectionRow.find(c => c.rowIndex == row.rowIndex); //找出當(dāng)前選中行
               //如果只有一行且點(diǎn)擊的也是這一行則取消選擇 否則清空再選中當(dāng)前點(diǎn)擊行
               if (findRow&& this.selectionRow.length === 1 ) { 
                  refsElTable.toggleRowSelection(row, false);
                  return;
                 }
                 refsElTable.clearSelection();
                 refsElTable.toggleRowSelection(row); 
        }
    },

    rowStyle({row,rowIndex}) {
         Object.defineProperty(row, 'rowIndex', { //給每一行添加不可枚舉屬性rowIndex來(lái)標(biāo)識(shí)當(dāng)前行
         value: rowIndex, 
         writable: true,
         enumerable: false
       })
   },

    keyDown(event) {
                let key = event.keyCode;
                if (key == 17) this.CtrlDown = true;
                if (key == 16 || key == 18) this.shiftOrAltDown = true;
            },


    keyUp(event) {
                let key = event.keyCode;
                if (key == 17) this.CtrlDown = false;
                if (key == 16 || key == 18) this.shiftOrAltDown = false;
        },
},

mounted() {
    addEventListener("keydown", this.keyDown, false);
    addEventListener("keyup", this.keyUp, false);
 },

beforeDestroy() { //解綁
    removeEventListener("keydown", this.keyDown);
    removeEventListener("keyup", this.keyUp);
}

/**獲取最新最上最下行 */
function getTopAndBottom(row, bottom, top) {
        let n = row.rowIndex,
            mx = bottom.rowIndex,
            mi = top.rowIndex;
        if (n > mx) {
            return {
                top: mi,
                bottom: n
            };
        } else if (n < mx && n > mi) {
            return {
                top: mi,
                bottom: n
            };
        } else if (n < mi) {
            return {
                top: n,
                bottom: mx
            };
        } else if (n == mi || n == mx) {
            return {
                top: mi,
                bottom: mx
            };
        }
    };

5. 實(shí)現(xiàn)選中高亮

element-ui本身的單選高亮實(shí)現(xiàn)方式一樣,都是給選中行加上current-row這個(gè)class類(lèi),所以要使用row-class-name這個(gè)屬性(其實(shí)給每一行添加rowIndex也可以用這個(gè)屬性),判斷方式也是通過(guò)判斷rowIndex對(duì)比

rowClassName({ row,  rowIndex }) {
          let rowName = "",
          findRow = this.selectionRow.find(c => c.rowIndex === row.rowIndex);
         if (findRow) {
           rowName = "current-row "; // elementUI 默認(rèn)高亮行的class類(lèi) 不用再樣式了^-^,也可通過(guò)css覆蓋改變背景顏色
      }
    return rowName; //也可以再加上其他類(lèi)名 如果有需求的話
 },

Demo及代碼

https://codepen.io/lozvoe/pen/jgeKME

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 返回上次光標(biāo)的位置Ctrl+Alt+ left/right 返回至上次瀏覽的位置 Alt+回車(chē) 導(dǎo)入包,自動(dòng)修正C...
    請(qǐng)叫我四爺閱讀 1,969評(píng)論 1 2
  • Eclipse常用快捷鍵 1幾個(gè)最重要的快捷鍵 代碼助手:Ctrl+Space(簡(jiǎn)體中文操作系統(tǒng)是Alt+/)快速...
    山不轉(zhuǎn)人自轉(zhuǎn)閱讀 1,479評(píng)論 0 10
  • PHPStorm 下載及主題樣式下載 http://www.lanmps.com/html/tools.html風(fēng)...
    手表大大閱讀 2,684評(píng)論 0 1
  • 1.輸入psv就會(huì)看到一個(gè)psvm的提示,此時(shí)點(diǎn)擊tab鍵一個(gè)main方法就寫(xiě)好了。psvm 也就是public ...
    兜兜又喊阿兵哥閱讀 1,147評(píng)論 0 0
  • 珠珠是一只純種的金巴狗,渾身毛色雪白,耷拉著耳朵,眼睛很大,黑眼珠轉(zhuǎn)來(lái)轉(zhuǎn)去透著靈氣,咧著大嘴看起來(lái)憨態(tài)可...
    螢火蟲(chóng)之夜閱讀 469評(píng)論 0 3