vue-easytable使用

大熊程序猿

已于 2022-06-15 22:18:55 修改

阅读量4.2k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2019-10-06 18:48:05 首次发布

本文链接：https://blog.csdn.net/xiaoxionglove/article/details/102243721

版权

Vue 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

参考：

GitHub - Happy-Coding-Clans/vue-easytable: 🍉 Table Component/ Data Grid / Data Table.Support Virtual Scroll,Column Fixed,Header Fixed,Header Grouping,Filter,Sort,Cell Ellipsis,Row Expand,Row Checkbox ...

vue table 组件强大、灵活支持单元格合并、单元格编辑、多表头固定、多列固定、列拖动、排序、自定义列、分页、单元格编辑、全选、行展开、条件过滤、footer 汇总、导出excel、汇总 github

安装：

npm install vue-easytable --save-dev

// 引入样式
import 'vue-easytable/libs/themes-base/index.css'
// 导入 table 和 分页组件
import {VTable,VPagination} from 'vue-easytable'

// 注册到全局
Vue.component(VTable.name, VTable)
Vue.component(VPagination.name, VPagination)

新建组件：TableDemo.vue

<template>
      <div>
            <v-table
                is-vertical-resize
                :vertical-resize-offset='60'
                is-horizontal-resize
                :is-loading="tableConfig.isLoading"
                style="width:100%"
                :multiple-sort="false"
                :min-height="350"
                even-bg-color="#f2f2f2"
                :columns="tableConfig.columns"
                :table-data="tableConfig.tableData"
                row-hover-color="#eee"
                row-click-color="#edf7ff"
        ></v-table>
            <v-pagination :total="total" :page-size="pageSize" @page-change="pageChange" @page-size-change="pageSizeChange"></v-pagination>
      </div>
</template>
<script>
    // 引入样式
    import 'vue-easytable/libs/themes-base/index.css'
    import axios from '../config/axios.js'
    export default {
        data: function() {
            return {

                total: 0,
                pageSize: 10,
                pageIndex: 1,
                tableConfig: {
                    isLoading: true,
                    tableData: [],
                    columns: [{
                        field: 'name',
                        title: '姓名',
                        width: 80,
                        titleAlign: 'center',
                        columnAlign: 'center',
                        isResize: true
                    }, {
                        field: 'tel',
                        title: '手机号码',
                        width: 80,
                        titleAlign: 'center',
                        columnAlign: 'center',
                        isResize: true
                    }]
                }

            }
        },
        methods: {
            pageChange(pageIndex) {
                this.pageIndex = pageIndex;
                this.loadData();
            },
            pageSizeChange(newPageSize) {
                this.pageSize = newPageSize;
                this.loadData();
            },
            loadData() {
                this.tableConfig.isLoading = true;
                var context = this;

                axios.post('/tables', JSON.stringify({
                        pageIndex: this.pageIndex,
                        pageSize: this.pageSize
                    }))
                    .then(function(response) {
                        context.tableConfig.isLoading = false;
                        context.total = response.data.total;
                        context.tableConfig.tableData = response.data.data;

                        console.info(response.data.data);

                    })
                    .catch(function(error) {
                        context.tableConfig.isLoading = false;
                        console.debug(error);
                    });
            }
        },
        created() {
            this.total = 10000;
            this.loadData();
        }
    }
</script>
<style scoped>

</style>

后台Api:TableController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace Vue.Api.Controllers
{
    [Route("api/tables")]
    [ApiController]
    public class TableController : ControllerBase
    {
        [HttpPost]
        public IActionResult GetPageList([FromBody] TablePageSpecification specification)
        {
            var pageResult = new PageResult<Person>();
            pageResult.Total = 100;
              var persons = new List<Person>();
            for (int i = 0; i < 100; i++)
            {
                persons.Add(new Person
                {
                    Id = i,
                    Name = $"LI{i}",
                    Tel = $"+86 { 1828 * i}"
                });
            }

            pageResult.Data = persons.Skip((specification.PageIndex- 1) *specification.PageSize).Take(specification.PageSize).ToList() ;

            return Ok(pageResult);
        }
    }

    public class TablePageSpecification
    {
        public int PageIndex { get; set; }
        public int PageSize { get; set; }
    }

    public class PageResult<T>
    {
        public long Total { get; set; }
        public List<T> Data { get; set; }
    }

  
 
    public class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Tel { get; set; }
    }
}

运行效果：