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

原创
2019/08/23 16:59
阅读数 183

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数组中对应下标的值

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部