ElementUI之表格多选框使用

最新推荐文章于 2024-08-29 17:08:40 发布

永不满足的求知者

最新推荐文章于 2024-08-29 17:08:40 发布

阅读量2.5k

点赞数 2

分类专栏： Vue Element 前端

本文链接：https://blog.csdn.net/qq_41154522/article/details/104589368

版权

前端同时被 3 个专栏收录

82 篇文章 2 订阅

订阅专栏

Vue

64 篇文章 3 订阅

订阅专栏

Element

29 篇文章 0 订阅

订阅专栏

<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>

使用多选框

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

表格监听多选框

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

获取多选框数据方法

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

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

 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 + ','; 
  })