option: {
labelWidth： 20, //标签宽度
gutter: 132, //间距
card: true, //是否列表公用
tabs: true, //开启选项卡
tabsActive: 3, //选项卡个数
emptyBtn: true, //是否显示清空按钮，默认true
submitBtn: true, //是否显示提交按钮，默认true
mockBtn: true, //是否开启模拟按钮，默认false
submitText: '完成', //提交按钮文本
addBtn: true, //添加按钮
menuWidth:100,//按钮宽度
menuAlign:'center',//按钮位置
menuHeaderAlign:'center',//头位置
viewBtn:true,//查看
editBtn:false,//编辑
delBtn:false,//删除
copyBtn:true,//复制
group: [{
icon: 'el-icon-info',
label: '分组1',
collapse: false,
prop: 'group1',
column: [{
label: '内容1',
prop: 'text1',
}]
}, {
icon: 'el-icon-info',
label: '分组2',
arrow: false,
prop: 'group2',
column: [{
label: '选项卡2',
prop: 'text2',
}, {
label: '选项卡3',
prop: 'text3',
}]
}], //分组显示
column: [{
label: "用户名", //标签名称
prop: "username", //值
tip: '这是信息提示', //内容提示
tipPlacement: 'left', //内容提示语位置
labelTip: '我是一个标题提示语', //标签提示语
labelTipPlacement: 'right', //标签提示语位置
maxlength: 3, //最长
suffixIcon: 'el-icon-tickets', //后图标
prefixIcon: 'el-icon-tickets', //前图标
format: 'yyyy-MM-dd', //时间显示格式化
valueFormat: 'yyyy-MM-dd', //返回值时间格式化
startPlaceholder: '时间日期开始范围自定义',
endPlaceholder: '时间日期结束范围自定义',
minlength: 2, //最短
row: true, //独占一行
prepend: 'http://', //后缀
append: 'com', //前置，
minRows: 8, //文本框最小行
maxRows: 10, //文本框最大行
showWordLimit: true, //显示剩余多少长度
step: 2, //增加步数
stepStrictly: true, //严格步数
precision: 2, //小数点精度
controlsPosition: '', //步数增加按钮位置
labelPosition: 'top', //标签位置
dataType: 'number', //数据类型
span: 24, //宽度
className: 'formClassName', //样式
value: '默认值', //默认值
type: "cascader", //input类型select下拉、cascade级联、tree树
multiple;true, //是否可以选择多个，和select一起使用
drag: true, //是否可以拖拽select中的结果类容
all: true, //多选框时，是否全选
border: true, //空心多选框
min: 1, //限制选择数量
max: 2,
button: true, //按钮类型多选框
dicData: {
label: '有权限',
value: 1
},
{
label: '无权限',
value: 0
},
{
label: '禁止项',
disabled: true, //禁止字典选择
value: -1
}, //数据字典
dicUrl: `${baseUrl}/getProvince`, //网络字典URL
dicFormatter: (data) => {
data.forEach(ele => {
ele.name = ele.name + '字典格式化'
})
data.unshift({
name: '追加字典',
code: -1
})
return data
}, //字典格式化
dicData: [{
label: '热门城市',
groups: [{
value: 'Shanghai',
label: '上海',
desc: '描述'
}, {
value: 'Beijing',
label: '北京'
}]
}, //字典分组 props: {
label: 'name',
value: 'code'
}, //指明字典数据对应关系
validator: validatePass, //开启自定义校验，值为一个函数
bind: 'deep.deep.deep.value', //数据双向绑定
order: 1, //字段排序，降序排列
component: 'elDivider', //组件名字
event: {
click: () => {
this.$message.success('点击方法')
},
}, //点击方法
params: {
html: '<h2 style="color:red">自定义html标签,点我触发方法</h2>',
contentPosition: "left",
}, //组件参数
change: ({
value,
column
}) => {
this.$message.success('change事件查看控制台')
console.log('值改变', value, column)
},
click,
focus,
blur, //事件函数
errorslot: true, //错误自定义卡槽
labelslot: true, //标签自定义卡槽
formslot: true, //内容自定义卡槽
rules: [{ //校验
required: true, //是否必须
type: 'array', //数据类型
message: "请输入用户名", //提示
trigger: "blur", //出发事件
}]
}]
}
}