<template>
<div>
<ElRow>
<ElCol :span="12">
<h3>FormData (sync)</h3>
<v-jsoneditor v-model="json"
:options="{mode:'code',onBlur:syncFormData,mainMenuBar:false,statusBar:false}"
:plus="false"
height="300px"/>
</ElCol>
<ElCol :span="11" :push="1">
<h3>FormOption (sync)</h3>
<v-jsoneditor v-model="optionJson"
:options="{mode:'code',onBlur:syncFormOption,mainMenuBar:false,statusBar:false}"
:plus="false"
height="300px"/>
</ElCol>
</ElRow>
<ElRow>
<h3>Api</h3>
<ElRow>
<ElButton @click="getOption">Get form configuration(option)</ElButton>
<ElButton @click="getFormData">Get form value(formData)</ElButton>
<ElButton @click="fields">Get form fields(fields)</ElButton>
</ElRow>
<br/>
<ElRow>
<ElButton @click="append">Add rule(append)</ElButton>
<ElButton @click="prepend">Add rule(prepend)</ElButton>
<ElButton @click="appendChild">Add rule(appendChild)</ElButton>
<ElButton @click="removeField">Delete field(removeField)</ElButton>
<ElButton @click="getRule">Get rules(getRule)</ElButton>
</ElRow>
<br/>
<ElRow>
<ElButton @click="hidden">Hidden fields(hidden)</ElButton>
<ElButton @click="disabled">Disabled field(disabled)</ElButton>
<ElButton @click="resetField">Reset field(resetFields)</ElButton>
<ElButton @click="validateField">Field validation(validateField)</ElButton>
<ElButton @click="method">Execute component method(exec)</ElButton>
<ElButton @click="setValue">Set component value(setValue)</ElButton>
<ElButton @click="getValue">Get component value(getValue)</ElButton>
</ElRow>
<br/>
<ElRow>
<ElButton @click="submitBtnProps">Set the submit button(submitBtnProps)</ElButton>
<ElButton @click="resetBtnProps">Set reset button(resetBtnProps)</ElButton>
<ElButton @click="inline">Inline mode(updateOptions)</ElButton>
</ElRow>
<br/>
<ElRow>
<ElButton @click="disabled2">Disable form(disabled)</ElButton>
<ElButton @click="submit">Submit Form(submit)</ElButton>
<ElButton @click="hideForm">Hide form(hideForm)</ElButton>
<ElButton @click="validate">Form validation(validate)</ElButton>
<ElButton @click="resetFields">Reset form(resetFields)</ElButton>
<ElButton @click="clearValidateState">Clear verification(clearValidateState)</ElButton>
</ElRow>
<br/>
<ElRow>
<ElButton @click="refresh">refresh</ElButton>
<ElButton @click="reload">reload</ElButton>
<ElButton @click="destroy">destroy</ElButton>
</ElRow>
<br/>
<ElButton @click="jsonCreate">Use Json to generate</ElButton>
<ElButton @click="create">Generated by default</ElButton>
<ElButton @click="createJson" style="color:#ff7271;">Get json string generation rules(toJson)</ElButton>
</ElRow>
<ElRow>
<h3>Render</h3>
<form-create :rule="rule" v-model="fapi" :option="option" :value.sync="formData" @prefix-change="change"/>
</ElRow>
</div>
</template>
<script>
const mock = window.formCreateMock;
const jsonMock = window.formCreateJsonMock;
export default {
name: "example",
data(){
return {
fapi:{},
rule:mock(),
formData:{},
json:{},
option:{resetBtn: false},
optionJson:{}
}
},
methods: methods(),
beforeMount(){
this.$watch(()=>this.formData, value => {
this.json = value;
});
},
mounted() {
this.optionJson = {...this.fapi.options};
}
}
function methods() {
const create = function () {
this.rule = mock();
}
const jsonCreate = function () {
this.rule = jsonMock();
}
const createJson = function () {
const json = this.fapi.toJson();
console.log(json);
alert(json);
};
let uni = 1;
//sync
const syncFormData = function () {
if (JSON.stringify(this.json) !== JSON.stringify(this.formData)) {
this.formData = {...this.json}
}
}
const syncFormOption = function () {
this.option = {...this.optionJson};
}
//api
const append = function () {
this.fapi.append({
type: 'input',
field: 'rule' + uni,
title: 'rule' + uni,
}, 'goods_name');
uni++;
}
const prepend = function () {
this.fapi.prepend({
type: 'input',
field: 'rule' + uni,
title: 'rule' + uni,
}, 'goods_name')
uni++;
}
const appendChild = function () {
this.fapi.append({
type: 'button',
children: ['按钮插槽'],
slot: 'append',
}, 'goods_name', true)
}
const removeField = function () {
this.fapi.removeField('address')
}
const getRule = function () {
alert(JSON.stringify(this.fapi.getRule('goods_name')));
}
const destroy = function () {
this.fapi.destroy()
}
const fields = function () {
alert(JSON.stringify(this.fapi.fields()));
}
const getOption = function () {
alert(JSON.stringify(this.fapi.options));
}
const getFormData = function () {
alert(JSON.stringify(this.fapi.form));
}
const reload = function () {
this.fapi.reload();
}
let hiddenFlag = false;
const hidden = function () {
hiddenFlag = !hiddenFlag;
this.fapi.hidden(hiddenFlag, 'goods_name');
}
let disabledFlag = false;
const disabled = function () {
disabledFlag = !disabledFlag;
this.fapi.disabled(disabledFlag, 'goods_name');
}
let disabledFlag2 = false;
const disabled2 = function () {
disabledFlag2 = !disabledFlag2;
this.fapi.disabled(disabledFlag2);
}
let submitFlag = false;
const submitBtnProps = function () {
submitFlag = !submitFlag;
this.fapi.submitBtnProps({loading: submitFlag})
this.optionJson = {...this.fapi.options}
}
let resetFlag = false;
const resetBtnProps = function () {
resetFlag = !resetFlag;
this.fapi.resetBtnProps({loading: resetFlag})
this.optionJson = {...this.fapi.options}
}
let inlineFlag = false;
const inline = function () {
inlineFlag = !inlineFlag;
this.fapi.updateOptions({form: {inline: inlineFlag}})
this.optionJson = {...this.fapi.options}
}
const refresh = function () {
this.fapi.refresh();
}
let hideFlag = false;
const hideForm = function () {
hideFlag = !hideFlag;
this.fapi.hideForm(hideFlag);
}
const validate = function () {
this.fapi.validate();
}
const validateField = function () {
this.fapi.validateField('goods_name');
}
const resetFields = function () {
this.fapi.resetFields();
}
const resetField = function () {
this.fapi.resetFields(['goods_name']);
}
const submit = function () {
this.fapi.submit(() => alert('success'));
}
const clearValidateState = function () {
this.fapi.clearValidateState();
}
const method = function () {
this.fapi.exec('goods_name', 'focus');
}
const setValue = function () {
this.fapi.setValue('goods_name', this.fapi.form.goods_name + '1');
}
const getValue = function () {
alert(JSON.stringify(this.fapi.getValue('goods_name')));
}
return {
create,
jsonCreate,
createJson,
syncFormData,
syncFormOption,
change() {
console.log(arguments);
},
append,
reload,
prepend,
appendChild,
getFormData,
getOption,
removeField,
getRule,
destroy,
fields,
hidden,
disabled,
disabled2,
submitBtnProps,
resetBtnProps,
inline,
refresh,
hideForm,
validate,
validateField,
resetFields,
resetField,
submit,
clearValidateState,
method,
getValue,
setValue,
}
}
</script>
The following data are used in the function demonstration
mock()
import {maker} from '@form-create/element-ui'
import Vue from 'vue'
export default function mock() {
return [
//hidden 组件
maker.hidden('id', '14'),
maker.create('testSlot', 'testSlot', 'testSlotTitle').children([
maker.input('', 'asd').slot('asd').display(false),
maker.input('', 'asd23').slot('asd'),
]),
//cascader 多级联动组件
maker.cascader({title: '所在区域', style: 'color:red'}, 'address', ['陕西省', '西安市']).props({
options: []
}).effect({
address: '1'
}).info({
info: '12312313123',
}).wrap({
required: true
}).prefix({
type: 'button',
children: ['prefix']
}).suffix({
type: 'button',
children: ['suffix']
}),
// input 输入框组件
maker.input('商品名称', 'goods_name', 'iphone').props({
placeholder: '请输入商品名称',
clearable: true,
disabled: false,
maxlength: 10,
prefixIcon: 'el-icon-info'
}).setProp('prefix', 'prefix').setProp('suffix', 'suffix').validate([
{required: true, message: '请输入商品名称', trigger: 'blur'}
]).control([
{
value: 'append',
child: true,
rule: [maker.create('template').children(['append']).slot('append').setProp('suffix', {
type: 'span',
children: ['asdf']
})]
},
{
value: 'prepend',
child: true,
rule: [maker.create('template').children(['prepend']).slot('prepend')]
},
]).on({
input(v) {
console.log(v);
}
}).emit(['change']).className('goods-name').children([
maker.create('template').children(['append']).slot('append')
])
.info('请输入商品名称!!!!!'),
//autoComplete 自动选择组件
maker.auto('自动完成', 'auto', 'xaboy').props({
fetchSuggestions: function (queryString, cb) {
cb([
{value: queryString}, {value: queryString + queryString}
]);
}
}).emitPrefix('xaboy').emit(['change']).link(['goods_info']).update((val, rule, fApi) => {
console.log(val);
return fApi.getValue('goods_info') === 'goods_info';
}),
//textarea 组件
maker.textarea('商品简介', 'goods_info', '').props({
autosize: {minRows: 4, maxRows: 8},
placeholder: '请输入商品名称'
}).update((val, rule, api) => {
console.log('change');
return 'val' === api.getValue('auto');
}).link(['auto']).wrap({
show: true
}),
{
type: 'object',
title: '对象组件',
field: 'object',
value: {date: '2121-12-12', field: 10, field2: '123123123'},
props: {
rule: [
{
type: 'col',
wrap: {show: true},
children: [
maker.date('date', 'date', '').native(false).col({span: 12}),
{
type: 'inputNumber',
field: 'field',
title: 'field',
props: {
disabled: false
},
validate: [
{required: true, min: 10, type: 'number'}
],
col: {
span: 12
}
}
]
},
{
type: 'input',
field: 'field2',
title: 'field2',
props: {
disabled: false
},
validate: [
{required: true}
]
}
]
}
},
{
type: 'group',
title: '批量添加',
field: 'group',
value: [{date: '2121-12-12', field: 10, field2: '123123123'}],
suffix: 'suffixsuffix',
props: {
// field: 'field',
expand: 3,
rules: [
{
type: 'col',
wrap: {show: true},
children: [
{
type: 'DatePicker',
field: 'date',
title: 'date',
native: false,
col: {span: 12}
},
{
type: 'inputNumber',
field: 'field',
title: 'field',
props: {
disabled: false
},
validate: [
{required: true, min: 10, type: 'number'}
],
col: {
span: 12
}
}
]
},
{
type: 'input',
field: 'field2',
title: 'field2',
props: {
disabled: false
},
validate: [
{required: true}
]
}
]
},
validate: [
{required: true, min: 3, type: 'array', message: '最少增加3项', trigger: 'change'},
]
},
//radio 单选框组件
maker.radio('是否包邮(control)', 'is_postage', 1).options([
{value: 0, label: '不包邮', disabled: false},
{value: 1, label: '包邮', disabled: false},
{value: 2, label: '未知', disabled: true},
]).col({span: 8}).control([
{
value: 1,
prepend: 'is_postage',
rule: [
maker.number('满额包邮1', 'postage_money1', 0).effect({
open: '1'
}).control([
{
value: 0,
prepend: 'rate',
rule: [
maker.number('满额包邮2', 'postage_money2', 0)
]
}
])
]
},
{
value: 0,
prepend: 'goods_info',
rule: [
maker.number('满额包邮3', 'postage_money3', 0).control([
{
value: 0,
prepend: 'goods_name',
rule: [
maker.number('满额包邮4', 'postage_money4', 0)
]
}
])
]
}
]),
//checkbox 复选框付选择
maker.checkbox('标签', 'label', [1]).options([
{value: 1, label: '好用', disabled: true},
{value: 2, label: '方便', disabled: false},
{value: 3, label: '实用', disabled: false},
{value: 4, label: '有效', disabled: false},
]).col({span: 8}).children([
{
type: 'el-checkbox',
children: ['asdf'],
slot: 'default'
}
]),
//switch 开关组件
maker.switch('是否上架', 'is_show', '1').props({
'activeValue': '1',
'inactiveValue': '0',
'slot': {
open: '上架',
close: '下架',
}
}).col({span: 8, labelWidth: '100'}),
//自定义组件
maker.createTmp('<el-button @click="onClick" style="width:100%;" :disabled="disabled">{{button}}字符串测试{{test}}-{{num}}</el-button>', function () {
return new Vue({
data: function () {
return {
test: 'createTmp渲染',
button: '<i-button />',
num: '',
}
},
props: {
disabled: Boolean,
value: Number,
formCreate: Object
},
watch: {
value: {
handler(n) {
this.num = n;
},
immediate: true,
}
},
methods: {
onClick: function () {
console.log('click');
this.num++;
this.$emit('input', this.num);
},
}
})
}, 'tmp', '自定义 title').prefix('prefixprefixprefix').value(100).props('disabled', false),
//自定义组件
maker.create('el-button', 'btn').props('disabled', false).col({span: 12}).children([
maker.create('span').domProps({
innerHTML: '测试自定义按钮'
})
]).emit(['click']).emitPrefix('btn'),
//自定义组件
maker.create('el-tooltip', 'tip', '自定义 title').props({
content: '这里是提示文字',
}).col({span: 11, push: 1}).children([
maker.create('span').domProps({
innerHTML: '当鼠标经过这段文字时,会显示一个气泡框'
})
]).value(false),
//select 下拉选择组件
maker.select('产品分类', 'cate_id', '105').options([
{'value': '104', 'label': '生态蔬菜', 'disabled': false, 'slot': '<div style:\'color:#ff7271;\'>自定义显示内容</div>'},
{'value': '106', 'label': '植物植物', 'disabled': false},
{
'value': '105', 'label': '新鲜水果', 'disabled': false, 'slot': function ($h) {
return $h('div', {
style: 'color:#ff7271;'
}, ['新鲜水果']);
}
},
]).props({multiple: true}),
{
type: 'div',
name: 'div2',
children: []
},
{
type: 'div',
name: 'div',
children: [
'asdfasf',
{
type: 'el-col',
props: {
span: 12
},
name: 'cal',
children: [
//datePicker 日期选择组件
maker.date('活动日期', 'section_day', ['2018-02-20 12:12:12', '2018-03-20 12:12:12']).props({
'type': 'datetimerange',
}),
//timePicker 时间选择组件
maker.time('活动时间', 'section_time', ['11:11:11', '22:22:22']).props({
'isRange': true,
'placeholder': '请选择活动时间'
}),
]
},
{
type: 'el-col',
props: {
span: 12
},
children: [
//inputNumber 数组输入框组件
maker.number('排序', 'sort', 0).props({
precision: 2
}).col({span: 12}).validate(
[{require: true, type: 'number', min: 10}]
),
//colorPicker 颜色选择组件
maker.color('颜色', 'color', '#ff7271').props({
'format': 'hex'
}).props({
'hue': true
}).col({span: 12}),
]
}
],
native: true
},
//rate 评分组件
maker.rate('推荐级别', 'rate', 2)
.props({
'max': 10,
})
.validate({required: true, type: 'number', min: 3, message: '请大于3颗星', trigger: 'change'})
.col({span: 12}).control([
{
handle: function (val) {
return val > 5;
},
rule: [
maker.input('好评原因', 'goods_reason', '').props({disabled: false})
]
}, {
handle: function (val) {
return val < 5;
},
rule: [
maker.input('差评原因', 'bad_reason', '').props({disabled: false})
]
}
]),
//slider 滑块组件
maker.slider('滑块', 'slider', [30, 80]).props({
'min': 0,
'max': 100,
'range': true,
}).col({span: 12}),
{
type: 'wangEditor',
field: 'txt',
title: '富文本框',
value: '<h1 style="color: #419bf7;">form-create</h1><a href="https://github.com/xaboy/form-create">GitHub</a>'
},
//upload 上传组件
maker.upload('轮播图', 'pic', ['http://file.lotkk.com/form-create.jpeg'])
.props({
'action': 'https://mock.uutool.cn/4erua2dig4i0',
'limit': 2,
'uploadType': 'image',
'name': 'file',
'onSuccess': function (res, file) {
console.log('upload success');
file.url = res.thumbUrl;
},
'onRemove': function (file, fileList) {
console.log(file, fileList);
},
'beforeRemove': function () {
console.log('before-remove');
},
'allowRemove': true,
}),
//frame 框架组件
maker.frame('素材', 'fodder', ['http://file.lotkk.com/form-create.jpeg']).props({
src: '/iframe.html',
maxLength: 0,
type: 'image',
width: '80%',
modalTitle: '预览~~~',
okBtnText: 'ok',
closeBtnText: 'close',
title: 'select'
}).validate([
{required: true, type: 'array', min: 2, message: '请选择2张图片', trigger: 'change'}
]),
//tree 树形组件
maker.tree('权限', 'tree', [11, 12]).props({
type: 'checked',
multiple: true,
showCheckbox: true,
emptyText: '暂无数据',
defaultExpandAll: true,
expandOnClickNode: false,
data: [
{
title: 'parent 1',
expand: true,
selected: false,
id: 1,
children: [
{
title: 'parent 1-1',
expand: true,
id: 2,
children: [
{
title: 'leaf 1-1-1',
disabled: true,
id: 11
},
{
title: 'leaf 1-1-2',
selected: true,
id: 12
}
]
},
{
title: 'parent 1-2',
expand: true,
id: 3,
children: [
{
title: 'leaf 1-2-1',
checked: true,
id: 13,
},
{
title: 'leaf 1-2-1',
id: 14,
}
]
}
]
}
],
}).validate([
{required: true, type: 'array', min: 2, message: '至少选择2个', trigger: 'change'}
])
];
}
jsonMock()
export default function jsonMock() {
//以下是组件的生成规则及参数默认值
return [
//hidden 组件
{
type: 'hidden',
field: 'id',
value: '1'
},
//cascader 多级联动组件
{
type: 'cascader',
title: '所在区域',
field: 'address',
value: ['陕西省', '西安市', '新城区'],
props: {
separator: '/',
},
effect: {
address: 1
}
},
//input 输入框组件
{
type: 'input',
title: '商品名称',
field: 'goods_name',
value: 'iphone',
props: {
placeholder: '请输入商品名称', //输入框占位文本
disabled: false, //禁用
},
validate: [
{required: true, message: '请输入商品名称', trigger: 'blur'}
]
},
//input 输入框组件
{
type: 'input',
title: '商品简介',
field: 'goods_info',
value: '',
props: {
type: 'textarea', //输入框类型,text,textarea 和其他 原生 input 的 type 值
rows: 10, //输入框行数,只对 type="textarea" 有效
autosize: {minRows: 4, maxRows: 8}, //自适应内容高度,只对 type="textarea" 有效,可传入对象,如,{ minRows: 2, maxRows: 6 }
},
children: ['asd']
},
//autoComplete 自动选择组件
{
type: 'autoComplete',
title: '自动完成',
field: 'auto',
value: 'xaboy',
props: {
fetchSuggestions: function (queryString, cb) {
cb([
{value: queryString}, {value: queryString + queryString}
]);
},
}
},
{
type: 'object',
title: '对象组件',
field: 'object',
value: {date: '2121-12-12', field: 10, field2: '123123123'},
props: {
rule: [
{
type: 'col',
wrap: {show: true},
children: [
{
type: 'datePicker',
field: 'date',
title: 'date',
col: {
span: 12
}
},
{
type: 'inputNumber',
field: 'field',
title: 'field',
props: {
disabled: false
},
validate: [
{required: true, min: 10, type: 'number'}
],
col: {
span: 12
}
}
]
},
{
type: 'input',
field: 'field2',
title: 'field2',
props: {
disabled: false
},
validate: [
{required: true}
]
}
]
}
},
{
type: 'group',
title: '批量添加',
field: 'group',
value: [{date: '2121-12-12', field: 10, field2: '123123123'}],
suffix: 'suffixsuffix',
props: {
// field: 'field',
rules: [
{
type: 'col',
wrap: {show: true},
children: [
{
type: 'DatePicker',
field: 'date',
title: 'date',
native: false,
col: {span: 12}
},
{
type: 'inputNumber',
field: 'field',
title: 'field',
props: {
disabled: false
},
validate: [
{required: true, min: 10, type: 'number'}
],
col: {
span: 12
}
}
]
},
{
type: 'input',
field: 'field2',
title: 'field2',
props: {
disabled: false
},
validate: [
{required: true}
]
}
]
},
validate: [
{required: true, min: 3, type: 'array', message: '最少增加3项', trigger: 'change'},
]
},
//
// //radio 单选框组件
{
type: 'radio',
title: '是否包邮',
field: 'is_postage',
value: '0',
options: [
{value: '0', label: '不包邮', disabled: false},
{value: '1', label: '包邮', disabled: false},
{value: '2', label: '未知', disabled: true},
],
props: {
disabled: false,
}
},
//checkbox 复选框付选择
{
type: 'checkbox',
title: '标签',
field: 'label',
value: [
'1', '2', '3'
],
options: [
{value: '1', label: '好用', disabled: true},
{value: '2', label: '方便', disabled: false},
{value: '3', label: '实用', disabled: false},
{value: '4', label: '有效', disabled: false},
],
props: {
disabled: false, //是否禁用
}
},
//switch 开关组件
{
type: 'switch',
title: '是否上架',
field: 'is_show',
value: '1',
props: {
disabled: false,//是否禁用
}
},
//select 下拉选择组件
{
type: 'select',
field: 'cate_id',
title: '产品分类',
value: ['104', '105'],
props: {
multiple: true, //是否支持多选
disabled: false, //是否禁用
},
options: [
{'value': '104', 'label': '生态蔬菜', 'disabled': false},
{'value': '105', 'label': '新鲜水果', 'disabled': false},
]
},
//datePicker 日期选择组件
{
type: 'datePicker',
field: 'section_day',
title: '活动日期',
value: ['2018-02-20', '2021-02-20'],
props: {
type: 'daterange', //显示类型 year/month/date/dates/ week/datetime/datetimerange/daterange
disabled: false, //禁用
}
},
//timePicker 时间选择组件
{
type: 'timePicker',
field: 'section_time',
title: '活动时间',
value: ['01:01:01', '12:12:12'],
props: {
disabled: false, //禁用
isRange: true
}
},
//inputNumber 数组输入框组件
{
type: 'inputNumber',
field: 'sort',
title: '排序',
value: 0,
props: {
step: 0.1, //计数器步长,
precision: 2, //数值精度
}
},
//colorPicker 颜色选择组件
{
type: 'colorPicker',
field: 'color',
title: '颜色',
value: '#ff7271',
props: {
disabled: false, //是否禁用
},
},
//rate 评分组件
{
type: 'rate',
field: 'rate',
title: '推荐级别',
value: 3.5,
props: {
max: 10, //最大分值
disabled: false, //是否为只读
}
},
//slider 滑块组件
{
type: 'slider',
field: 'slider',
title: '滑块',
value: [0, 50],
props: {
min: 0, //最小值
max: 100, //最大值
disabled: false, //是否禁用滑块
range: true, //是否为范围选择
}
},
{
type: 'wangEditor',
field: 'txt',
title: '富文本框',
value: '<h1 style="color: #419bf7;">form-create</h1><a href="https://github.com/xaboy/form-create">GitHub</a>'
},
//upload 上传组件
{
type: 'upload',
field: 'pic',
title: '轮播图',
value: ['http://file.lotkk.com/form-create.jpeg'], //input值
props: {
uploadType: 'image',
action: 'http://0.0.0.0:8000/index/index/upload.html', //必选参数,上传的地址
onSuccess: function (res, file) {
file.url = res.data.filePath;
}, //文件上传成功时的钩子,返回字段为 response, file, fileList
}
},
//frame 框架组件
{
type: 'frame',
title: '素材',
field: 'fodder',
value: ['http://file.lotkk.com/form-create.jpeg'],
props: {
type: 'image', //frame类型,有input,file,image
src: '/iframe.html', //iframe地址
maxLength: 2, //value的最大数量
},
},
{
type: 'tree',
title: '权限',
field: 'tree',
value: [12, 13, 14],
props: {
showCheckbox: true,
data: [
{
title: 'parent 1',
expand: true,
selected: false,
id: 1,
children: [
{
title: 'parent 1-1',
expand: true,
id: 2,
children: [
{
title: 'leaf 1-1-1',
disabled: true,
id: 11
},
{
title: 'leaf 1-1-2',
selected: true,
id: 12
}
]
},
{
title: 'parent 1-2',
expand: true,
id: 3,
children: [
{
title: 'leaf 1-2-1',
checked: true,
id: 13,
},
{
title: 'leaf 1-2-1',
id: 14,
}
]
}
]
}
],//展示数据
props: {
label: 'title'
}, //配置选项
type: 'indeterminate',
}
}
]
}
addressEffect
import data from '@form-create/data/dist/province_city'
//自定义属性 自动插入省市区数据
export default {
name: 'address',
components: ['cascader'],
//rule初始化
init(val, rule, fapi) {
rule.props.options = data;
}
}
testSlot 组件
//自定义组件
Vue.component('testSlot', {
render(h) {
return h('div', {}, [this.$slots.asd]);
}
})
← Example Update log →