vue写分页器

最新推荐文章于 2022-10-10 17:05:52 发布

原创最新推荐文章于 2022-10-10 17:05:52 发布 · 310 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

💥Vue💥 专栏收录该内容

36 篇文章

订阅专栏

本文档展示了如何使用Vue.js构建一个带有日期、姓名等列的表格，并实现数据分页和操作列，包括查看和编辑功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说上代码

 <template>
  <div>
        <el-main>
          <el-table :data="showList" :border="true" stripe style="width: 100%">
            <el-table-column fixed prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="province" label="省份"></el-table-column>
            <el-table-column prop="city" label="市区"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column prop="zip" label="邮编"></el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>

    <el-pagination
      @current-change="Sorter"
      background
      small
      layout="prev, pager, next"
      :page-size="6"
      :total="tableData.length"
    ></el-pagination>
  </div>
</template>
 
 <script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
        },
      ],
      pag: 1,
      showList: [],
    };
  },
  mounted() {
    var start = (this.pag-1)*5
    var end = this.pag*5-1
    for(var i =start;i<=end;i++ ){
      this.showList.push(this.tableData[i])
    }
  },
  methods: {
    Sorter(pa) {
      this.showList = [];
        console.log(pa)
        var start = (pa-1)*5
        var end = pa*5-1
        for(var i =start;i<=end;i++ ){
          this.showList.push(this.tableData[i])
        }
    },

    handleClick(row) {
      console.log(row);
    },
  },
};
</script>
 
 <style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  /* line-height: 60px; */
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  /* line-height: 200px; */
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}
</style>