## 版本
1.0.1
  增加功能：
  1.表格组件增加排序事件sortReloadData；支持设置默认排序列以及正序倒序,page_column:[{sort: 'descending' }]
  2.增加参数showHead，支持隐藏表格组件头部模块 
  3.page_column支持插槽配置，[{slot: '插槽名称' }]
  4.修复编辑页面，单选组件无法赋值问题
  5.编辑页面关闭时还原旧数据
  修改文件：
  list\src\buttons.vue
  list\src\list.vue
  list\src\main.vue
  list\src\tables.vue
  form\src\main.vue
  input\src\tool-input.js
## 使用说明

em-element-ui该组件是基于Vue和element-ui开发，该组件主要用于快速开发列表的增删查改功能，只需配置页面上显示的字段，并对各个字段加上对应的显示规则即可显示。

## 安装
```shell
npm install element-ui -S
npm install em-element-ui -D
```

## 安装使用
``` javascript
import Vue from 'vue'
import Element from 'element-ui'
import 'eleme@/components/thrid/em-element-ui/lib/theme-chalk/index.css';

Vue.use(Element)

import emUI from 'em-element-ui'
Vue.use(emUI);


```
:::

### 列表属性描述
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| custTableTitle | 列表左上角名称 | String | — | — |
| isMultiple | 启用多选列 | boolean | — | — |
| 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 | — | - |
| leftButtonsList | 自定义操作按钮-列表左上角显示 {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 |
| afterTableData | 拿到接口返回的数据 | res |
### 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 | — | - |

:::

### 组件实例
| 属性      | 说明          | 类型      |
|---------- |-------------- |---------- |
| multipleSelection | 多选开启时，选择的数据列表 | Array |


### DEMO演示

```html
<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>