给form-generator 添加树tree
form-generator是一个非常好用的前端表单生成器,但其中表单组件中没有tree,今天弄了半天,终于给加上了。
先看添加自定义组件的说明
原说明文档
一定要重视阅读原作者给出的文档。
将组件添加到表单设计器
给左侧组件菜单添加树图标
按文档中的指引,先“在文件src\components\generator\config.js中添加一个布局型组件”,如下图
#pic_center =30x30)
代码,这里我偷懒了,直接找到上面的“级联选择”给CV下来的,其中的属性值要按elementUI中的规定去写。
...
export const layoutComponents = [
...,
{
__config__: {
label: '树',
url: 'http://localhost:8080/system/dept/treeselect2', //默认测试接口
method: 'get',
dataPath: 'data', //数据在response.data中
dataConsumer: 'data', //树组件接收数据的属性
showLabel: true,
labelWidth: 50,
tag: 'el-tree',
tagIcon: 'cascader',
layout: 'colFormItem',
defaultValue: [],
dataType: 'dynamic',
span: 24,
required: true,
regList: [],
changeTag: true,
document: 'https://element.faas.ele.me/#/zh-CN/component/tree'
},
options: [{ //静态测试数据
id: 1,
value: 1,
label: '选项1',
children: [{
id: 2,
value: 2,
label: '选项1-1'
}]
}],
placeholder: '请选择',
style: {width: '100%'},
props: {
props: {
multiple: false,
label: 'label', //树节点标签对应返回数据中的字段
value: 'id', //树节点值对应返回数据中的字段
children: 'children' ///树节点的子节点对应返回数据中的字段
}
},
'default-expand-all': true, //是否默认全开
'show-checkbox': true, //是否显示checkbox
disabled: false,
clearable: true,
filterable: false,
separator: '/'
},
]
右侧添加属性控制
根据文档指引,“在src\views\index\RightPanel.vue中添加相应的编辑表单项”,如下图。
这里,我还是找到跟“级联选择”一样的地方,在上面改的。
<template v-if="['el-cascader', 'el-table', 'el-tree'].includes(activeData.__config__.tag)">
<el-divider>选项</el-divider>
<el-form-item v-if="activeData.__config__.dataType" label="数据类型">
<el-radio-group v-model="activeData.__config__.dataType" size="small">
<el-radio-button label="dynamic">
动态数据
</el-radio-button>
<el-radio-button label="static">
静态数据
</el-radio-button>
</el-radio-group>
</el-form-item>
<template v-if="activeData.__config__.dataType === 'dynamic'">
<el-form-item label="接口地址">
<el-input
v-model="activeData.__config__.url"
:title="activeData.__config__.url"
placeholder="请输入接口地址"
clearable
@blur="$emit('fetch-data', activeData)"
>
<el-select
slot="prepend"
v-model="activeData.__config__.method"
:style="{width: '85px'}"
@change="$emit('fetch-data', activeData)"
>
<el-option label="get" value="get" />
<el-option label="post" value="post" />
<el-option label="put" value="put" />
<el-option label="delete" value="delete" />
</el-select>
</el-input>
</el-form-item>
<el-form-item label="数据位置">
<el-input
v-model="activeData.__config__.dataPath"
placeholder="请输入数据位置"
@blur="$emit('fetch-data', activeData)"
/>
</el-form-item>
<template v-if="activeData.props && activeData.props.props">
<el-form-item label="标签键名">
<el-input v-model="activeData.props.props.label" placeholder="请输入标签键名" />
</el-form-item>
<el-form-item label="值键名">
<el-input v-model="activeData.props.props.value" placeholder="请输入值键名" />
</el-form-item>
<el-form-item label="子级键名">
<el-input v-model="activeData.props.props.children" placeholder="请输入子级键名" />
</el-form-item>
</template>
</template>
<!-- 级联选择静态树 -->
<el-tree
v-if="activeData.__config__.dataType === 'static'"
draggable
:data="activeData.options"
node-key="id"
:expand-on-click-node="false"
:render-content="renderContent"
/>
<div v-if="activeData.__config__.dataType === 'static'" style="margin-left: 20px">
<el-button
style="padding-bottom: 0"
icon="el-icon-circle-plus-outline"
type="text"
@click="addTreeItem"
>
添加父级
</el-button>
</div>
<el-divider />
</template>
<el-form-item v-if="activeData.__config__.optionType !== undefined" label="选项样式">
<el-radio-group v-model="activeData.__config__.optionType">
<el-radio-button label="default">
默认
</el-radio-button>
<el-radio-button label="button">
按钮
</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item v-if="activeData['active-color'] !== undefined" label="开启颜色">
<el-color-picker v-model="activeData['active-color']" />
</el-form-item>
<el-form-item v-if="activeData['inactive-color'] !== undefined" label="关闭颜色">
<el-color-picker v-model="activeData['inactive-color']" />
</el-form-item>
<el-form-item v-if="activeData.__config__.showLabel !== undefined
&& activeData.__config__.labelWidth !== undefined" label="显示标签"
>
<el-switch v-model="activeData.__config__.showLabel" />
</el-form-item>
<el-form-item v-if="activeData.branding !== undefined" label="品牌烙印">
<el-switch v-model="activeData.branding" @input="changeRenderKey" />
</el-form-item>
<el-form-item v-if="activeData['allow-half'] !== undefined" label="允许半选">
<el-switch v-model="activeData['allow-half']" />
</el-form-item>
<el-form-item v-if="activeData['default-expand-all'] !== undefined" label="节点全部展开">
<el-switch v-model="activeData['default-expand-all']" />
</el-form-item>
完成后的样子
从左侧下方把刚才添加的树拖进中间位置,直接就出现了图中的效果了。
其他功能还在摸索中……