vue3 Table分页保留选中状态代码示例

 更新时间:2023年08月31日 10:52:00   作者:云雾散尽了  
这篇文章主要给大家介绍了关于vue3 Table分页保留选中状态的相关资料,vue table组件是一个非常方便的表格组件,它可以帮助我们实现分页和选中功能,需要的朋友可以参考下

//指定id值,数据更新之后保留之前选中的数据
const getRowKeys = (row) => {
  return row.siteId; 
};
// 这存的是选中的数据
const userSelectionChange = (values) => {
  state.selectedData = [...values];
};
// 两个数组对比,判断表格中的数据是否开启选中
const reserveSelection = () => {
  let table = state.tableData;
  table.forEach((item) => {
    state.selectedData.forEach((ite) => {
      if (item.siteId === ite.siteId) {
        setTimeout(() => {
          //让页面显示选中的数据
          multipleTable.value.toggleRowSelection(item, true);
        }, 0);
      }
    });
  });
};

总结 

到此这篇关于vue3 Table分页保留选中状态的文章就介绍到这了,更多相关vue3 Table分页保留选中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中如何动态添加样式

    vue中如何动态添加样式

    这篇文章主要介绍了vue中如何动态添加样式问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 超级详细的Vue安装与配置教程

    超级详细的Vue安装与配置教程

    Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue安装与配置教程的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • Vue resource三种请求格式和万能测试地址

    Vue resource三种请求格式和万能测试地址

    这篇文章主要介绍了Vue-resource三种请求格式和万能测试地址,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue 兄弟组件的信息传递的方法实例详解

    vue 兄弟组件的信息传递的方法实例详解

    这篇文章主要介绍了vue 兄弟组件的信息传递的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • Vue Router中应用中间件的方法

    Vue Router中应用中间件的方法

    这篇文章主要介绍了Vue Router中应用中间件的方法,文中讲解非常细致,帮助大家更好的理解和学习vue router,感兴趣的朋友可以了解下
    2020-08-08
  • vue项目中引入Sass实例方法

    vue项目中引入Sass实例方法

    在本文里小编给大家整理的是关于vue项目中引入Sass的相关知识点内容,有需要的朋友们可以测试参考下。
    2019-08-08
  • 如何解决Vue3组合式API模式下动态组件不渲染问题

    如何解决Vue3组合式API模式下动态组件不渲染问题

    这篇文章主要介绍了如何解决Vue3组合式API模式下动态组件不渲染问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教<BR>
    2024-03-03
  • 如何在vue项目中嵌入jsp页面的方法(2种)

    如何在vue项目中嵌入jsp页面的方法(2种)

    这篇文章主要介绍了如何在vue项目中嵌入jsp页面的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • vue中的文本空格占位符说明

    vue中的文本空格占位符说明

    这篇文章主要介绍了vue中的文本空格占位符说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 一文教会你快速上手vue的登录界面(最新版)

    一文教会你快速上手vue的登录界面(最新版)

    几乎每个项目都会使用登录页面,这篇文章主要给大家介绍了如何通过一文教会你快速上手vue的登录界面,文中通过实例代码介绍的很详细,需要的朋友可以参考下
    2022-11-11

最新评论