vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue多选框保留勾选数据

Vue多选框保留勾选数据实现方式

作者:慕白Lee

文章浏览阅读1.2w次,点赞2次,收藏6次。文章讲述了在Vue.js组件开发中遇到的分组数据选中状态保存问题,通过三个阶段的探索,最终使用ElementUI的reserve-selection属性解决了数据切换与勾选状态保留的难题,并提供了相关代码示例和优化建议。

背景

封装组件的时候遇到一个场景:

查询两个接口数据得到两个分组集合, 需要动态切换分组选中状态, 

刷新最新的并集,并且可以保留勾选状态+模糊搜索, 两个分组会存在相同元素的可能.

总结:遇到问题先别急着造轮子, 大概率有对应的功能标签了, 一般的业务根本触及不到vue的设计缺陷的...​

问题分析与解决

第一阶段:初始化与数据同步

在页面初始化时,通过请求接口保存两个分组的初始数据。

定义两个集合来保存数据,并在集合数据变化时直接获取最新的数据。

这个方法的缺点是无法保存用户的勾选状态。

第二阶段:直接操作原始数据

后来发现,必须直接操作原始的 data 数据集合。

尝试将勾选状态作为属性赋值回数据集合是无效的,同时也无法实现数据操作和列表模糊查询的需求。

第三阶段:引入reserve-selection

最终,使用 reserve-selection 属性解决了勾选状态保留的问题,这表明在遇到问题时应该首先考虑框架或库本身是否提供了解决方案,而不是急于自己编写解决方案。

保存数据勾选状态reserve-selection

demo简化演示

        <el-table ref="table" :row-key="rowKey" :data="tableData" @selection-change="selectionChange"
          max-height="666px">
          <el-table-column type="selection" label="全部" width="55" align="center" :reserve-selection="true" />
          <el-table-column label="姓名" align="left" prop="name" />
          <el-table-column label="手机号" align="left" prop="phone"/>
        </el-table>
 methods: {   
     rowKey(row) {
        //row-key就是要指定一个key标识这一行的数据,保证唯一即可
        return row.id;
     },
    // 列表选择,val选中的表格行数据
    selectionChange(val) {
      console.log(val)
    },
    //清除表格所有的选中项
     clearSelect(){
        //方法1
        this.$refs["table"].clearSelection();
        //方法2
        this.$refs.buyerTable.clearSelection();
     },

},

reserve-selection完整使用小例

在Vue.js中,`reserve-selection` 是一个用于 `<el-table>` 组件(基于 Element UI)的属性,用于在表格分页时保留已选中的行。

当 `reserve-selection` 属性设置为 `true` 时,表格在分页时会保留已选中的行,而不会清除选中状态。这样,在用户切换分页时,之前选中的行将保持选中状态。

下面是一个示例,演示了如何在 `<el-table>` 组件中使用 `reserve-selection` 属性:

<template>
  <el-table
    :data="tableData"
    :reserve-selection="true"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 30 },
        { name: 'Bob', age: 35 },
      ],
      selectedRows: [],
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
  },
};
</script>

在上面的示例中,`reserve-selection` 属性设置为 `true`,并且通过 `@selection-change` 事件监听器,将选中的行存储在 `selectedRows` 数组中。

当用户在表格中选择行时,`handleSelectionChange` 方法会被调用,将选中的行存储在 `selectedRows` 数组中。即使用户切换分页,已选中的行也会保持选中状态。

请注意:

清除某些选中项

基于上述理解, 还要实现选中项清空的功能

demo代码

        for (let i = 0; i < this.selections.length; i++) {
          if (true) {
            this.$refs.table.toggleRowSelection(this.selections[i]);
            i--;
          }
        }
 

相关知识点

this.$refs.table.toggleRowSelection 是在Vue.js中使用$refs访问组件实例的特殊语法。它用于在Vue组件中的方法中调用子组件的方法或访问子组件的属性。

假设您有一个名为 table 的子组件,并且在父组件中使用了 ref="table" 来引用该子组件。那么,通过 this.$refs.table,您可以访问到子组件的实例,从而调用子组件的方法或访问子组件的属性。

toggleRowSelection 是一个假设 table 子组件中有一个名为 toggleRowSelection 的方法的示例。它的作用是切换表格中某一行的选中状态。

例如,假设您的 table 子组件具有以下方法:

methods: {
  toggleRowSelection(row) {
    // 在这里实现切换行选中状态的逻辑
  }
}

然后,在父组件中的某个方法中,您可以使用 this.$refs.table.toggleRowSelection(row) 来调用子组件的 toggleRowSelection 方法,并传递相应的行数据作为参数。

这样,您可以在父组件中控制子组件的行选中状态。

请注意:

细节优化

扩展方向思考

通过以上的优化,可以确保组件在处理复杂数据和用户交互时保持高性能和良好的用户体验。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文