el-table多选删除

最新推荐文章于 2024-08-17 17:34:03 发布

原创最新推荐文章于 2024-08-17 17:34:03 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

这篇文章介绍了在Vue.js中使用el-table组件时，如何实现选择列的功能并保持分页后的选择状态。通过@selection-change事件和reserve-selection属性，结合getRowKeys方法返回唯一ID，可以在页面翻页后仍能显示已选择的行。handleSelectionChange函数则用于处理选择项的变化，更新selectedIds数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <el-table
            
             @selection-change="handleSelectionChange"
             
  :row-key="getRowKeys"

  
            >
            <el-table-column  type="selection"  width="55"   :reserve-selection="true"/>
            //:reserve-selection="true"这个是翻页还能回显的关键

    getRowKeys(row) {
      return row.no; //这里只要是唯一的id就行
    
    },
    //  这里的selection是你所有选择的项
    handleSelectionChange(selection) {
     
      this.selectedIds = selection.map((item) => item.no);
      console.log(this.selectedIds);
    },