cms-table v1.0.3

简介

在使用VUE开发后台类型的项目时，我们通常会选择Element-UI来搭建界面，而后台类型的项目用的最多的组件就是表格了，我们经常使用el-table来展示一组数据，但我们发现很多页面的开发都是在做重复性的工作，因此这个通用表格组件为你提供了一种通过JSON数据配置来快速开发表格的方案。

依赖

• Vue
• Element-UI

安装

$ npm install cms-table

效果图

使用

cms-table是基于Element-UI二次封装的通用组件，使用前请务必导入Element以及样式模板。

全局引入

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import cmsTable from 'cms-table' // 导入cms-table
 
Vue.use(Element)
Vue.use(cmsTable) // 全局注册cms-table

在你的页面中使用cms-table组件

cms-table有两个属性：

以下是一个简单的示例：

<template>
    <div>
        <cms-table :fields="fields" :data="list"></cms-table>
    </div>
</template>

<script>
export default {
	data () {
        return {
            fields: [
                { width: 60, type: 'selection' },
                { width: 80, type: 'index' },
                { label: '姓名', prop: 'name', filter: val => val.trim() }
            ],
            list: [
                { name: '张三', age: 16, school: '清华大学' },
                { name: '李四', age: 18, school: '北京大学' },
                { name: '王五', age: 20, school: '复旦大学' }
            ]

        }
    }
}
</script>

fields 列属性

下面列出了fields中的对象可被支持的所有属性以及说明：

template 列模板

下面列出了template受支持的列模板类型：

customTemplate 自定义列模板

如果以上列模板没有你需要的展示形式，可以开发自定义列模板，开发说明请等待更新......