ele-admin-helper
v1.0.21
Published
方便使用ElementUI的table和form
Downloads
28
Readme
ele-admin-helper
组件目的
方便的使用ElementUI的Form和Table组件，后续可能还会增加别的组件
通过这个二次封装的组件可以比较方便的使用ElementUI的Form和Table，满足一般后台需要
安装与使用方法
npm install ele-admin-helper --save-dev
import EleAdminHelper from 'ele-admin-helper'
Vue.use(EleAdminHelper)参考demo地址
fitadmin 看文档不如直接用，参考这个项目可以快速上手，通过json的数据形式创建表单跟表格， 在后台里边，表单与表格是使用频率最高的两个组件，将这两个组件规范化统一，能够 极大的减少重复工作，提高开发效率
使用方法
- yxform组件
<yxform
ref="demoForm"
:emit-validate="form.emitValidate"
:emit-reset="form.emitReset"
:form="form"
/>{
emitValidate: false, // 是否触发表单验证，使用的时候只要修改这个字段既可以触发表单验证
emitReset: false, // 是否触发表单重置，修改该字段的值会触发表单重置
validateSuccess(){}, // 表单验证成功回调事件，通常成功就发送请求了
validateFaild(){}, // 表单验证失败回调事件，通常失败会有提示
inline: false, // 是否内联内联效果，默认是一行一个表单项
// style: 'width: 500px', // 表单宽度，一般用不着
labelWidth: '120px', // 表单项lable的宽度
labelPosition: 'right', // 表单项lable的位置
props: { // 表单对应的所有字段，相当于form里的name字段，这里要注意的是字段类型
name: '一下科技',
sex: '1',
age: 7,
birthday: '',
hobby: ['2', '3'],
likeColor: '#000000',
city: 'Beijing',
dateRange: [],
timeRange: ['00:00', '23:59'],
timePeriod: defaultTime,
cascader: 150500
},
attributes: [
{
type: 'yxDatePicker', // 日期选择器组件
prop: 'dateRange', // 对应form里的prop某个字段，不要重复
label: '日期范围',
config: {
type: 'daterange', // 表示日期范围形式
format: 'yyyy 年 MM 月 dd 日', // 展现形式
valueFormat: 'yyyy-MM-dd', // 值的形式，也对应prop最后的值
startPlaceholder: '开始日期', // 开始日期的placeholder
endPlaceholder: '结束日期' // 结束日期的placeholder
}
},
{
type: 'yxTimePicker', // 时间选择器组件
prop: 'timeRange',
label: '时间范围',
config: {
isRange: true, // 表示是否为范围选择器，如果为false则对应prop为一个时间字符串，如果为true则对应prop为一个数组
format: 'HH:mm', // 展现形式
valueFormat: 'HH:mm', // value的形式
startPlaceholder: '开始时间', // 开始时间的placeholder
endPlaceholder: '结束时间' // 结束事件的placeholder
}
},
{
type: 'yxInput', // 输入框组件
prop: 'name',
label: '姓名',
rules: ['required'], // 表单验证规则，内置验证类型可以直接传字符串，如果不满足可以传验证对象
config: {
type: 'text', // 输入框类型
placeholder: '请输入姓名', // 输入框的placeholder
disabled: false, // 几乎每个组件都有disabled属性，表示是否可用
style: 'width: 220px;' // 输入框的宽度
}
},
{
type: 'yxWeekTimeSelect', // 不连续的日期选择组件，某些场景会用到，比较定制的一个组件
prop: 'timePeriod',
label: '屏蔽时间段'
},
{
type: 'yxTree', // 树形组件
prop: 'areaCode',
label: '屏蔽地域',
config: {
options: cities // label value children形式
}
},
{
type: 'yxSelect', // 下拉框组件
prop: 'sex',
label: '性别',
rules: ['required'], // 验证规则
config: {
disabled: false,
style: 'width: 220px;',
options: [ // 下拉选项，label value形式
{
label: '男',
value: '0',
disabled: false
},
{
label: '女',
value: '1',
disabled: false
}
]
}
},
{
type: 'yxInputNumber', // 数字输入框
prop: 'age',
label: '年龄',
rules: ['required', 'int'], // 验证规则
config: {
type: 'input',
min: 0,
max: 10,
disabled: false,
style: 'width: 220px;'
}
},
{
type: 'yxDatePicker', // 日期选择框
prop: 'birthday',
label: '生日',
rules: ['required'],
config: {
type: 'date',
format: 'yyyy 年 MM 月 dd 日', // 日期在页面上的展现形式
valueFormat: 'timestamp', // 对应value的字段的形式
placeholder: '请输入生日',
disabled: false
}
},
{
type: 'yxColorPicker', // 颜色选择器，一般情况用不到这个
prop: 'likeColor',
label: '颜色',
rules: ['required'],
config: {
placeholder: '请输入颜色值',
alpha: false,
disabled: false
}
},
{
type: 'yxGroupSelect', // 分组下拉选择器
prop: 'city',
label: '城市',
rules: ['required'],
config: {
style: 'width: 220px;',
options: [
{
label: '热门城市',
options: [
{
value: 'Shanghai',
label: '上海'
}, {
value: 'Beijing',
label: '北京'
}]
}, {
label: '城市名',
options: [
{
value: 'Chengdu',
label: '成都'
}, {
value: 'Shenzhen',
label: '深圳'
}, {
value: 'Guangzhou',
label: '广州'
}, {
value: 'Dalian',
label: '大连'
}]
}]
}
},
{
type: 'yxCheckboxGroup', // 多选框选择器
prop: 'hobby',
label: '爱好',
rules: ['required'],
config: {
disabled: false,
options: [
{
label: '足球',
value: '0',
disabled: false
},
{
label: '篮球',
value: '1',
disabled: false
},
{
label: '排球',
value: '2',
disabled: false
},
{
label: '乒乓球',
value: '3',
disabled: false
}
]
}
},
{
type: 'yxCascader', // 级联选择器
prop: 'cascader',
label: '城市',
config: {
placeholder: '请选择城市',
showAllLevels: true,
props: {
emitPath: false // 只需要最后一级的字段
},
options: cities // label value形式
}
},
{
type: 'yxButton',
config: {
options: [
{
label: '提交',
type: 'primary',
onClick: this.onsubmit
},
{
label: '重置',
type: 'danger',
onClick: this.onreset
}
]
}
}
]
}- yxform组件
template
<yxtable ref="demoTable" :table="table" />data
{
data: [], // 表格数据，通常是通过接口请求回来复制给这个字段
sortChange() {}, // 排序发生变化时触发的事件回调
select: {
isSelectable: true, // 表格的每一项是否能够勾选
selectChange: this.onSelectChange, // 表格被勾选上以后触发的事件回调
selectable(row, index) { // 表格项是否允许被勾选，通过条件可以让某些条件下的项目不可选中
if (row.sex === '0') {
return false
} else {
return true
}
}
},
attributes: [
{
prop: '', // 展示对应的数据某个属性字段，这里是index类型，不需要填写
type: 'index', // 索引类型，从1开始
label: 'index', // 表头展示的文字
fixed: 'left', // 是否固定，可以固定在左侧或者右侧
width: '100' // 该项的单元格宽度
},
{
prop: 'sex', // 展示sex字段的数据
type: 'select', // 展现形式是下拉框
label: 'select', // 表头展示的文字
sortable: true, // 是否允许排序
disabled: false, // 是否禁用
onChage: this.onChage, // 下拉框选择变化时触发字段，比如需要在表单内部修改属性时可以用
width: '100', // 该项的单元格宽度
options: [ // 下拉选项数据
{
value: '0',
label: '男'
},
{
value: '1',
label: '女'
}
]
},
{
prop: 'areaCode', // 展示areaCode字段数据
type: 'tags', // tags类型，展示的是一个数组类型的数据，值应该是value组成的数组
label: '屏蔽地域', // 表头展示的文字
options: cityMaps
},
{
prop: 'name', // 展示name字段的数据
type: 'edit', // 可编辑的类型，这个形式可以直接在单元格修改字段
label: 'edit', // 表头展示的文字
sortable: true, // 是否允许排序
width: '100', // 表格列宽度
onEdit: this.onEdit // 编辑结束点击确定或回车触发的事件
},
{
prop: 'id', // 展示id字段的数据
type: 'default', // 默认展现形式，不设置type字段就是default形式
label: 'default || ""', // 表头展示的文字
sortable: true, // 是否允许排序
width: '120' // 单元格列宽度
},
{
prop: 'name', // 展示name字段的数据
label: 'tooltip', // 表头展示的文字
width: '100', // 单元格宽度
type: 'tooltip', // tooltip展示形式
sortable: true, // 是否允许排序
style: 'cursor:pointer;color:blue;font-weight:bold;', // 自定义样式
template: '<img src="http://api.app.letv.com/getqr?w=100&txt=ITEM_PROP"/>', // tooltip上的html内容，其中ITEM_PROP表示对应的属性值占位符
onClick: this.onClick // tooltip点击事件
},
{
prop: 'status', // 展示status字段的数据
label: 'mapList', // 表头展示的文字
type: 'mapList', // mapList的展现形式，某个value展示某个lable
width: '100', // 单元格宽度
options: [ // value对应status的值，如果对应上就展示label的文字，style表示自定义样式
{
value: '1',
label: '已购买',
style: 'color:red;'
},
{
value: '2',
label: '未购买',
style: 'color:brown;'
}
]
},
{
prop: '',
label: 'buttons', // 表头展示文案
type: 'buttons', // 按钮，通常表格都有操作按钮一列，用这个很方便
fixed: 'right', // 固定列
width: '200', // 列宽度
options: [ // 按钮项还有style和icon的属性，可以看源码理解其作用
{
title: 'btn1', // 按钮展示文案
type: 'primary', // 按钮类型
onClick: this.onClick // 按钮点击事件
},
{
title: 'btn2',
type: 'text',
onClick: this.onClick
},
{
title: 'btn3',
type: 'danger',
onClick: this.onClick
}
]
},
{
prop: '',
label: 'val2btn', // 表头展示文案
type: 'val2btn', // val2btn形式，不同的val展示不同的button，应用场景挺多
width: '250',
options: [ // 还有个isNot字段，如果为true表示prop的值不在value数组里则展示
{
prop: 'status', // val为statu
value: ['1'], // 如果status的值包含在value里边则展示
title: '已买', // 展示文案
onClick: this.onClick // 点击事件
},
{
prop: 'status',
value: ['1'],
title: '再次购买',
type: 'primary', // 按钮类型
onClick: this.buyAgain // 点击事件
},
{
prop: 'status',
value: ['1'],
title: '评价',
type: 'warn',
onClick: this.discuss
},
{
prop: 'status',
value: ['2'],
title: '未购买,点击购买',
type: 'primary',
onClick: this.onClick
}
]
},
{
prop: 'photo', // 展示photo字段对应的值
label: 'photo', // 表头展示的文案
type: 'photo', // photo类型，也就是展示图片
width: '200', // 表格宽度
photoWidth: 40, // 图片展示宽度
photoHeight: 40 // 图片展示高度
},
{
prop: 'tags', // 上边有描述↑
label: 'tags',
type: 'tags',
width: '280',
options: [
{
value: '1',
label: 'web'
},
{
value: '2',
label: 'phone'
},
{
value: '3',
label: '超级手机'
},
{
value: '4',
label: 'pad'
}
]
},
{
prop: 'datetime', // 展示datetime字段
label: 'datetime', // 表头展示文字
type: 'datetime', // 日期时间展示形式，后端为时间戳，我们格式化成年月日时分秒，这个的应用场景并不多，后续慢慢废弃掉，用customFilter可以满足需求
width: '160' // 单元格宽度
},
{
prop: 'progress', // 展示progress字段
label: 'customFilter', // 表头展示文字
type: 'customFilter', // 自定义过滤器
width: '110', // 单元格宽度
filter: function(val, row) { // 写自己定义的html标签，这个类型能满足非常多的定制化场景
return `<h3 style="text-align: center;">${val}%</h3>`
}
},
{
prop: 'progress', // 展示progress字段
label: 'progress', // 表头展示的文字
type: 'progress', // 显示成进度条，场景基本没有，后期废弃掉
width: '150' // 单元格宽度
}
]
}