Element组件----el-table data数据发生改变、页面未发生动态变化。路由跳转携带相同参数,跳转页列表不会动态变化。

Element组件----el-table data数据发生改变、页面未发生动态变化。路由跳转携带相同参数,跳转页列表不会动态变化。

一、el-table data数据发生改变、页面未发生动态变化

	在做表格的时候,需求是首次进入页面获取列表数据,当从其他路由携带固定参数
跳转过来时,则执行新增一条记录操作。
	新增完成后则再次调用后台接口,获取列表最新数据。
	(注:调用接口返回的数据是最新的数据,再次点击搜索可以刷新列表数据。分页
可以正常获取数据)

问题:新增完成后,再次调用获取列表数据为最新数据,但是table页面数据并未进行刷新。

解决后页面代码如下:
在el-table标签上添加属性
:key=‘tableIndexValue’
(key值设为列表中数据id,并未解决我的问题,你也可以试试)

			<el-table :data="tableData" :key="tableIndexValue" current-row-key="id" v-loading="tableLoading" style="width: 100%" :height="tableHeight" stripe>
            </el-table>
	在调用后台接口刷新table数据的同时,将tableIndexValue重新赋值为随机数:
		this.tableIndexValue = Math.random();
	就此table页面不动态刷新问题解决。

二、路由跳转携带相同参数,跳转页列表不会动态变化。

	需求:从其他路由1跳转到路由2下,路由1携带参数,在路由2下调用后端接口新增数
据,新增完成后调用获取列表信息方法刷新页面数据。

问题:第一次跳转可以实现相应功能,第二次再次从路由1(携带相同参数)跳转到路由二时,上述所说页面刷新功能未有效果,调用接口时已经为最新数据。

解决代码如下:

this.$router.push({
    path: '/dataExport',
    query: {
        name: '数据查询',
        sql: this.sql,
        random:Math.random()
    }
})
//在进行路由跳转的同时,多传递一个random参数,则再次跳转相同其他参数的路由
//页面数据可以正常刷新。

如果对你有帮助的话,就给小弟点个赞吧,万分感谢。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,如果您想在Vue3的路由跳转视图中使用element数据表,可以按照以下步骤进行操作: 1. 首先,您需要安装element-ui和vue-router模块。您可以使用以下命令进行安装: ``` npm install element-ui vue-router --save ``` 2. 在您的Vue应用程序中,导入element-ui和vue-router模块,并注册它们: ```javascript //main.js import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(ElementUI) Vue.use(VueRouter) const router = new VueRouter({ routes: [ //定义您的路由 ] }) new Vue({ router, render: h => h(App) }).$mount('#app') ``` 3. 在您的Vue组件中,使用element-ui的数据组件。例如,在您的路由组件中,您可以这样使用数据表: ```html <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: '2021-01-01', name: '张三', address: '北京市' }, { date: '2021-01-02', name: '李四', address: '上海市' }, { date: '2021-01-03', name: '王五', address: '广州市' } ] } } } </script> ``` 以上就是在Vue3的路由跳转视图中使用element数据表的步骤。希望这些能够帮助到您!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值