tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框

• 实现多选非常简单: 手动添加一个el-table-column，设type属性为selction即可；

2、@selection-change事件：选项发生勾选状态变化时触发该事件

<el-table
       @selection-change="handleSelectionChange"
        ref="multipleTable"
        :key="tableKey"
        :data="tableData"
        row-key="id"
        v-loading="tableLoading"
        element-loading-text="给我一点时间"
        fit
        size="mini"
        tooltip-effect="dark"
        style="width: 100%;font-size: 12px;margin-bottom:15px;border-radius:3px;"
        :header-cell-style="tableHeaderColor">

</el-table>

监听的方法

handleSelectionChange(val) {   // 返回值val是选中行数据的集合
      this.multipleSelection = val.map(item => item.id);
      this.isProcurementStatus = val.map(item => item.procurementStatus);
      this.forDialogTitle = val.map(item => item.purchaseProject);
    }

注意：如果复选框全选时，val的值即和table绑定的tableData一致。选中某一行，val的值就是tableData数组中对应下标的值

转载于:https://my.oschina.net/u/4190397/blog/3096795