Element UI实现单选多选,批量删除

1、添加一个批量删除的按钮

 <el-button 
        type="danger" 
        icon="el-icon-delete" 
        @click="delAll"  
        :disabled="multipleSelection.length === 0"   //判断用户是否点击选择
        style="margin-left:15px;" >
        一键删除
</el-button>

《Element UI实现单选多选,批量删除》 《Element UI实现单选多选,批量删除》

 如上图所示,当没有选中任何一项时,批量删除按钮是不可点击的,当选中其中一项或多项时,批量删除按钮变成可点击;

2、在el-table标签内添加点击复选框的事件和点击行的事件

    <el-table
      v-loading="listLoading"
      :data="datalist"
      @selection-change="handleSelectionChange"    //多选,当选择项发生变化时会触发该事件
      @row-click="handleRowClick"    //点击每行时触发事件
      ref="handSelectTest_multipleTable"  //添加属性
      row-key="id"
    >

 3、 手动添加一个el-table-column,设type属性为selection即可; 

 <el-table-column
         type = 'selection'
         label="全选"
         width="55"
         :reserve-selection="true">  //选择其他页时,之前页选的的框依然存在
  </el-table-column>

如果要获取不同页的数据进行操作,利用reserve-selection,这在官方文档中有说明

需要注意的是使用reserve-selection属性必须配合row-key(不然会报错)

《Element UI实现单选多选,批量删除》

4、 最后在方法中添加点击复选框、点击行和根据id批量删除的方法

  methods: {
      //点击复选框触发,复选框样式的改变
    handleSelectionChange(val) {
        console.log(val)  //打印选中的行集合
        this.multipleSelection = val;
    },
    //点击行触发,选中或不选中复选框
   	handleRowClick(row, column, event) {
        this.$refs.handSelectTest_multipleTable.toggleRowSelection(row);
        console.log(row)  //打印的时当前选中的行
    },
    //点击批量删除
    delAll(){
      var arr=[]
      //遍历点击选择的对象集合,拿到每一个对象的id添加到新的集合中
      this.multipleSelection.forEach(row=>arr.push(row.id))
      this.$confirm('确定删除吗', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        callback: action => {
          if (action === 'confirm') {
            //批量删除
            delAllIpserver(arr).then(response => {
              this.$notify({
                title: '删除成功',
                message: '',
                type: 'success',
                duration: 2000
              })
              this.getList()  //重新加载页面的方法
            }).catch(() => {
              console.log('error submit')
            })
          }
        }
      })
    } 
  }

 效果图

 《Element UI实现单选多选,批量删除》

    原文作者:Xiu.wen
    原文地址: https://blog.csdn.net/weixin_52540274/article/details/119531178
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞