Vue学习记录

最新推荐文章于 2024-10-17 09:40:47 发布

海边微风起°

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量126

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_43751862/article/details/117109381

版权

本文记录了使用Vue.js的iView组件库进行Table分页的实现，包括设置Table和Page组件的参数，以及数据的动态加载。同时，介绍了vue-router的页面跳转方法，如通过`this.$router.push`进行路径和参数传递。讨论了query和params传参的区别，并给出了相应的代码示例。

摘要由CSDN通过智能技术生成

Vue爬坑记录

此贴用来记录自己初学Vue过程中遇到的问题，如果有错，欢迎指正，共同学习。

一.iView Table和page组件

1.Table分页

首先是template

<Table ref="selection" :columns="columns" :data="tableData" @on-selection-change="selectTable" stripe/>
<div style="display: flex; justifyContent: flex-end; paddingTop: 15px">
  <Page :total="pageTotal" :page-size="pagesize" show-total size="small" @on-change="changePage" />
</div>

各参数的含义：

:total 数据的总条数
:page-size 每页显示的条数
show-total 显示总条数
@on-change改变页码时的方法，返回参数是当前页。

export default {
  name: 'test',
  components: {
    Tables
  },
  data () {
    return {
      pageSize:10,
      pageTotal:0,
      testDatas:[
	  {'name':'Tom','age':8},
	  {'name':'Jerry','age':9},
	  // 此处省略100条...
	  {'name':'Marry','age':10}
	  ],
	  columns: [
	  	{ type: 'selection', width: 60, align: 'center' },
        { title: '姓名', key: 'name', align: 'center',width: 90},
        { title: '年龄', key: 'age', align: 'center', width: 90, sortable: true },
      ],
      tableData:[],
     }
  }
  methods:{
    initData(){
      this.pageTotal = this.testDatas.lenth
      // 初始化显示
      if(this.pageTotal<this.pageSize){
        this.tableData = this.testDatas
      }else{
        this.tableData = this.testDatas.slice(0,this.pageSize)
      }
    }
    changePage (index) {
      var _start = (index - 1) * this.filter.pagesize
      var _end = index * this.filter.pagesize
      this.tableData = this.stashDataList.slice(_start, _end)
    },
  },
  created () {
    this.initData()
  }

实际操作中，真实的数据可通过请求后端接口得到，在给table传数据前，替换testDatas即可。

二.vue-router

页面跳转可以通过this.$router.push(args)来实现。arg参数可以是对象也可以是字符串。

// 字符串
	this.$router.push('/alert')
// 对象 
	this.$router.push({path:'/alert/' + this.id})
	this.$router.push({path: '/login?url=' + this.$route.path});
// query相当于发了一次GET请求，参数会显示在url中
	this.$router.push(
	  // 带查询参数，变成/alert/order?a=1
	  {path: '/alert/order', query: {a:"1"}}
	)

在routers.js中配置路由

{
  path: 'alert/:id',
  name: 'alert_page',
  meta: {
    hideInMenu: true,
    notCache: true
  },
  component: () => import('@/view/../test.vue')
}