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();
  }
};

显示结果：

二、后台接口代码

[HttpGet("GetList")]
//获取文章列表
public object GetList(int cateid = 1, int pageIndex = 1, int pageSize = 2)
{
    var query = _Context
        .Article
        .Where(q => q.CateId == cateid);

    int total = query.Count();
    query = query.OrderByDescending(q => q.CreateTime);

    var list = query.Skip((pageIndex - 1) * pageSize)
        .Take(pageSize)
        .ToList();

    Thread.Sleep(500);
    return new
    {
        list = list,
        total = total
    };
}

Vue element 表格获取选中项操作

Vue element 二级菜单绑定示例

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

来源：oschina

链接：https://my.oschina.net/u/2332115/blog/2248876

标签

vue-router

Vue.js

element