欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ElementUI之表格多选框使用

程序员文章站 2022-07-13 23:03:51
...
<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 + ','; 
      })