ElementUI之表格多选框使用

<el-table
      :data="carList"
      border
      ref="table"
      style="width: 100%"
      @selection-change="handleSelectionChange">
  <el-table-column
          type="selection"
          width="55"
          align="center">
  </el-table-column>
</el-table>

使用多选框

1. 手动添加一个el-table-column，设type属性为selection即可；
2. 默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。
3. align 可使框居中显示

表格监听多选框

1. 设置 @selection-change=“handleSelectionChange” 当选择项发生变化时会触发该事件
2. data中定义 multipleSelection: ’ ', 用来存储多选框数据
3. 获取多选框数据方法

   handleSelectionChange(val) {
              this.multipleSelection = val;
   },
   

4. 执行批量删除时 获取多选框的数据

    let app = this;
    //判断多选框是否为空 若为空提示未选中
    if (this.multipleSelection == '') {
         app.$notify({
             title: '温馨提示：',
             message: '您未选中车辆，请重新操作！！！',
             type: 'warning'
         });
         return;
     }
     // multipleSelection存储了勾选到的数据
     let checkArr = app.multipleSelection;  
     let ids = '';
     //遍历数组 将数组数据转变成字符串以逗号隔开 向后端请求时传递该字符串
     checkArr.forEach(function (item) {
         ids += item.carId + ','; 
     })