Vue Element前端应用开发之树列表组件

1、常规树列表控件的使用

众所周知，一般界面很多情况涉及到树列表的处理，如类型展示，如果是一层的，可以用下拉列表代替，如果是多个层级的，采用树控件展示会更加直观。

在Element里面也有一个el-tree的控件，如下所示，这里主要对它的各种属性和方法进行介绍。

简单的代码如下所示

<el-tree :http://www.cppcns.com/wangluo/javascript/data="data"  @node-click="handleNodeClick"></el-tree>

主要在script部分里面指定它的data数据，以及单击节点的事件处理，结合卡片控件的展示，我们可以把树放在其中进行展示

界面代码如下所示，通过default-expand-all 可以设置全部展开，icon-class 指定节点图标（也可以默认不指定）

<el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>树列表</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <div>
            <el-tree
              style="padding-top:10px"
              :data="http://www.cppcns.com/wangluo/javascript/treedata"
              node-key="id"
              default-expand-all
              icon-class="el-icon-price-tag"
              highlight-current
              @node-click="handleNodeClick"
            >
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <span>
                  <i :class="node.icon ? node.icon : 'el-icon-price-tag'" />
                  {{ node.label }}
                 
                </span>
              </span>
            </el-tree>
          </div>
        </el-card>

其中界面里面，我们通过class="custom-tree-node"，来指定树列表的展现内容，可以加入图标等信息

而在script里面，定义了一个treedata的属性

// 初始化树列表
      treedata: [
        {
          label: '一级 1',
          id: '1',
          children: [{
            id: '1-1',
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1',
              id: '1-1-1'
            }, {
 http://www.cppcns.com             label: '三级 1-1-2',
              id: '1-1-2'
            }, {
              label: '三级 1-1-3',
              id: '1-1-3'
            }]
          }]
        }
      ]

如果设置有选择框，得到界面如下所示。

主要设置show-checkbox 和@check-change="handleCheckChange" 即可。

界面代码如下所示

<el-tree
  style="padding-top:10px"
  :data="http://www.cppcns.com/wangluo/javascript/treedata"
  node-key="id"
  default-expand-all
  highlight-current
  show-checkbox
  :default-checked-keys="['1-1-1']"
  @node-click="handleNodeClick"
  @check-change="handleCheckChange"
>
  <span slot-scope="{ node, data }" class="custom-tree-node">
    <span>
      <i :class="node.icon ? node.icon : 'el-icon-price-tag'" />
      {{ node.label }}
     
    </span>
  </span>
</el-tree>

而对于树列表，可以进行一个过滤处理操作，如下界面所示。

在内容区增加一个input的文本框进行过滤处理，并绑定对应的属性变量

<el-input
  v-model="filterText"
  placeholder="输入关键字进行过滤"
  clearable
  prefiwww.cppcns.comx-icon="el-icon-search"
/>

树列表控件需要增加过滤函数绑定:filter-node-method="filterNode"，如下代码所示。

<el-tree
  ref="tree"
  class="filter-tree"
  style="padding-top:10px"
  :data="http://www.cppcns.com/wangluo/javascript/treedata"
  node-key="id"
  default-expand-all
  highlight-current
  show-checkbox
  :filter-node-method="filterNode"
  @check-change="handleCheckChange"
  @node-click="handleNodeClick"
>
  <span slot-scope="{ node, data }" class="custom-tree-node">
    <span>
      <i :class="node.icon ? node.icon : 'el-icon-price-tag'" />
      {{ node.label }}
     
    </span>
  </span>
</el-tree>
Vue Element前端应用开发之树列表组件