VUE+elementUI表格多選框實現單選以及數據回顯時toggleRowSelection失效問題；$nextTick不生效？

一、多選框單選

<el-table
        :data="items"
        ref="multipleTable"
        @select-all="onSelectAll"
        @selection-change="selectItem"
        @row-click="onSelectOp"
      >
        <el-table-column type="selection" :reserve-selection="false" />

@select-all="onSelectAll" 全選是觸發的事件

@selection-change="selectItem" 單個去勾選時觸發的事件(勾選有變化時觸發)

@row-click="onSelectOp" 點擊那一行數據觸發的事件

ref="multipleTable"

ref 被用來給DOM元素或子組件注冊引用信息。引用信息會根據父組件的 $refs 對象進行注冊。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子組件上，引用信息就是組件實

注意：只要想要在Vue中直接操作DOM元素，就必須用ref屬性進行注冊

1、@select-all="onSelectAll"

全選是觸發自定義的onSelectAll() 函數，把所有選項清空，

this.$refs.multipleTable.clearSelection();

clearSelection()這個函數是自帶的，比如日期的getFullYear()

2、@selection-change="selectItem"

單個去勾選時觸發自定義的selectItem函數

@selection-change事件會默認傳行數據進去，用selectItem(rows)的rows接收就好，rows所選行數據的數組

this.$refs.multipleTable.toggleRowSelection(it, true);

toggleRowSelection這個函數需要傳某行數據，true表示勾選，false表示不勾選，

@selection-change默認是勾選的，也就是說這個事件傳進來被選中的數據如果你還是想勾選，那么不需要任何操作，除非你想不勾選，那么就把那條數據用false來去掉勾選。

selectItem這個函數我自定義了，一旦勾選多於一行數據，就把上一個勾選去掉，保留最后一個勾選，用過濾器來過濾，把新的（只有一行數據）的數組賦給自定義的數組，方便調用

3、@row-click="onSelectOp"

點擊那一行數據觸發的事件默認傳點擊那行的數據，自定義onSelectOp(row)函數，
用row來接收點擊的那行數據，
先把所有的選項清空this.$refs.multipleTable.clearSelection();

再把點擊的那行勾選this.$refs.multipleTable.toggleRowSelection(row, true);
把自定義數組清空this.selectlist = [];
把新勾選的數據push進數組this.selectlist.push(row);

methods: {
    onSelectAll() {
      this.$refs.multipleTable.clearSelection();
    },
    selectItem(rows) {
      if (rows.length > 1) {
        var newRows = rows.filter((it, index) => {
          if (index == rows.length - 1) {
            this.$refs.multipleTable.toggleRowSelection(it, true);//這行可以不要
            return true;
          } else {
            this.$refs.multipleTable.toggleRowSelection(it, false);
            return false;
          }
        });
        this.selectlist = newRows;
      } else {
        this.selectlist = rows;
      }
    },
    onSelectOp(row) {
      //this.$refs.multipleTable.clearSelection();不需要
      this.$refs.multipleTable.toggleRowSelection(row, true);//有這個就夠了，因為一旦勾選的內容有變化，那么就會觸發selectItem(rows)這個函數

     //this.selectlist = [];不需要 
     //this.selectlist.push(row);不需要 
},

 二、數據回顯toggleRowSelection失效問題

失效例子：

  comeBackfromEidt() {
      let id = parseInt(this.$route.params.id);
      this.items.forEach(x => {
        if (x.id == id) {
          this.$refs.multipleTable.toggleRowSelection(x, true);
        }
      });
    },

我是從這個頁面勾選數據然后跳轉到另一個頁面，然后返回的時候想回顯勾選的數據，寫了上面代碼，發現回顯不了！！！

后來查到需要加上$nextTick才可以

以下代碼可行：

  comeBackfromEidt() {
      let id = parseInt(this.$route.params.id);
      this.items.forEach(x => {
        if (x.id == id) {
          this.$nextTick(() => {
            this.$refs.multipleTable.toggleRowSelection(x, true);
          });
        }
      });
    },

或者把$nextTick放在forEach外面也可以。

$nextTick 是在下次 DOM 更新循環結束之后執行延遲回調，在修改數據之后使用 $nextTick，則可以在回調中獲取更新后的 DOM

在我們用vue時，我們經常用到一個方法是this.$nextTick，相信你也用過。我常用的場景是在進行獲取數據后，需要對新視圖進行下一步操作或者其他操作時，發現獲取不到dom。

因為賦值操作只完成了數據模型的改變並沒有完成視圖更新

詳細請看vue中$nextTick的用法講解

 

三、$nextTick不生效？

之前遇到過一種情況，如下圖所示

<el-checkbox
          v-model="checked"
          @change="selectData"
          style="margin-left: 20px"
          >無數據不顯示</el-checkbox
        >

checked初始化為true,即通過值為true或者false來判斷打勾沒打勾。

這種單選打勾的，由於前端用sessionStorage做數據緩存，刷新頁面回顯時，發現勾勾沒打上，即數據回顯有問題。

經過多次測試，才想到，sessionStorage緩存時，緩存的數據都會變成文本，對於boolean類型的值true和false同樣也會變成文本的"true"和"false",所以回顯緩存的數據時，不能直接賦值回去，需要判斷緩存的是"true"或"false"來分別賦值boolean類型的值true和false。

最好我的解決辦法是加一層判斷

let getChecked = sessionStorage.getItem("sif-rwhz-checked");
    if (getChecked != null) {
      if (getChecked == "true") {
        this.checked = true;
      } else {
        this.checked = false;
      }
    }

於是就解決了，或許我這種辦法不是最好的，但卻是我目前能想到的最簡單的。

 

說到這，順便說一下緩存對象集合時，先把集合變成JSON,然后用到的時候再轉回來

sessionStorage.setItem("sif-rwhz-data", JSON.stringify(this.items));

let data = sessionStorage.getItem("sif-rwhz-data");
    if (data != null) {
      this.items = JSON.parse(data);
    }