ElementUI使用@selection-change="handleSelectionChange"方法后怎么把获取到的值传递到另一个页面？

Question

如图：

现在选中两行数据后能获取到他们的name属性，怎么在点击“确定”按钮后把这两个值传到另一个页面去？

以下是部分代码：

<template>
<div>
  <el-table
    ref="multipleTable"
    :data="users"
    @selection-change="handleSelectionChange">

  <el-table-column
        type="selection"
        width="55">
  </el-table-column>

  <el-table-column
        prop="id"
        label="编号">
  </el-table-column>
  <el-table-column
        prop="name"
        label="姓名">
  </el-table-column>
  <el-table-column
        prop="age"
        label="年龄">
  </el-table-column>
  </el-table>

  <el-button type="primary" @click="submit">确定</el-button>

</div>
</template>

<script>
export default {
  name:'User',
  data() {
    return{
        users:[],
    }
  },  
  methods: {
    handleSelectionChange(val) {
        this.multipleSelection = [];
        for(let i = 0; i < val.length;i++){
            if(this.multipleSelection.indexOf(val[i].id)=== -1){
                this.multipleSelection.push(val[i].name)
            }
        }
        // this.multipleSelection = val
        console.log(this.multipleSelection);           
    },
    submit(){
        
    },
  },
}
</script>

Answer 1

你想传到哪里 你的另一个页面是值父页面 还是跳转页面？

父组件页面直接 触发对应的 emit事件即可

如果是父页面 页面层级的话可以使用路由传参

this.$router.psuh({path:'/parent',params:{multipleSelection:this.multipleSelection}})

但是因为是隐式传参，页面刷新后数据就会丢失，但是这个应该是比较符合你父页面 table 要求的，如果想要刷新保留的话可以使用显式传参
params改成query

created里写好判断即可