1.0.1 • Published 2 years ago
element-custom-component v1.0.1
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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| 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]()
}
}
}