前言:
页面效果需要做一个搜索框,下面是区域树,选择区域后显示区域内部详细信息。
input输入框组件参数说明:Input 输入框https://element.eleme.cn/#/zh-CN/component/input
Input 为受控组件,它总会显示 Vue 绑定值。
通常情况下,应当处理
input
事件,并更新组件的绑定值(或使用v-model
)。否则,输入框内显示的值将不会改变。
代码:
<el-input
v-model="keyWord"
:clear-icon-click="handleSearch"
:on-icon-click="handleSearch"
placeholder="搜索区域名称"
suffix-icon="h-icon-search"
clearable
@keyup.enter.native="handleSearch"
/>
<el-input
v-model="keyWord"
placeholder="搜索区域名称"
:clearable="true"
@clear="handleSearch"
>
<i slot="suffix" class="el-input__icon h-icon-search" @click="handleSearch"></i>
</el-input>
Tree 树形控件参数说明:Tree 树形控件https://element.eleme.cn/#/zh-CN/component/tree
基础的树形结构展示默认无边框,建议使用容器边框。
Tree
内部使用了 Node 类型的对象来包装用户传入的数据,用来保存目前节点的状态。
代码:
<div class="tree-wrap">
<el-tree
ref="areaTree"
:default-expand-all="true"
:props="treeProps"
node-key="id"
parent-key="pId"
:data="treeData"
:before-click="handleBeforeClick"
@current-change="handleCurrentChange"
>
<span slot-scope="{ node }" class="el-tree-node__label">
<p :title="node.label">
<h-highlight :highlight-key="keyWord">{{ $t(node.label) }}</h-highlight>
</p>
</span>
</el-tree>
</div>
数据结构
同级的数据结构使用子节点的parent-key和父节点的node-key对应来展现层级。例如:
treeData: [ { id: 1, label: '一级' }, { id: 2, pId: 1, label: '二级' }, { id: 3, pId: 2, label: '三级 1' }, { id: 4, pId: 2, label: '三级 2' } ],
树配置项props
treeProps: { children: 'children', label: 'name', icon: 'icon', },
默认展开和默认选中
分别通过
default-expanded-keys
和default-checked-keys
设置默认展开和默认选中的节点。需要注意的是,此时必须设置node-key
,其值为节点数据中的一个字段名,该字段在整棵树中是唯一的。@current-change="handleCurrentChange"在搜索条件发生变化时被自动调用。
树节点的选择
获取和设置各有两种方式:通过 node 或通过 key。如果需要通过 key 来获取或设置,则必须设置
node-key
。自定义节点内容
节点的内容支持自定义,可以在节点区添加按钮或图标等内容。demo 使用
prefix-content
和render-content
指定渲染函数,该函数返回需要的节点区内容即可。节点过滤
在需要对节点进行过滤时,调用 Tree 实例的
filter
方法,参数为关键字。需要注意的是,此时需要设置filter-node-method
,值为过滤函数。
注: 搜索条件发生变化时,子组件触发事件:
handleCurrentChange(val) {
// 获得目前被选中的节点
this.setCurrentTreeNode(val)
this.$emit('current-change', val, this.treeData)
},
父组件引用子组件时写 @current-change="areaChange" ,触发areaChange(val)方法 。切换区域时, 如果搜索条件改变了,先初始化搜索条件,并且由于监听了搜索条件变化,会重新请求接口数据。