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

Posted 2022-06-08 小白Rachel

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

<el-table
        v-loading="loading"
        stripe
        :data="productList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" prop="index" width="55">
          <template slot-scope="scope">
            <span> scope.$index + 1 </span>
          </template>
        </el-table-column>
        <el-table-column label="组合编号" align="center">
          <template slot-scope="scope">scope.row.isGroup==1?scope.row.group.groupCode:''</template>
        </el-table-column>
        <el-table-column label="组合名称" align="center" prop="productGroupName">
          <template slot-scope="scope">scope.row.isGroup==1?scope.row.group.groupName:''</template>
        </el-table-column>
        ...
        <el-table-column label="产品状态" align="center" prop="prdtStatus" />
</el-table>

 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时，表示开启多选模式，才可以使用批量删除按钮

<el-button
            size="small"
            @click="handleDelete()"
            class="btnItem"
            style="margin-left:10px;"
            icon="el-icon-delete"
            :disabled="multiple"
>删除</el-button>

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"

 <el-table-column type="selection" width="55" align="center" :selectable="selected" />

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

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