多选批量删除 + 跨分页保留多选

批量删除场景

普通的批量删除实现：

• template 显示结构

  <el-button type="danger" class="ele-btn-icon" :icon="Delete" @click="deleteSomeGoods" :disabled="multipleGoodsSelection.length === 0">批量删除</el-button>
  
  <el-table :data="appGoodsList" @selection-change="handleGoodsSelect">
      <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
      <el-table-column type="index" label="序号" width="50" align="center"/>
      <el-table-column prop="goodsName" label="商品名称" width="180" align="center" />
  

  • 上述代码的 el-table-column 标签里的 type：
    • selection 就是选择框，批量删除选择时所用
    • index 就是一页的序号（与功能无关，只是显示所用）

• javascript 编写事件功能

  /**
   * 点击删除
   */
  const deleteSomeGoods = () => {
      ElMessageBox.confirm(`确定删除：${multipleGoodsSelection.value.length}个商品？`, "提示", {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
  
      }).then(() => {
          // 删除方法 delSomeGoods
          appGoodsApi.delSomeGoods(multipleGoodsSelection.value, function (res) {
              ElMessage({
                  type: 'success',
                  message: '删除商品成功'
              })
              // 重新获取删除后的商品列表
              getGoodsList();
          });
      }).catch(() => {
      })
  };
  
  /**
   * 批量删除
   */
  const multipleGoodsSelection = ref([]);// 记录选中商品的列表
  
  /**
   * 单选框选择删除
   */
  const handleGoodsSelect = (selection) => {
  	multipleGoodsSelection.value = selection;
  };
  

  • 这个 $ 符号在字符串中通常用作插入变量的方式，它是一个模板字符串（template string）的表示方式，由反引号（）包围。在 JavaScript 中，模板字符串可以插入变量，通过在变量名前后加上 ${}来标识，这里 ${multipleGoodsSelection.value.length} 就直接替换成了 multipleGoodsSelection.value.length 的具体值

• 分页显示的话请参考分页组件 Pagination 官方网址：https://element-plus.org/en-US/component/pagination.html#contributors

多页跨页删除

• 只编写上述的批量删除和分页的话，在第一页选择了想批量删除的商品后，翻到第二页再回到第一页就会发现：第一页选过的商品又变回了未选择的状态

• 而想要的功能是：在第一页选择了想删除的商品后，翻到其他页后，继续选择，并且回到第一页，选择要删除的那些商品仍处于被选中的状态，而且不管在第几页，被选中过了的商品都可以保留下来并实现批量删除

• 更改 template 结构内容

  <template>
  
  <el-table :data="appGoodsList" @selection-change="handleGoodsSelect" :row-key="getRowKeys" ref="tableRef">
      <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
      <el-table-column type="index" label="序号" width="50" align="center"/>
      <el-table-column prop="goodsId" label="商品ID" v-if="false"/>
      
      <!--  ......  -->
  </template>
  

  • :row-key="getRowKeys" 是为了获取 id，用于指定每行数据的唯一标识符，以便 Vue 在重新渲染时能够正确地识别和保持行的状态，通常都是配合 reserve-selection 来使用
    • 这里也可以直接写 row-key="goodId"
  • reserve-selection 就是用于保留之前已选择的数据项的配置，即：表格会在刷新或重新加载时记住之前已选择的项
    • 当用户选择了某些行时，如果切换页面或对表格进行一些操作，有时可能希望保留用户之前已选择的行，而不是在操作后重新选择就需要这个属性

• 对应的 <script>

  /**
  * 保留key
  */
  const getRowKeys = (row) =>{
      return row.goodsId; // 提供id，用于handleGoodsSelect获取
  }
  
  const multipleGoodsSelection = ref([]); // 选中的商品列表
  const tableRef = ref(null); // return出来，对应着表中的ref
  
  /**
  * 单选框选择删除
  */
  const handleGoodsSelect = (selection) => {
      multipleGoodsSelection.value = selection.map(row => row.goodsId); // 用id来记住选择过的信息
  };
  
  const deleteSomeGoods = () => {
      ElMessageBox.confirm(`确定删除：${multipleGoodsSelection.value.length}个商品？`, "提示", {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
      }).then(() => {
          appGoodsApi.delSomeGoods(multipleGoodsSelection.value, function (res) {
              ElMessage({
                  type: 'success',
                  message: '删除商品成功'
              })
              // 这里虽然置空了multipleGoodsSelection，但在handleGoodsSelect方法中还是会一下子获取删除过了的商品的key，也就是id，没有真正做到"置空"
              multipleGoodsSelection.value = [];
              // 所以就要加上以下语句，来清除表格中的选择状态，这样就不会有已经删除了的信息了
              tableRef.value.clearSelection();
              getGoodsList();
          });
      }).catch(() => {
      })
  };
  

• 就此完成了跨页的批量删除功能