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