vue-el-custom-component

越南助贷管理平台组件库

安装

npm install vue-el-custom-component
yarn add vue-el-custom-component

使用

• 全局注册

import vueCustomComponent from 'vue-el-custom-component'
import 'vue-el-custom-component/lib/index.css';
Vue.use(vueCustomComponent);

• 局部注册

import {SearchForm,TableDom,tableMixin} from 'vue-el-custom-component'
import 'vue-el-custom-component/lib/index.css';
export default {
    components:{TableDom,SearchForm},
    mixins: [tableMixin],
}

功能描述

SearchForm

SearchForm Attributes

SearchForm Methods

search-config 配置案例

{
        inline: false,
        title: 'Page-模板',
        size: 'small',
        labelWidth: '125px',
        fields: [
            { type: 'input', label: '名称', prop: 'name',maxlength:20 },
            { type: 'time', label: '时间', prop: 'time' },
            { type: 'date', label: '日期', prop: 'date' },
            { type: 'dateTime', label: '日期时间', prop: 'dateTime' },
            {
                type: 'daterange', label: '日期区间', prop: 'daterange', pickerOptions: {
                    disabledDate: (time) => {
                        console.log('pickerOptions', time)
                        return time.getTime() > Date.now() - 3600 * 1000 * 24
                    }
                }
            },
            {
                type: 'select', label: '下拉', prop: 'select',
                options: [{ label: 'a', value: 1 }, { label: 'b', value: 2 }]
            },
            {
                type: 'select', label: '下拉多选', prop: 'copyMultiple', multiple: true,
                options: [{ label: 'a', value: 1 }, { label: 'b', value: 2 }]
            }
        ],
        # 国际化配置
        searchBtn: { search: '查询', reset: '重置' },  
        # 自定义按钮功能配置,根据对应 type 匹配功能 
        btnList: [{ label: '新增', type: 'add', options: { title: '新增数据', width: '620px' } }]
    }

<search-form
      v-model="searchData"
      :search-config="searchConfig"
      @onSearch="onSearch"
      @onReset="onReset"
      @onSearchhandle="onSearchHandle"
/>
export default {
    methods: {
            onSearchHandle ({ type, options }) {
    const Handle = {
     add:()=>{},
     delete:()=>{},
    }
               Handle[type]()
            }
    }
}

TableDom

EditForm

Gitlab地址