ElementUI:如何将表格获取到的数据传入另一个页面中

Question

现在我有一个表格，如图：

当我选中数据前的框框时，能获取到该数据，如图：

现在我想在选中框框后再点击确定按钮，能将这些数据的值传入另一个页面的input框中：

请问这该怎么实现呢？以下User页面的代码：

<template>
<div>    
  <el-table
    ref="multipleTable"
    :data="users"
    style="width: 100%;"
    @selection-change="handleSelectionChange">

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

  <el-table-column
        prop="id"
        label="编号"
        width="120">
  </el-table-column>

  <el-table-column
        prop="name"
        label="姓名"
        width="120">
  </el-table-column>

  <el-table-column
        prop="age"
        label="年龄">
  </el-table-column>
</el-table>

  <div style="margin-top: 20px" >
        <el-button type="primary" @click="submit">确定</el-button>
  </div>

</div>
</template>

<script>
export default {
  name:'User',
  data() {
        return{
            users:[],
    }
  },  
  methods: {
        findAll(){
            this.$http.get('http://localhost:8989/vue/user/findAll').then((res)=>{                
                this.users = res.data.result
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
            console.log(this.multipleSelection);           
        },
        submit(){

        }
  },
    created(){
        this.findAll()
    },
    watch:{ 
        $route:{
            handler:function(val,oldval){
                if(val.path=='/user'){
                    this.findAll()
                }
            },
            deep:true
        }
    },
}
</script>

submit（）方法中要怎么写才能实现该功能？Home页面的代码又大概是什么样子？

Answer 1

传递的参数多不多，如果穿的的参数很多，建议使用调用的接口的方式获取数据
如果数据很多：
表格执行多选操作时，将选中数据的id合成逗号间隔的字符串，通过 this.$router.push('/home?ids=' + ids) 的方式传给home页面，home页面执行this.$route.query.ids获取该数据，并调用接口，查询这组id下的数据
如果数据不是特别多：
表格执行多选操作时，记录选中的数据，通过 this.$router.push({path: '/home', params: {data:选中的数据}}) 跳转到home页面，home页面通过 this.$route.params.data获取该数据
如果数据较少： 表格执行多选操作时，将选中数据的数据合成逗号间隔的字符串，通过 this.$router.push('/home?ids=' + ids) 的方式传给home页面，home页面执行this.$route.query.ids获取该数据