Package Exports

vue-easytable
vue-easytable/libs/themes-base/index.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-easytable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-easytable

介绍

基于 vue2 的组件。API文档

主要功能

自适应，可以随着浏览器窗口改变自动适应
固定列，表头固定
列宽拖动（默认支持）
排序，支持单个、多个字段排序
自定义列、自定义单元格样式、loading效果等
自带分页组件

安装

npm install vue-easytable --save-dev

使用（更多功能）

import 'vue-easytable/libs/themes-base/index.css'
import {VTable,VPagination} from 'vue-easytable'

Vue.component(VTable.name, VTable)
Vue.component(VPagination.name, VPagination)

<template>
    <v-table
            :width="1100"
             :columns="tableConfig.columns"
             :table-data="tableConfig.tableData"
    ></v-table>
</template>

<script>

    export default{
        data() {
            return {
                tableConfig: {
                    tableData:[
                              {"name":"tom","gender":"男","job":"the cat"},
                              {"name":"jerry","gender":"男","job":"the mouse"},
                              {"name":"张飞","gender":"女","job":"勇而有义，皆万人之敌，而为之将"}
                              ],
                    columns: [
                        {field: 'name', title:'姓名', width: 80, titleAlign: 'center',columnAlign:'center'},
                        {field: 'gender', title: '性别', width: 80, titleAlign: 'center',columnAlign:'center'},
                        {field: 'job', title: '职业', titleAlign: 'center',columnAlign:'left'}
                    ]
                }
            }
        }
    }
</script>

参考

饿了么ui组件