vue多选之后怎样传参数

Question

多选之后怎样写逻辑可以获取所有日期传另外一个页面上

Answer 1

// 多选框选中数据
handleSelectionChange(selection) {

// selection 是选中的所有数据
// 通过filter过滤出所有的日期放在一个数组中，
this.selectList = selection.filter(item => item.date) 

},
// 跳转页面
this.$router.push({

path: "",
query: this.selectList

})
// 父子传值
<son :select-list="selectList"></son>
prop: {

type: Array,
default: () => []

}

Answer 2

示例下方可以点击显示代码，里面就有，设置选择事件 @selection-change="handleSelectionChange"

Answer 3

大多数列表组件勾选得到的是一个数组，如果需要特殊处理，自行循环数组操作。

如果是直接跳转页面，用的router的话有param传参。

组件间传值一般 使用props
或者使用vuex组件数据共享

Answer 4

我不知道你说的另一个界面指的是另一个路由还是另一个组件。
如果是另一个路由界面，这种数据一般会传到后端保存到数据库吧，然后到另一个界面请求接口拿到。因为你单纯的前端保存也只是放在内存/浏览器储存里面，刷新一下界面或者换一个浏览器就没数据了。
如果你真的只想保存在内存/浏览器缓存里面，你可以放在浏览器储存localStorage(indexDB也行)里面，如果另一个界面不是打开新窗口的话，也可以放在状态管理数据里面(vuex/pinia)里面实现数据共享（刷新就没了）

Answer 5

可以将这些数据包装成数组或者对象根据自身情况选择父传子或者子传父，或者Vuex进行传参