标签：26 vue res value 列表 3.2 跳转 page

一，js代码:

OrderList.vue:

<template>
  <div>
    <el-table
        :data="tableData"
        border
        row-key="UserId"
        stripe
        style="width: 100%"
    >
      <el-table-column label="订单ID" min-width="100" prop="orderId"></el-table-column>
      <el-table-column label="订单编号" min-width="100" prop="orderSn"></el-table-column>
      <el-table-column label="下单时间" min-width="100" prop="addTime"></el-table-column>
      <el-table-column label="订单金额" min-width="100" prop="allPayPrice"></el-table-column>
      <el-table-column label="订单状态" min-width="100" prop="orderStatusStr"></el-table-column>
      <el-table-column fixed="right" label="操作" width="280">
        <template  v-slot="scope">
          <router-link :to="'/order/orderdetail?orderid='+scope.row.orderId"  class="logo-url">
            <el-button style="margin-left:5px;" icon="el-icon-edit"  size="small" type="primary">订单详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <!--  page -->
    <el-pagination
        :current-page="page"
        :page-size="pagesize"
        :page-sizes="[1, 2, 5, 10]"
        :style="{float:'right',padding:'20px'}"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>
 
<script>
import {ref,onUnmounted} from "vue";
import {ElMessage} from "element-plus";
import {apiOrderList} from "@/api/api";
import { useRouter} from "vue-router";
export default {
  name: "OrderList",
  setup() {
    //console.log();
    const tableData = ref([]);
    const page = ref(0);
    const pagesize = ref(0);
    const total = ref(0);
    const router = useRouter();
 
    //从sessionStorage得到当前要显示的页数
    const getPage = () => {
     let sessionPage = sessionStorage.getItem('orderListPage');
      if (sessionPage != null) {
        page.value = sessionPage
      } else {
        page.value = 0
      }
    }
    getPage();
 
    //如果不是详情页，则清除记录的当前页码
    onUnmounted(() => {
      if (router.currentRoute.value.path == "/order/orderdetail") {
          //不清除
      } else {
        sessionStorage.removeItem('orderListPage')
      }
    })
 
    //得到商品列表
    const getorderlist = async () => {
      apiOrderList({
        page:page.value,
        pagesize:pagesize.value,
      }).then(res => {
        console.log("this is res:")
        console.log(res)
        if (res.code == 0) {
 
          console.log(res.data);
          tableData.value = res.data.list;
          page.value=res.data.page;
          pagesize.value=res.data.pagesize;
          total.value = res.data.total;
 
        } else {
          //alert();
          ElMessage.error("数据获取失败:"+res.msg);
        }
      }).catch((error) => {
        // error
        console.log(error)
      })
    };
    getorderlist();
 
    //翻页:修改每页数量
    const handleSizeChange = (val) => {
      pagesize.value = val
      getorderlist()
    }
 
    //翻页:修改当前页，注意写入到sessionStorage
    const handleCurrentChange = (val) => {
      page.value = val
      sessionStorage.setItem('orderListPage',val);
      getorderlist()
    }
 
    return {
      tableData,
      page,
      pagesize,
      total,
      handleSizeChange,
      handleCurrentChange,
    }
  }
}
</script>
 
<style scoped>
 
</style>

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，测试效果

1,跳转到详情页 在列表页: 进入详情: 返回后仍然是第二页   2,跳转到其他页面: 再进入订单列表: 此处默认已恢复显示第一页

三，查看vue.js的版本:

liuhongdi@lhdpc:/data/vue/demo1$ npm list vue
demo1@0.1.0 /data/vue/demo1
├─┬ @vue/cli-plugin-babel@4.5.15
│ └─┬ @vue/babel-preset-app@4.5.15
│   └── vue@3.2.26 deduped
├─┬ element-plus@1.2.0-beta.6
│ ├─┬ @element-plus/icons-vue@0.2.4
│ │ └── vue@3.2.26 deduped
│ ├─┬ @vueuse/core@7.4.1
│ │ ├─┬ @vueuse/shared@7.4.1
│ │ │ └── vue@3.2.26 deduped
│ │ ├─┬ vue-demi@0.12.1
│ │ │ └── vue@3.2.26 deduped
│ │ └── vue@3.2.26 deduped
│ └── vue@3.2.26 deduped
└─┬ vue@3.2.26
  └─┬ @vue/server-renderer@3.2.26
    └── vue@3.2.26 deduped 

 

标签：26,vue,res,value,列表,3.2,跳转,page
来源： https://www.cnblogs.com/architectforest/p/15832860.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。