vue在切换下一页在切回来的时候,页面上编辑的数据怎么保存

方法如下：

在子组件的外边包上一个的标签；

如果是路由的方式，那么就在外边包上

或者是在定义路由组件的时候在routes[]里边的元数据meta中定义。

element table 多选表格，表格中有 *** 作按钮的话，获取当前勾选行的数据，大家都知道用slot-scope="scope" 来获取，但如果要实现的功能是在表头上了，那要怎么获取当前前勾选的这一行的数据呢？这时我们可以用表格中提供的@selection-change="handleSelectionChange" 里的 multipleSelection来实现。

element 多选表格

利用表格 type="selection" 属性实现，这种方法不用在data里定义一个全局数组，而定义的是用来接收你当前循环的某个参数，这样你要获取多少个参数就是单独写多少次。

2多个tabs标签页请求多个接口

需求描述：

有三个可切换的tabs页签，红色的两个框里的tabs页签请求的是同一个接口，但是两个页签传递的参数值不一样，橙色的框里请求的是另一个接口。通过点击不同的tabs页签去跳转页面并请求不同的接口返回的数据。默认显示最新知识页签的数据。

html页面：

最新知识和热门知识调的是同一个接口，排行榜是一个接口。

接口：

最新知识和热门知识的接口给后端传的参数rankingType（直接传汉字 ）："最新知识" or "热门知识"。排行榜的接口给后端传的参数rankingListType ："下载排行"。

实现：

在api文件里新建相关文件存储接口代码

get请求用拼接get请求传参用param、post请求传参用data

/

最新知识、热门知识

/

export function knowledgeListDetail(param) {

return request({

url: '/api/knowledge/ranking/listDetail' + 'rankingType=' + paramrankingType,

headers: {

isToken: true,

'Access-Control-Allow-Origin':'',

},

method: 'get',

})

}

/

排行榜

/

export function rankingListDetail(param) {

return request({

url: '/api/knowledge/rankingList/listDetail' + 'rankingListType=' + paramrankingListType,

headers: {

isToken: true,

'Access-Control-Allow-Origin':'',

},

method: 'get',

})

}

登录后复制



在html引入element组件里tabs页签的代码，根据具体需求更改代码。

<template>

<!-- 最新知识 S -->

<div

class="text-bar know"

style="display: flex; justify-content: space-between"

>

<div class="tabs" style="width: 95%">

<el-tabs

v-model="activeNameLatestKnowledge"

@tab-click="handleLatestKnowledge"

>

<el-tab-pane label="最新知识" name="latestKnowledgeFirst">

<div class="list">

<div

class="flex list-item"

v-for="(item, index) in latestKnowledgeRows"

:key="index"

>

<div class="title">

<div

@click="jump('/special/detailed')"

style="vertical-align: middle"

>

<img

style="vertical-align: middle"

src="//assets/filepng"

alt=""

/>

{{ itemtitle }}

</div>

<div class="msg">{{ itemreleaseTime }}</div>

</div>

</div>

</div>

</el-tab-pane>

<el-tab-pane label="热门知识" name="latestKnowledgeSecond">

<div class="list">

<div

class="list-item flex"

v-for="(item, index) in popularKnowledgeRows"

:key="index"

>

<div class="flex title">

<div

@click="jump('/special/detailed')"

style="vertical-align: middle"

>

<img

style="vertical-align: middle"

src="//assets/filepng"

alt=""

/>

{{ itemtitle }}

</div>

<div class="msg">{{ itemreleaseTime }}</div>

</div>

</div>

</div>

</el-tab-pane>

<el-tab-pane label="排行榜" name="latestKnowledgeSecondThird">

<div class="list">

<div

class="list-item flex"

v-for="(item, index) in rankingListRows"

:key="index"

>

<div class="flex title">

<div

@click="jump('/special/detailed')"

style="vertical-align: middle"

>

<img

style="vertical-align: middle"

src="//assets/filepng"

alt=""

/>

{{ itemtitle }}

</div>

<div class="msg">{{ itemreleaseTime }}</div>

</div>

</div>

</div>

</el-tab-pane>

</el-tabs>

</div>

<div style="margin-top: 30px">

<el-link

class="title-msg"

:underline="false"

@click="jump('/strategyThinkManage')"

>更多 <i class="el-icon-arrow-right"></i

></el-link>

</div>

</div>

<!-- 最新知识 E -->

</template>

<script>

export default {

data() {

return {

activeNameLatestKnowledge: "latestKnowledgeFirst", // 默认显示最新知识数据页面

latestKnowledgeRows: [], // 最新知识数据

popularKnowledgeRows: [], //热门知识数据

rankingListRows: [], //排行榜数据

};

},

}

</script>

登录后复制



引入api

import { knowledgeListDetail, rankingListDetail } from "@/api/homejs";

登录后复制

在methods通过if判断（ifelse语句）去进行接口调试。

在created里调用接口（一点击直接出现此页签的数据）

<script>

export default {

methods: {

/

最新知识、热门知识、排行榜

/

handleLatestKnowledge(tab) {

if (tabname != "latestKnowledgeSecondThird") {

if (tabname == "latestKnowledgeFirst") {

let rows = {

rankingType: "最新知识",

};

knowledgeListDetail(rows)then((res) => {

if (resrows) {

// 渲染数据

thislatestKnowledgeRows = resrows;

}

});

} else {

let rows = {

rankingType: "热门知识",

};

knowledgeListDetail(rows)then((res) => {

if (resrows) {

thispopularKnowledgeRows = resrows;

}

});

}

} else {

let rows = {

rankingListType: "下载排行",

};

rankingListDetail(rows)then((res) => {

if (resrows) {

thisrankingListRows = resrows;

}

});

}

},

created() {

thishandleLatestKnowledge({ name: "latestKnowledgeFirst" });

},

};

</script>

登录后复制



vuejs

ui

javascript

红警单机版手游下载

精选推荐

广告



基于vueelementui的后台管理系统动态tabs实践

19下载·0评论

2019年8月10日

使用vue实现tab *** 作

165阅读·0评论·0点赞

2017年7月3日

vue不同组件之间接口先后调用的顺序

1681阅读·0评论·0点赞

2021年2月4日

el-tabs 实现多个 el-table表格 分页 *** 作

1215阅读·0评论·0点赞

2022年5月27日

使用element中el-table动态增减表头列的时候出现抖动闪动的问题

4889阅读·1评论·4点赞

2020年7月6日

vue3使用Element-plus Tabs 标签页的点击事件

4976阅读·5评论

转接代码错误。vue3切换tab页签时由于这个转接代码错误导致query参数丢失，需要修改这个代码。vue3提供了更好的性能，更小的捆绑包体积，更好的TS集成，用于处理大规模用例的新API。

watch: {

    $route(to, from) {

      consolelog(to);

      if (topath == '/main/home') {

        thisactived = 0

      } else if (topath == '/main/lesson') {

        thisactived = 1

      } else if (topath == '/main/my') {

        thisactived = 2

      }

    }

  },

在vue的开发过程中，常常需要 *** 作表格元素，比如数据的分页呈现，某行数据的修改、删除等 *** 作，不可避免的需要 *** 作某行数据，本文描述了这一过程

首先，我们全局引入ant-design-vue，本文简称为antd，为蚂蚁金服推出的一款UI组件，在mainjs中添加即可。

下面我们使用antd的表格组件，在dom元素中定义表格相关属性及数据的来源信息等。

dataSource为数据的来源，格式为数组，我们通过ajax的方式请求后台获取数据。

列信息需要和返回对象的属性对应，如果有些列不是对象的属性，比如 *** 作列，可以通过增加scopedSlots的方式。

名称为action的插槽(slot)，需要在dom元素中进行设置，添加在a-table的子元素中。slot-scope="text,record"中的record就是这行的数据值。

我们通过F12进行调试，将record的信息进行打印，不难发现，record确实记录了这行的数据信息

以上就是关于vue在切换下一页在切回来的时候,页面上编辑的数据怎么保存全部的内容，包括:vue在切换下一页在切回来的时候,页面上编辑的数据怎么保存、vue element ui 表格 selection-change方法使用(获取某行数据)、vue点击tab时调用接口等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！