树选择 treeselect
# 一、组件简介
AppInput 的 treeselect 类型的组件是对 vxe-table <vxe-pulldown> (opens new window) 和 ant design <a-tree /> (opens new window) 组件的二次封装。
# 二、Props 参数
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
columns | 配置项 | object | undefined | |
value | 输入框内容 | string | undefined | |
typeParams | 类型参数 | object | {} | |
size | 控件大小,配置项中没有 size 属性时,使用此属性 | string | large、default、small | small |
reseal | 是否要重新封装组件 | boolean | false |
# 2.1 columns 详细配置
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
xtype | AppInput的类型 | string | textfield | |
allowClear | 是否允许点击清除图标删除内容 | boolean | false | |
clearable | 与 allowClear 功能相同 (优先取allowClear) | boolean | false | |
placeholder | 占位符,提示文字 | string | undefined | |
defaultValue | 默认值 | string | 预设默认值 | undefined |
disabled | 是否禁用(优先) | boolean, function(typeParams): boolean | false | |
readOnly | 与 disabled 功能相同 (优先取disabled) | boolean | false | |
size | 控件大小 | string | large、default、small | small |
storeConfig | 联网数据配置 | object,array | storeConfig详解 | |
selCols | 当前请求中的字段 | string | undefined | |
retCols | 当前表单或表格中的字段名称 | string | undefined | |
dataResult | 当前数据 | array | undefined | |
allResult | 所有数据 | array | undefined | |
displayField | 下拉框中显示的字段(相当于name) | string | undefined | |
valueField | 下拉框选择后的值(相当于code) | string | undefined | |
needDefault | 将第一条数据作为默认值 | boolean | false | |
editable | 是否可编辑 | boolean | false |
# storeConfig 详解
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
findUrl | 查询链接 | string | allUser(/smm/smm/employee/listpage)、secclass(master/secclass/list) | undefined |
replaceFields | 替换 treeNode 中title,key,children 字段为 treeData 中对应的字段 | object | {children, title , key} | |
autoExpandParent | 是否自动展开父节点 | boolean | true | |
isChecked | 节点前添加复选框 | boolean | false | |
defaultExpandAll | 默认展开所有树节点 | boolean | false | |
defaultExpandParent | 默认展开父节点 | boolean | false |
# 2.2 typeParams 说明
typeParams 译为类型参数,用来标记当前输入组件的类型,它是一个对象,可以为其传递任意属性,当值发生变化后,会将其按原样返回。
例如:
- 在表格中使用时,希望为其添加行记录
:typeParams="{ row }"
- 在表单中使用时,希望为其添加表单数据
:typeParams="{ formData }"
# 三、Events 事件
属性 | 说明 | 参数 |
---|---|---|
valueChange | 当数据改变后触发 | { columns: 列配置对象, value: 当前值, oldValue: 旧值 } |
showDropDownBefore | 显示下拉框之前 | (back: 是否继续执行,可以是任意名称) => boolean |
提示
- Events 事件中的方法均可挂载在配置项下
- 当需要重新封装组件(reseal 为 true)时,若挂载在配置项下,则无效
# 四、简单示例
<template>
<app-input :value.sync="treeSelect" :columns="treeSelectColumns" />
</template>
<script>
export default {
name: '组件应有自己的名字,首字母大写,按目录使用驼峰命名',
data () {
treeSelect: undefined,
treeSelectColumns: {
xtype: 'treeselect',
storeConfig: {
findUrl: '/mock/tree/list'
// replaceFields: [{title: '', value: '', key: '', children: []}],
// isChecked: true,
// defaultExpandAll: true,
// defaultExpandParent: true
},
displayField: 'title',
valueField: 'id'
// allowClear: true,
// clearable: true,
// defaultValue: undefined,
// disabled: true,
// readOnly: true,
// placeholder: '占位符',
// size: 'small'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31