使用说明
em-element-ui该组件是基于Vue和element-ui开发，该组件主要用于快速开发列表的增删查改功能，只需配置页面上显示的字段，并对各个字段加上对应的显示规则即可显示。
安装
npm install element-ui -S
npm install em-element-ui -D
安装使用
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element)
import emUI from 'em-element-ui'
Vue.use(emUI);
:::
列表属性描述
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| tableListName |
列表对应名称 |
string |
必填 |
— |
| source |
table表数据的来源。data表示自定义数据；query是通过URL动态获取，如：table queryURL |
string |
data/query |
query |
| sourceData |
source值为data时使用 |
array |
— |
[] |
| rowKey |
表示table对应的字段显示下三角 |
string |
— |
- |
| mode_list |
修改和编译列表时，各个字段显示在不同的mode区域 |
array |
— |
[] |
| page_status |
控制显示内容，1：搜索条件；2：选择显示列；4：表格；8：分页功能；16：增加按钮；32：删除按钮；64：全局搜索控件 |
int |
— |
12 |
| page_column |
列表对应字段 |
array |
必填 |
- |
| select_list |
列表中存在select组件，使用key-value对应 |
object |
— |
- |
| composeParam |
删除主键 |
array |
— |
['id'] |
| buttonsList |
自定义操作按钮{type: 'info',icon: '',event: 'import',name: '导入'} |
array/function |
— |
- |
| queryParam |
自定义list分页功能，格式：[{type: 1,key: 'page',value: 'pageNum'},{type: 1,key: 'size',value: 'pageSize'},{type: 2,key: 'param',value: {}}] |
array |
— |
[{type: 1,key: 'page',value: 'pageNum'},{type: 1,key: 'size',value: 'pageSize'}] |
| dialogFooter |
自定义dialog按钮，正在开发... |
array |
— |
['id'] |
| axios |
自定义请求头文件和超时时间,axios定义的参数 |
object |
— |
{timeout: 5000, headers: {}} |
| optRules |
删除前校验规则，如：isRules: true,_method: 'post',_url: '/',params: {busCode: function(row,field){//根据key获取删除记录对应的值},pageNum: 1,pageSize: 10}，_axios: {},message: '该记录在数据中有关联，请先删除关联数据！ |
object |
— |
- |
| responseSuccess |
response返回字段校验{key:'code', value: 0, message: 'message'} |
object |
— |
- |
列表事件
| 事件名 |
说明 |
参数 |
| onListEvent |
用于用户自定义事件，扩充接口。type为事件类型，row操作的行 |
type, row |
| onReqParams |
用于用户自定义参数，扩充接口。type为类型，obj为list对象，callback为回调函数用来输出自定义参数 |
type, row, callback |
table queryURL
queryURL是一个自定义请求参数，以key-val方式传递，key代表是请求事件，如：add/edit/list/del和自定义事件，注意：key为name时，是新增和编辑左上角title提示；val为对象，描述如下：
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| url | 请求地址 | string | - | - |
| method | 请求方式 | string | — | - |
| name | 删除时回显字段 | string | — | - |
| isArray | 多字段组合删除时，支持多个删除 | string | — | - |
| success | response返回字段校验{key:'code', value: 0, message: 'message'} | object | — | - |
mode_list
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| ou |
区域的主键 |
int |
- |
- |
| name |
区域的名称 |
string |
— |
- |
select_list
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| key |
字段的名字 |
string |
- |
- |
| value |
字段值，array：为静态值,如：[{value: 0, label: '禁用'},{value: 1, label: '启用'}]；object：为动态获取值，如：{url: '/',props: {value: 'oid', label: 'name'},node:['data', 'list'],params: {page: 1, size: 10}} |
array/object |
— |
- |
page_column table
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| field |
字段 |
string |
- |
- |
| stype |
显示信息类型,值：checkbox,opt,tag,list-tag,link,switch,image,list,mapping |
string |
— |
- |
| name |
字段名称 |
string |
— |
- |
| fixed |
字段是否固定 |
string |
left/right |
- |
| width |
字段宽度 |
int |
— |
- |
| action |
动态请求该字段值 |
string |
— |
- |
| formatter |
根据key-val获取对应的值 |
string |
— |
- |
| sort |
字段是否排序 |
boolean/string |
true/false/custom |
false |
| ispush |
提交表单时，该字段是否提交 |
boolean |
— |
false |
| align |
显示位置 |
string |
left/center/right |
left |
| hide |
是否隐藏 |
boolean |
— |
false |
| show |
用于控制增加和编辑form表单使用，详细情况：mode_list add/edit |
object |
— |
- |
| search |
用于控制查询条件，详细情况：mode_list search |
object |
— |
- |
| rules |
用于控制文本框合法校验，详细情况：mode_list rules |
array |
— |
- |
| success |
response返回字段校验{key:'code', value: 0, message: 'message'} |
object |
— |
- |
mode_list add/edit
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| field |
如果该字段存在，则一个该字段给后台，如果没有默认以list为准 |
string |
- |
- |
| parent |
field字段归属于该字段 |
string |
- |
- |
| type |
文本框类型,值：hide,text,password,text-tag,select,cascader,radio,checkboxall,file,switch,date,time-picker,date-picker,textarea,texttime,dynamic,button,span,task,key-val |
string |
- |
- |
| ou |
根据mode主键显示文本框 |
int |
— |
- |
| obj |
动态获取对应的值 |
array |
— |
- |
| isDisabled |
是否在修改时，可编辑该文本框 |
boolean |
— |
false |
| remote |
动态搜索远程服务器功能 |
boolean |
— |
false |
| findKey |
搜索的字段 |
string |
— |
- |
| paramKey |
参数内参数 |
string |
— |
- |
| value |
设置默认值 |
string |
— |
- |
| placeholder |
文本框描述 |
string |
— |
- |
| action |
动态提交事件 |
string |
— |
- |
| param |
动态提交事件，解释值：{key: 'code', value: 200, filename: 'data'} |
obj |
— |
- |
| mapping |
type为select，当前字段映射显示对应字段值 |
string |
— |
- |
| success |
response返回字段校验{key:'code', value: 0, message: 'message'} |
object |
— |
- |
mode_list search
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| type |
文本框类型，值：text，date，time-picker，select，time-select，datetimerange |
string |
- |
- |
| obj |
动态获取对应的值 |
array |
— |
- |
| placeholder |
文本框描述 |
string |
— |
- |
mode_list rules
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| required |
是否必输 |
boolean |
- |
false |
| message |
错误提示消息 |
string |
— |
- |
| trigger |
触发校验 |
array/string |
blur/change |
- |
| min |
最小长度 |
int |
— |
- |
| max |
最大长队 |
int |
— |
- |
| validator |
自定义校验规则,function代表自定义方法 |
string/function |
— |
- |
DEMO演示
<template>
<div class="template-main">
<em-table-list :tableListName="'collect'" :sourceData="sourceData" :source="source" :mode_list="mode_list" :page_status="page_status" :page_column="page_column" :select_list="select_list" @onListEvent="onListEvent"></em-table-list>
</div>
</template>
<script>
export default {
name: 'collect',
computed: {},
data() {
return {
sourceData: [{
collectPartner: '10001',
businessLicense: '91110108MA01QC0B0T',
companyId: 'ENN123456789012345678',
companyName: 'test',
companyAddress: '河北廊坊',
status: 1
}],
source: 'data',
mode_list: [],
page_status: 29,
page_column: [
{field: "collectPartner", name: "企业代码", fixed: "left", width: 90,
show: {type: 'text', ou: 1, placeholder: '企业代码', default: {}},
search: {type: 'text', obj: 'collectPartner', placeholder: '企业代码', default: {}},
rules: [
{ required: true, message: '请输入名称！', trigger: 'blur' },
{ min: 5, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur'},
{ validator: function (rule, value, callback) {
}, message: '名称格式为汉字、字符和下划线', trigger:'blur'}]},
{field: "businessLicense", name: "信用代码", width: 190,
show: {type: 'text', ou: 1, placeholder: '社会信用统一代码'}},
{field: "companyId", name: "ID", width: 180},
{field: "companyName", name: "企业名称",
show: {type: 'text', ou: 1, placeholder: '企业名称'},
search: {type: 'text', obj: 'companyName', placeholder: '企业名称'}},
{field: "companyAddress", name: "企业地址",
show: {type: 'text', ou: 1, placeholder: '企业地址'}},
{field: "status", stype:'switch', name: "状态", formatter: 'status', width: 80, surl: '/', switchs: {key: 'companyId'},
show: {type: 'select', ou: 1, obj: 'status', placeholder: '状态'}},
{field: "useropts", stype:'opt', ispush: false, name: "操作", align: 'center', fixed: "right",
list:[
{ type: 'add', size: 'small', icon: '', style: '', name: '新增'},
{ type: 'edit', size: 'small', icon: '', style: '', name: '编辑'},
{ type: 'del', size: 'small', icon: '', style: 'color: red', name: '删除'},
{ type: 'exec', size: 'small', icon: '', name: '抽取'},
]}
],
select_list: {
status: [
{value: 0, label: '禁用'},
{value: 1, label: '启用'}
],
companyList: {
url: '/',
}
}
}
},
created: function() {},
methods: {
onListEvent(){
console.log(arguments)
}
}
}
</script>
手机端图片显示线和柱状图
<template>
<div class="template-main">
<em-charts :webUIType="'f2'" :chartOptions="charts"></em-charts>
</div>
</template>
<script>
export default {
name: "collect",
computed: {},
data() {
return {
charts: {
id: "charts",
class: "",
data: {
status: 2,
series: [
{
release: 0,
year: "1951 年",
sales: 38,
type: 'a'
},
{
release: 0,
year: "1951 年",
sales: 41,
type: 'b'
},
{
release: 1,
year: "1952 年",
sales: 52,
type: 'a'
},
{
release: 1,
year: "1952 年",
sales: 32,
type: 'b'
},
{
release: 2,
year: "1956 年",
sales: 61,
type: 'a'
},
{
release: 2,
year: "1956 年",
sales: 72,
type: 'b'
},
{
release: 3,
year: "1957 年",
sales: 145,
type: 'a'
},
{
release: 3,
year: "1957 年",
sales: 95,
type: 'b'
},
{
release: 4,
year: "1958 年",
sales: 48,
type: 'a'
},
{
release: 4,
year: "1958 年",
sales: 48,
type: 'b'
},
{
release: 5,
year: "1959 年",
sales: 38,
type: 'a'
},
{
release: 5,
year: "1959 年",
sales: 12,
type: 'b'
},
{
release: 6,
year: "1960 年",
sales: 38,
type: 'a'
},
{
release: 6,
year: "1960 年",
sales: 43,
type: 'b'
},
{
release: 7,
year: "1962 年",
sales: 38,
type: 'a'
},
{
release: 7,
year: "1962 年",
sales: 72,
type: 'b'
},
{
release: 8,
year: "1963 年",
sales: 38,
type: 'a'
},
{
release: 8,
year: "1963 年",
sales: 29,
type: 'b'
},
{
release: 9,
year: "1964 年",
sales: 39,
type: 'a'
},
{
release: 9,
year: "1964 年",
sales: 51,
type: 'b'
}
]//柱状图
/*series: [
{
value: 63.4,
city: "New York",
release: 0,
date: "2011-10-01"
},
{
value: 62.7,
city: "Alaska",
release: 1,
date: "2011-10-01"
},
{
value: 72.2,
city: "Austin",
release: 2,
date: "2011-10-01"
},
{
value: 58,
city: "New York",
release: 3,
date: "2011-10-02"
},
{
value: 59.9,
city: "Alaska",
release: 4,
date: "2011-10-02"
},
{
value: 67.7,
city: "Austin",
release: 5,
date: "2011-10-02"
},
{
value: 53.3,
city: "New York",
release: 6,
date: "2011-10-03"
},
{
value: 59.1,
city: "Alaska",
release: 7,
date: "2011-10-03"
},
{
value: 69.4,
city: "Austin",
release: 8,
date: "2011-10-03"
},
{
value: 55.7,
city: "New York",
release: 9,
date: "2011-10-04"
},
{
value: 58.8,
city: "Alaska",
release: 10,
date: "2011-10-04"
},
{
value: 68,
city: "Austin",
release: 11,
date: "2011-10-04"
},
{
value: 64.2,
city: "New York",
release: 12,
date: "2011-10-05"
},
{
value: 58.7,
city: "Alaska",
release: 13,
date: "2011-10-05"
},
{
value: 72.4,
city: "Austin",
release: 14,
date: "2011-10-05"
},
{
value: 58.8,
city: "New York",
release: 15,
date: "2011-10-06"
},
{
value: 57,
city: "Alaska",
release: 16,
date: "2011-10-06"
},
{
value: 77,
city: "Austin",
release: 17,
date: "2011-10-06"
},
{
value: 57.9,
city: "New York",
release: 18,
date: "2011-10-07"
},
{
value: 56.7,
city: "Alaska",
release: 19,
date: "2011-10-07"
},
{
value: 82.3,
city: "Austin",
release: 20,
date: "2011-10-07"
},
{
value: 61.8,
city: "New York",
release: 21,
date: "2011-10-08"
},
{
value: 56.8,
city: "Alaska",
release: 22,
date: "2011-10-08"
},
{
value: 78.9,
city: "Austin",
release: 23,
date: "2011-10-08"
},
{
value: 69.3,
city: "New York",
release: 24,
date: "2011-10-09"
},
{
value: 56.7,
city: "Alaska",
release: 25,
date: "2011-10-09"
},
{
value: 68.8,
city: "Austin",
release: 26,
date: "2011-10-09"
},
{
value: 71.2,
city: "New York",
release: 27,
date: "2011-10-10"
},
{
value: 60.1,
city: "Alaska",
release: 28,
date: "2011-10-10"
},
{
value: 68.7,
city: "Austin",
release: 29,
date: "2011-10-10"
},
{
value: 68.7,
city: "New York",
release: 30,
date: "2011-10-11"
},
{
value: 61.1,
city: "Alaska",
release:31,
date: "2011-10-11"
},
{
value: 70.3,
city: "Austin",
release: 32,
date: "2011-10-11"
},
{
value: 61.8,
city: "New York",
release: 33,
date: "2011-10-12"
},
{
value: 61.5,
city: "Alaska",
release: 34,
date: "2011-10-12"
},
{
value: 75.3,
city: "Austin",
release: 35,
date: "2011-10-12"
},
{
value: 63,
city: "New York",
release: 36,
date: "2011-10-13"
},
{
value: 64.3,
city: "Alaska",
release: 37,
date: "2011-10-13"
},
{
value: 76.6,
city: "Austin",
release: 38,
date: "2011-10-13"
},
{
value: 66.9,
city: "New York",
release: 39,
date: "2011-10-14"
},
{
value: 67.1,
city: "Alaska",
release: 40,
date: "2011-10-14"
},
{
value: 66.6,
city: "Austin",
release: 41,
date: "2011-10-14"
},
{
value: 61.7,
city: "New York",
release: 42,
date: "2011-10-15"
},
{
value: 64.6,
city: "Alaska",
release: 43,
date: "2011-10-15"
},
{
value: 68,
city: "Austin",
release: 44,
date: "2011-10-15"
},
{
value: 61.8,
city: "New York",
release: 45,
date: "2011-10-16"
},
{
value: 61.6,
city: "Alaska",
release: 46,
date: "2011-10-16"
},
{
value: 70.6,
city: "Austin",
release: 47,
date: "2011-10-16"
},
{
value: 62.8,
city: "New York",
release: 48,
date: "2011-10-17"
},
{
value: 61.1,
city: "Alaska",
release: 49,
date: "2011-10-17"
},
{
value: 71.1,
city: "Austin",
release: 50,
date: "2011-10-17"
},
{
value: 60.8,
city: "New York",
release: 51,
date: "2011-10-18"
},
{
value: 59.2,
city: "Alaska",
release: 52,
date: "2011-10-18"
},
{
value: 70,
city: "Austin",
release: 53,
date: "2011-10-18"
},
{
value: 62.1,
city: "New York",
release: 54,
date: "2011-10-19"
},
{
value: 58.9,
city: "Alaska",
release: 55,
date: "2011-10-19"
},
{
value: 61.6,
city: "Austin",
release: 56,
date: "2011-10-19"
},
{
value: 65.1,
city: "New York",
release: 57,
date: "2011-10-20"
},
{
value: 57.2,
city: "Alaska",
release: 58,
date: "2011-10-20"
},
{
value: 57.4,
city: "Austin",
release: 59,
date: "2011-10-20"
},
{
value: 55.6,
city: "New York",
release: 60,
date: "2011-10-21"
},
{
value: 56.4,
city: "Alaska",
release: 61,
date: "2011-10-21"
},
{
value: 64.3,
city: "Austin",
release: 62,
date: "2011-10-21"
},
{
value: 54.4,
city: "New York",
release: 63,
date: "2011-10-22"
},
{
value: 60.7,
city: "Alaska",
release: 64,
date: "2011-10-22"
},
{
value: 72.4,
city: "Austin",
release: 65,
date: "2011-10-22"
},
{
value: 54.4,
city: "New York",
release: 66,
date: "2011-10-23"
},
{
value: 65.1,
city: "Alaska",
release: 67,
date: "2011-10-23"
},
{
value: 72.4,
city: "Austin",
release: 68,
date: "2011-10-23"
},
{
value: 54.8,
city: "New York",
release: 69,
date: "2011-10-24"
},
{
value: 60.9,
city: "Alaska",
release: 70,
date: "2011-10-24"
},
{
value: 72.5,
city: "Austin",
release: 71,
date: "2011-10-24"
},
{
value: 57.9,
city: "New York",
release: 72,
date: "2011-10-25"
},
{
value: 56.1,
city: "Alaska",
release: 73,
date: "2011-10-25"
},
{
value: 72.7,
city: "Austin",
release: 74,
date: "2011-10-25"
},
{
value: 54.6,
city: "New York",
release: 75,
date: "2011-10-26"
},
{
value: 54.6,
city: "Alaska",
release: 76,
date: "2011-10-26"
},
{
value: 73.4,
city: "Austin",
release: 77,
date: "2011-10-26"
},
{
value: 54.4,
city: "New York",
release: 78,
date: "2011-10-27"
},
{
value: 56.1,
city: "Alaska",
release: 79,
date: "2011-10-27"
},
{
value: 70.7,
city: "Austin",
release: 80,
date: "2011-10-27"
},
{
value: 42.5,
city: "New York",
release: 81,
date: "2011-10-28"
},
{
value: 58.1,
city: "Alaska",
release: 82,
date: "2011-10-28"
},
{
value: 56.8,
city: "Austin",
release: 83,
date: "2011-10-28"
},
{
value: 40.9,
city: "New York",
release: 84,
date: "2011-10-29"
},
{
value: 57.5,
city: "Alaska",
release: 85,
date: "2011-10-29"
},
{
value: 51,
city: "Austin",
release: 86,
date: "2011-10-29"
},
{
value: 38.6,
city: "New York",
release: 87,
date: "2011-10-30"
},
{
value: 57.7,
city: "Alaska",
release: 88,
date: "2011-10-30"
},
{
value: 54.9,
city: "Austin",
release: 89,
date: "2011-10-30"
},
{
value: 44.2,
city: "New York",
release: 90,
date: "2011-10-31"
},
{
value: 55.1,
city: "Alaska",
release: 91,
date: "2011-10-31"
},
{
value: 58.8,
city: "Austin",
release: 92,
date: "2011-10-31"
},
{
value: 49.6,
city: "New York",
release: 93,
date: "2011-11-01"
},
{
value: 57.9,
city: "Alaska",
release: 94,
date: "2011-11-01"
},
{
value: 62.6,
city: "Austin",
release: 95,
date: "2011-11-01"
},
{
value: 47.2,
city: "New York",
release: 96,
date: "2011-11-02"
},
{
value: 64.6,
city: "Alaska",
release: 97,
date: "2011-11-02"
},
{
value: 71,
city: "Austin",
release: 98,
date: "2011-11-02"
}
]*///线
},
title: {
text: 'sksdkskd'
},
options: {
x: "year",
y: "sales",
name: "type",
type: "interval",
size: 10,
adjust: {
type: 'dodge',
marginRatio: -0.3
},
mode: 'more',
scroll: true
}//柱状图
/*options: {
x: "release",
name: "city",
y: "value",
type: {
line: true,
point: false,
area: true
},
scroll: true,
size: 5,
style: {
type: "point",
stroke: "#fff",
lineWidth: 1
},
axis: {
key: "release",
mapping: 'date'
}
}*///线图
}
};
}
};
</script>