Vue3 ElementUI框架的表格复选问题

最新推荐文章于 2024-12-08 18:22:16 发布

原创最新推荐文章于 2024-12-08 18:22:16 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript

文章讲述了在Vue3项目中使用ElementUI框架时遇到的表格分页复选问题，作者分享了两种解决方案，包括使用Map记录选中状态和使用Vue实例变量保存选中数据，以应对不同业务场景下的数据同步和效率问题。

Vue3 ElementUI框架的表格复选问题

在项目中使用el-table使用复选框选择的时候我看官方文档似乎并没有解决分页表格复选的问题，也没有给出代码示例，我花了很多时间来想这个问题，最终找到了解决方案，下面这是官方文档的截图，用到的也就是下面的这三个方法：

方案1：

作为一个全栈，我其实第一想法就是想到使用Map来记录每一页的选中状态，这样无论用户如何选择，都可以很完美的记录下当前页有哪些值被选中，做法也很简单，就是使用key:value的形式来实现，key就是currentPage、value就是数组，然后使用初始化的方式，先将数组中的每个值都写成0，然后将已经选中的值改成1，但是有个效率问题，每次翻页或者每次切换页大小的时候都可能需要去重新初始化这个中间记录值，对于前端来说存在一个很大的效率问题。

方案2：

使用下列代码，适用业务场景（用户点击弹窗->加载第一页数据->如果存在原始数据需要将原始数据勾选在列表中->用户可以选择勾选数据，用户也可以对原有已经选中的数据进行取消勾选。用户在当前页勾选后，可以切换到其他页进行勾选，并且在页面切换之间，已勾选的数据不会存在丢失的情况。-> 当用户点击确定的时候关闭弹窗，并且将选择的内容最终展现在列表上）

1.记录当前选中值

/**
单选或多选都可用 select 和select-all的回调都是一样的   
使用的是vue3
tempProdNumList 是中间变量，类似于缓存记录一下当前用户选中了哪些值
it.relateNumber == item.relateNumber 这里的判断条件需要根据实际业务场景来
prodTableData 是当前页的表格数据
2024/03/05 更新 currentPageSelect 记录当前页选中的集合
**/
const prodChangeSelect = (value)=>{
  value.forEach((item)=>{
    if(!currentPageSelect.value.includes(item)){
      // 代表这条记录是新增的
      currentPageSelect.value.push(item)
    }
  })
  const oldCurrent = cloneDeep(currentPageSelect.value)   // 先暂存一下当前页已经选中的防止丢失
  // 过滤那些选中被取消的
  currentPageSelect.value = currentPageSelect.value.filter((item)=>value.includes(item))
  const tempData2 = cloneDeep(tempProdNumList.value)
  if(value.length > 0){
    // 当前页有记录
    if(tempData2.length > 0){
      prodTableData.value.forEach((item)=>{
        const index = findIndex(tempData2,(it)=>it.relateNumber == item.relateNumber)
        if(index > -1){
          tempData2.splice(index,1)
        }
      })
    }
  }else if(value.length == 0){
    // 特殊处理当前页清空选择的情况
    oldCurrent.forEach((item)=>{
				const findRes =  currentPageSelect.value.find((it)=>it.relateNumber == item.relateNumber)
        if(!findRes){
          tempData2 = tempData2.filter((tempItem)=>tempItem.relateNumber !== item.relateNumber)
        }
    })
	}
  tempProdNumList.value = tempData2.concat(value)  // 关键的一行
}

这里需要注意，单选和全选事件都需要调用这个方法来确保其正常使用。

2.回显数据

/**
clearSelection() 以及 toggleRowSelection(item,true) 这两个方法可以百度一下文档看看
**/
const echoProdData = () =>{
  currentPageSelect.value = []
  relateProdTable.value.baseTable.clearSelection()  // 这个主要是用于清空当前页的所有选中状态,具体的需要根据代码判断,我这里是封装了表格
  prodTableData.value.forEach((item)=>{
    const tempCont = tempProdNumList.value.find((it)=>it.relateNumber == item.relateNumber)
    if(tempCont){
      relateProdTable.value.baseTable.toggleRowSelection(item,true)
      currentPageSelect.value.push(item)  // 回显数据的时候记录当前页的值
    }
  })
}

最重要的其实就是上面两步，剩下的代码主要是配合上面的代码

3.其他需要的代码

/**
	点击打开弹框
**/
const addProd = ()=>{
  // 初始化查询条件以及打开弹框
  ...
  tempProdNumList.value = cloneDeep(prodInfoData.value.prodductList)  // 最重要的一步,每次打开弹框的时候,都需要记录一遍原始数据
  getProdInfoList() // 查询数据接口
}
/**
	还需要注意的点:
	1.查询数据接口的时候 需要在返回后调用回显数据的方法,确保不论是打开弹框还是分页都能将勾选反显.
	2.确认选择的时候需要将   prodInfoData.value.prodductList = cloneDeep(tempProdNumList.value)  副本数据给正式数据

**/