[Element UI style optimization] Implementation of el-table multi-select rows ==> batch delete function ==> el-table contains unselectable rows

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

You don't necessarily need to live a successful life, and it's good to enjoy your daily life. -------Spiritual Journey

Function introduction:

1. Implement batch delete function

2. Set the table with unselectable rows according to the condition

 

---

Table of contents

1. Basic multi-choice el-table

1. table basic structure

 2. Add selection-change

2. Implement batch delete function

 1. Button related

2. Delete function compose

3. A table with rows that cannot be selected

---

1. Basic multi-choice el-table

ElementUI provides a multi-select row table, and the Ruoyi framework also provides a mature multi-select table.

1. table basic structure

Need to bind selection-change method

<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. Add selection-change

ids is used to save the row id selected by select; and use single and mutiple to record the selection.

// 选中数组
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;
    },

2. Implement batch delete function

 1. Button related

Only when it is multiple, it means that the multi-selection mode is turned on, and the batch delete button can be used

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

2. Delete function compose

Batch delete and row delete share a delete function, which is distinguished by whether there is a parameter passed. Use confirm for a second confirmation. And finally adjust the interface to realize the function.

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

3. A table with rows that cannot be selected

 It's very simple, just add : selectable="selected" to the selection column of the table

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

At the same time, add a judgment condition in the method, in this example, it is judged by "whether the product has been combined".

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