Vue+ElementUI table表格+pagination分页进行动态绑定功能

效果图:
效果图

分页部分代码

<pagination
   v-show="total>0"
   :total="total"
   :page.sync="queryParams.pageNum"
   :limit.sync="queryParams.pageSize"
   @pagination="getList"
/>
<script>
export default {
  data() {
    return {
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      }
  },
   created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      let queryParams = this.addDateRange(this.queryParams, this.entrustDateRange, "EntrustDate");
      queryParams = this.addDateRange(this.queryParams, this.consultDateRange, "ConsultDate");
      listTestSample(queryParams).then(response => {
        response.rows.forEach(item => {
          item.dropSampleList = []
          this.$set(item, 'droploading', false)
        })
        this.testSampleList = response.rows;
        let row = response.rows.filter(item => item.id === this.expandRowKeys[0])[0]
        if (row){
          // console.log(row,"let row")
          this.getTestSampleTable(row)
          this.total = response.total;
          this.loading = false;
        }else{
          this.total = response.total;
          this.loading = false;
          // console.log(response)
        }
      });
    },
}
</script>

属性说明

v-show:是否显示此部分内容

pageNum:当前页码

pageSize:每页显示数据条数

total:数据总数量

pagination:列表绑定

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很抱歉,作为AI语言模型,我无法提供代码编写服务。但是,我可以为您提供一些指导和建议。 首先,您需要安装Vue3、TypeScript和ElementUI。然后,您可以创建一个Vue组件,该组件包含一个分页表格。您可以使用ElementUI的el-table和el-pagination组件来实现这个分页表格。 在组件中,您需要义一些数据,例如表格数据、当前页码、每页显示的行数等。您还需要义一些方法来处理分页和表格数据的加载。 以下是一个简单的示例: ```html <template> <div> <el-table :data="tableData" border> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRows" ></el-pagination> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { ElTable, ElTableColumn, ElPagination } from 'element-plus'; export default defineComponent({ name: 'PaginationTable', components: { ElTable, ElTableColumn, ElPagination }, data() { return { tableData: [], currentPage: 1, pageSize: 10, totalRows: , }; }, methods: { async loadData() { // load data from server based on currentPage and pageSize // update tableData and totalRows }, handleCurrentChange(page: number) { this.currentPage = page; this.loadData(); }, }, mounted() { this.loadData(); }, }); </script> ``` 在这个示例中,我们使用了ElementUI的el-table和el-pagination组件来实现分页表格。我们义了一些数据,例如表格数据、当前页码、每页显示的行数和总行数。我们还义了一个loadData方法来加载表格数据,并在mounted钩子中调用它。我们还义了一个handleCurrentChange方法来处理页码变化事件,并在el-pagination组件中使用它。 当用户点击页码或更改每页显示的行数时,handleCurrentChange方法将被调用,并更新currentPage和pageSize数据。然后,loadData方法将被调用,从服务器加载新的表格数据,并更新tableData和totalRows数据。最后,el-pagination组件将根据这些数据重新渲染分页器。 当然,这只是一个简单的示例。您可能需要根据您的具体需求进行更改和扩展。但是,这个示例应该可以帮助您入门Vue3、TypeScript和ElementUI分页表格的编写。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值