Vue element表格分頁數據加載示例

一、element ui表格分頁數據加載示例

1.視圖

<!-- 列表定義 -->
<el-table
v-loading="loading"
:data="tableData"
border
stripe
style="width:100%;">
<el-table-column prop="Title" label="標題"> </el-table-column>
<el-table-column label="是否刪除"> 
    <template slot-scope="scope">
    <el-tag v-if="scope.row.IsDelete" type="success">是</el-tag>
    <el-tag v-else type="warn">否</el-tag>
    </template>
</el-table-column>
<el-table-column prop="CreateTime" label="日期" > </el-table-column>
</el-table>
<!-- 分頁條 -->
<div class="block" style="margin-top:20px;">
    <el-pagination
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage4"
    :page-sizes="[2, 20, 30, 50,100]"
    :page-size="pageSize"
    layout="total, sizes,prev, pager, next, jumper"
    :total="total">
    </el-pagination>
</div>

2. js

export default {
  data() {
    return {
      loading: true
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每頁 ${val} 條`);
      this.pageSize = val;
      this.currentPage4 = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`當前頁: ${val}`);
      this.currentPage4 = val;
      this.getList();
    },
    //獲取刷新列表數據
    getList() {
      var _this = this;
      _this.loading = true;
      $.get(
        "http://localhost:55000/api/article/getlist",
        {
          pageIndex: _this.currentPage4,
          pageSize: _this.pageSize
        },
        data => {
          console.info(data);
          _this.loading = false;
          _this.tableData = data.list;
          _this.total = data.total;
        }
      );
    }
  },
  data() {
    return {
      currentPage4: 4,
      pageSize: 2,
      total: 400,
      loading: false,
      tableData: []
    };
  },
  created() {
    this.getList();
  }
};

顯示結果：

更多：

Vue element 表格獲取選中項操作

Vue element 二級菜單綁定示例

Vue中路由管理器Vue Router使用介紹（三）