vue翻页表格

最新推荐文章于 2024-02-19 15:49:11 发布

原创最新推荐文章于 2024-02-19 15:49:11 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #elementui

基于element-plus

父组件

<style scoped>
.father {
  height: 100%;
  width: 100%;
  /*display: flex;*/
//align-items: center; //justify-content: center; position: absolute;
  top: 20%
}

.dy {
  position: absolute;
  width: 50%;
}

.el-pagination {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -40%);

}
</style>

<template>
  <div class="father">
    <dy :table-data=number.arry />
    <el-pagination background layout="prev, pager, next"
                   :total="100"
                   @current-change="gets"

    />
  </div>
</template>

<script setup>
import {reactive} from "vue";
import dy from './table.vue'
const number=reactive({
  currentPageNumber:1,//页码//每页显示多少数据
  arry:[]
})
//获取当前页码
const gets = (value) => {
 number.arry.splice(0)
  number.currentPageNumber=value
  console.log(value)
  //首页内容
  if(number.currentPageNumber===1){
  for(let i=0;i<5;i++){
     number.arry.push({date:'12',
       name:'第1页',
       address:'33'})
  }
  }
  else{
    let num=value;
    for(let i=num;i<num+5;i++){
      number.arry.push({date:'12',
        name:'第'+num+'页',
        address:'33'})
    }
  }
}
gets(1)
</script>

子组件

<style scoped>
.el-table{
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
</style>
<template>
  <el-table  :data="tableData"  border style="width: 70%">
    <el-table-column prop="date" label="Date" width="" />
    <el-table-column prop="name" label="Name" width="" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
 defineProps({
       tableData:Array
     }
 )

</script>