el-table 使用总结

1.列表带有复选框分页或数据更新之后保留之前选中的数据(reserve-selection+row-key)

<el-table
    :data="list"
    ref="table"
    :row-key="(row)=>{ return row.classId}"
    @selection-change="handleSelectionChange" style="width: 100%">
  <el-table-column type="selection"  :reserve-selection="true" ></el-table-column>
</el-table>

row-key :行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。

2.列表复选框设置某条数据不可选(selectable事件)

<el-table :data="oldClassCourse" style="width: 100%" @selection-change="handleSelectionChange">
  <el-table-column type="selection" :selectable="selectable"></el-table-column>
</el-table>

//复选框过滤不可选数据
selectable(row, index) {
  if (row.showStatus === 4 || row.refundStatus === 1) {
    return false;
  } else {
    return true;
  }
},

3.列表单选框事件

<el-table :data="list" style="width: 100%">
  <el-table-column label="选择" width="75">
    <template slot-scope="scope">
      <el-radio
        :label="scope.row"
        v-model="classRadio"                            
        @change.native="getRadio(scope.$index,scope.row)"
        >&nbsp</el-radio>
      </template>
    </el-table-column>
<el-table>

  //获取选中数据
  getRadio(index, row) {
    this.classId = row.classId;
  },

4. 改变页面数据同步表格选中状态的复选框

toggleSelection(rows) {
    if (rows) {
    //需row === couponList.item
        rows.forEach(row => {
          this.$refs.couponList.toggleRowSelection(row, true)
        })
      } else {
        this.$refs.couponList.clearSelection()
    }
 },
//有时会不起效果，我利用内置存取复选框选中方法
`this.$refs.couponList.store.states.selection`
`改变页面数据是同步修改store的值就可以啦  如下：`
操作() {
    this.showDialog = true;
        this.$nextTick(function() {
        this.toggleSelection(this.dynamicTags)
    })
    if(this.$refs.couponList){
        this.$refs.couponList.store.states.selection = this.dynamicTags 
    }
},