【Element UI样式优化】el-table多选行的实现 ==＞ 批量删除功能 ==＞ el-table含有不可选中行

Your spark is not your purpose，that last box fills in when u are ready to come live.

未必需要有所成就的活着，享受日常也很好。         -------心灵奇旅

功能简介：

1. 实现批量删除功能

2. 根据条件设置含有不能选中行的表格

 

---

目录

一、基础的多选el-table

1.table基础结构

 2.添加selection-change

二、实现批量删除功能

 1.按钮相关

2.删除函数撰写

三、含有不能选中行的表格

---

一、基础的多选el-table

ElementUI 提供了多选行table，同时若依框架也提供了成熟的多选表格。

1.table基础结构

需要绑定selection-change方法

        
        
          
        
        
          
        
        
          
        
        ...
        

 2.添加selection-change

ids用来保存select选中的行id；并使用single和mutiple记录选中情况。

// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// ===表格数据===
productList: [],

// 查询产品信息列表
    getList() {
      this.loading = true;
      getProductList(this.queryParams).then(response => {
        this.productList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
// 多选框选中数据
    handleSelectionChange(selection) {
      console.log("多选框选中数据");
      this.ids = selection.map(item => item.id);// 需要根据数据情况调整id名称
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

二、实现批量删除功能

 1.按钮相关

只有是multiple时，表示开启多选模式，才可以使用批量删除按钮

删除

2.删除函数撰写

批量删除和行删除公用一个删除函数，通过是否有传参来区分。使用confirm二次确认。并最终调接口实现功能。

// 删除
    handleDelete() {
      this.$confirm("是否确认删除选中的数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          // return deleteGroup({ groupId: row.id });
        })
        .then(() => {
          this.queryParams.pageNum = 1;
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(() => {});
    },

三、含有不能选中行的表格

 非常简单，只需要为表格的selection这一列添加:selectable="selected"

同时，在方法中添加判断条件，本示例中是通过“是否已经组合产品”来判断。

// 多选框是否可以选中
    selected(row, index) {
      if (row.isGroup == 1) {
        return false; //不可勾选
      } else {
        return true; //可勾选
      }
    },