cms-table

简介

在使用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有两个属性：

属性名	数据类型	说明
fields	数组	用来定义每一列的属性
data	数组	表格的数据源

以下是一个简单的示例：

<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中的对象可被支持的所有属性以及说明：

属性名	数据类型	是否必填	说明	示例
width	数值	否	列宽度，不填就自适应	width: 60
type	字符串	否	列类型，目前仅支持 selection（复选框）和 index（序号列）	type: 'selection'
label	字符串	未设置type时必填	列标题（表头）	label: '姓名'
prop	字符串	未设置type时必填	数据源对象的渲染字段	prop: 'name'
filter	函数	否	数据过滤器，如果需要对数据做处理，请传入此函数并返回数据处理结果	filter: val => val.trim()
template	字符串	否	列模板，如输入框、操作按钮等，受支持的模板请参见下表	template: 'text-button'
operateCallback	函数	否	列模板操作回调函数，用户在列模板内操作会回调此函数，未设置template则不支持	operateCallback: (index, event, row) => {}
maxLength	数值	否	当template为input时，定义输入框的最大字符数	maxLength: 10
placeHolder	数值	否	当template为input时，定义输入框的提示文字	placeHolder: '请输入'
style	对象	否	当template为image时，定义图片容器的内联样式	style: { borderColor: '2px' }
target	字符串	否	当template为link时，定义链接打开的窗口类型，默认为_blank	target: 'self'
text	字符串	否	当template为link时，定义链接的显示文本，默认显示原始链接	text: '点击查看'
btns	数组	否	当template为button-group时，定义每个按钮的类型、文本等属性	btns: [{ size: 'small', label: '保存', flag: 'save' }]
customTemplate	对象	否	自定义列模板，请设置已导入到当前页面的vue组件	customTemplate: MyComponent

template 列模板

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

模板值	模板名称	事件类型	展示形式
text-button	文本按钮	add	一个蓝色的文本按钮，不支持换行
link	超链接	无	一个超链接文本，支持换行
input	输入框	change	一个输入框，会对数据源进行v-model绑定
image	缩略图	tap	一个图片，默认宽60像素，可自定义样式
edit-button	操作按钮	edit, delete	一个编辑按钮和一个删除按钮
button-group	按钮组	自定义flag，默认为click	按钮组，需要自定义各个按钮的属性

customTemplate 自定义列模板

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