vue实现搜索框和树形控件功能

前言：

页面效果需要做一个搜索框，下面是区域树，选择区域后显示区域内部详细信息。

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)方法 。切换区域时， 如果搜索条件改变了，先初始化搜索条件，并且由于监听了搜索条件变化，会重新请求接口数据。