em-element-ui1 v1.0.13

使用说明

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);

### 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>

:::

列表属性描述

列表事件

table queryURL

queryURL是一个已key-val方式传递，key代表是请求事件，如：add/edit/list/del和自定义事件，注意：key为name时，是新增和编辑左上角title提示；val为对象，描述如下： | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | url | 请求地址 | string | - | - | | method | 请求方式 | string | — | - | | name | 删除时回显字段 | string | — | - |

mode_list

select_list

page_column table

mode_list add/edit

mode_list search

mode_list rules