Vue2 Element el-table多选表格 控制选取的思路

---

前言

构建多选表格, 实现对监听选取状况, 获取当前选中项行数据, 获取当前所有选中项.

---

一、构建多选表格

构建DOM结构, 在表格el-table内加一个特殊列即可, 将列类型type属性设置为selection.

<el-table-column type="selection">
</el-table-column>

注意如果使用v-for指令生成表格, 不要将上面这段代码直接加在v-for里, 不然每行旁边都有一个选项列, 肯定是要分开的, 但是怎么分开的同时不拆表呢.
刚开始我尝试过这种方案, 使用一个div将需要遍历生成的列包裹, 在div上v-for遍历, 但el-table仍然是基于HTML表格的封装, 这就像往原生HTML表格的列外面套了div, 会直接破坏表格结构.
我差点就忘了这是Vue2…直接把div换成<template></template>就好.

<el-table-column type="selection" width="55">
</el-table-column>
  <template v-for="(item, index) in billTableEvent">
    <el-table-column
      :prop="item.props"
      :label="item.label"
      :align