静态elementUI 表格+分页器展示数据

最新推荐文章于 2024-08-12 20:05:40 发布

MFG_666

最新推荐文章于 2024-08-12 20:05:40 发布

阅读量1k

点赞数 1

分类专栏： vue 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/m0_49714202/article/details/121760766

版权

本文展示了如何在Vue.js应用中使用Element UI组件库来创建带有分页和自定义操作列的表格。通过`el-table`和`el-pagination`组件，实现了数据的分页展示，并通过`formatter`方法格式化创建人信息。此外，还包含了一个进入选项的按钮，点击后会打印对应行的数据ID。

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

<template>
  <div>
    <el-table
            ref="filterTable"
            :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)">
      <el-table-column
              prop="date"
              label="创建日期"
              sortable
              width="180"
              column-key="date">
      </el-table-column>   
      <el-table-column prop="createBy" label="创建人" :formatter="createBy"></el-table-column>
      
      <el-table-column
              align="left">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  @click="handleEnter(scope.$index, scope.row)">Enter</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination backgr