Element UI 使用 ---table 篇

使用Elment UI 的 table 組件時 多選框（type = "selection"） 需要實現勾選和狀態同步的功能， 所以第一次進入表格時需要默認選中，

<el-table
      :data="tableData"
      border
      style="width: 100%"
      height="600"
      ref="table"
      row-key="id"
      @select="handleSelect"
      @select-all="handleSelectAll"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection"  :reserve-selection="true" width="55"> </el-table-column>
    
</el-table>

:reserve-selection="true"    文檔地址

僅對 type=selection 的列有效，類型為 Boolean，為 true 則代表會保留之前數據的選項，需要配合 Table 的 clearSelection 方法使用。

設置此屬性后  row-key  這個屬性也是必須的

this.$refs.table.toggleRowSelection(item,true);

toggleRowSelection       文檔地址

切換某一行的選中狀態，如果使用了第二個參數，則是設置這一行選中與否（selected 為 true 則選中）

調用toggleRowSelection這個方法 需要獲取真實dom 所以需要注冊 ref 來引用它  

由於默認選中 只在第一次刷新表格時出現，  由於ajax延遲 我是在created 里 獲取數據，所以 只能將默認選中的函數放在了 請求回調函數內 設置一個參數控制只執行一次

defaultSelect () {
      this.tableData.forEach(item => {
        this.allUsers.push(item.id);
        item.state == 3 &&     this.$refs.table.toggleRowSelection(item,true);
      });
    }   

once && this.defaultSelect(); 

 

http://element.eleme.io/#/zh-CN/component/table#table-column-attributes