Vue-el-custom-component NPM

越南助贷管理平台组件库

安装

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

参数	说明	类型	可选值	默认值
v-model	表单数据对象	object	—	—
search-config	表单配置对象	object	—	—
search-config内部参数
inline	行内表单模式	boolean	—	false
title	页面-标题	string	—	—
size	用于控制该表单内组件的尺寸	string	medium / small / mini—	small—
labelWidth	表单域标签的宽度	string	—	—
fields	表单域 model 字段相关配置	array	—	—
btnList	表单域自定义功能按钮配置	array	—	—

SearchForm Methods

方法名	说明	参数
onSearch	回调函数,用于表格筛选条件	—
onReset	回调函数,初始化SearchForm/TableDom数据	—
onSearchHandle	回调函数,自定义table相关功能操作,通过回调参数 type 字段匹配对应自定义功能操作	Function(options : Object)

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]()
            }
    }
}