el-table支持多页的多选

在使用el-table自带多选时,会发现切页之后上一页的选择无法保持,但是在某些业务场景中,需要支持多页多选,记住之前的选择

 <el-table
   :data="standardDatasets"
   border
   @select="handleSelectionChange"
   @select-all="handleSelectAll">
   <el-table-column type="selection" width="55" />
</el-table>
const selectedDataset = ref([])
// 如果存在就删除 如果没有存在就加入
function handleSelectionChange(rows, row) {
   
  if (selectedDataset.value.find(item => item == row.id)) {
   
    //下面这个filter方法就是删除的方法
    selectedDataset.value = selectedDataset.value.filter(item => item != row.id)
  } else {
   
    selectedDataset.value.push(row.id)
  }
}
//处理全选问题
function handleSelectAll(rows) {
   
  if (rows.length) {
   
    rows.forEach(row => {
   
      if (!selectedDataset.value.find(item => item == row.id)) {
   
        selectedDataset.value.push(row.id)
      }
    })
  } else {
   
    standardDatasets.forEach(row => {
   
      selectedDataset.value = selectedDataset.value.filter(
        item => item != row.id
      )
    })
  }
  // console.log(selectedDataset.value, rows, taskList)
}

相关推荐

  1. el-table支持

    2024-02-21 14:06:01       47 阅读
  2. el-table,一个其他类型相同也选中

    2024-02-21 14:06:01       39 阅读
  3. 【element-ui】el-table实现跨

    2024-02-21 14:06:01       53 阅读
  4. element ui el-table功能失效

    2024-02-21 14:06:01       46 阅读
  5. Element-ui el-table组件单//跨讲解

    2024-02-21 14:06:01       34 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-21 14:06:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-21 14:06:01       106 阅读
  3. 在Django里面运行非项目文件

    2024-02-21 14:06:01       87 阅读
  4. Python语言-面向对象

    2024-02-21 14:06:01       96 阅读

热门阅读

  1. C语言获取时间函数大全

    2024-02-21 14:06:01       51 阅读
  2. 记录 | 修改docker存储路径

    2024-02-21 14:06:01       45 阅读
  3. vim 实用快捷键

    2024-02-21 14:06:01       48 阅读
  4. ConversionService学习

    2024-02-21 14:06:01       49 阅读
  5. blender快捷键记录

    2024-02-21 14:06:01       46 阅读
  6. Axios

    2024-02-21 14:06:01       45 阅读