Vue Element前端應(yīng)用開(kāi)發(fā)之樹(shù)列表組件

更新時(shí)間：2021年05月13日 08:48:08 作者：伍華聰

本篇隨筆主要介紹樹(shù)列表組件和下拉列表樹(shù)組件在項(xiàng)目中的使用，以及一個(gè)SplitPanel的組件。

1、常規(guī)樹(shù)列表控件的使用

眾所周知，一般界面很多情況涉及到樹(shù)列表的處理，如類(lèi)型展示，如果是一層的，可以用下拉列表代替，如果是多個(gè)層級(jí)的，采用樹(shù)控件展示會(huì)更加直觀(guān)。

在Element里面也有一個(gè)el-tree的控件，如下所示，這里主要對(duì)它的各種屬性和方法進(jìn)行介紹。

簡(jiǎn)單的代碼如下所示

<el-tree :data="data"  @node-click="handleNodeClick"></el-tree>

主要在script部分里面指定它的data數(shù)據(jù)，以及單擊節(jié)點(diǎn)的事件處理，結(jié)合卡片控件的展示，我們可以把樹(shù)放在其中進(jìn)行展示

界面代碼如下所示，通過(guò)default-expand-all 可以設(shè)置全部展開(kāi)，icon-class 指定節(jié)點(diǎn)圖標(biāo)（也可以默認(rèn)不指定）

<el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>樹(shù)列表</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按鈕</el-button>
          </div>
          <div>
            <el-tree
              style="padding-top:10px"
              :data="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>

其中界面里面，我們通過(guò)class="custom-tree-node"，來(lái)指定樹(shù)列表的展現(xiàn)內(nèi)容，可以加入圖標(biāo)等信息

而在script里面，定義了一個(gè)treedata的屬性

// 初始化樹(shù)列表
      treedata: [
        {
          label: '一級(jí) 1',
          id: '1',
          children: [{
            id: '1-1',
            label: '二級(jí) 1-1',
            children: [{
              label: '三級(jí) 1-1-1',
              id: '1-1-1'
            }, {
              label: '三級(jí) 1-1-2',
              id: '1-1-2'
            }, {
              label: '三級(jí) 1-1-3',
              id: '1-1-3'
            }]
          }]
        }
      ]

如果設(shè)置有選擇框，得到界面如下所示。

主要設(shè)置show-checkbox 和@check-change="handleCheckChange" 即可。

界面代碼如下所示

<el-tree
  style="padding-top:10px"
  :data="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>

而對(duì)于樹(shù)列表，可以進(jìn)行一個(gè)過(guò)濾處理操作，如下界面所示。

在內(nèi)容區(qū)增加一個(gè)input的文本框進(jìn)行過(guò)濾處理，并綁定對(duì)應(yīng)的屬性變量

<el-input
  v-model="filterText"
  placeholder="輸入關(guān)鍵字進(jìn)行過(guò)濾"
  clearable
  prefix-icon="el-icon-search"
/>

樹(shù)列表控件需要增加過(guò)濾函數(shù)綁定:filter-node-method="filterNode"，如下代碼所示。

<el-tree
  ref="tree"
  class="filter-tree"
  style="padding-top:10px"
  :data="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>

script的處理代碼如下所示，需要watch過(guò)濾的綁定值，變化就進(jìn)行過(guò)濾處理。

為了在列表結(jié)合中進(jìn)行快速的過(guò)濾，我們可以在上次介紹的列表界面里面增加一個(gè)樹(shù)列表的快速查詢(xún)處理。如下界面所示。

這里列表里面增加了一個(gè)第三方組件splitpanes，用來(lái)劃分區(qū)塊展示，而且可以拖動(dòng)，非常不錯(cuò)，地址是：

https://github.com/antoniandre/splitpanes

這個(gè)組件的Demo展示地址如下所示：https://antoniandre.github.io/splitpanes

效果大概如下所示

npm安裝如下所示

npm i --S splitpanes

安裝成功后，然后在vue文件的script部分里面引入即可

import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

它的使用代碼也很簡(jiǎn)單

<splitpanes style="height: 400px">
  <pane min-size="20">1</pane>
  <pane>
    <splitpanes horizontal>
      <pane>2</pane>
      <pane>3</pane>
      <pane>4<pane>
    </splitpanes>
  </pane>
  <pane>5</pane>
</splitpanes>

我的列表界面使用了兩個(gè)Panel即可實(shí)現(xiàn)左側(cè)樹(shù)的展示，和右側(cè)常規(guī)列表查詢(xún)的處理。

2、下拉框樹(shù)列表的處理

除了常規(guī)的樹(shù)列表展示內(nèi)容外，我們也需要一個(gè)在下拉列表中展示樹(shù)內(nèi)容的界面組件。

這里又得引入一個(gè)第三方的界面組件，因此Element的Select組件不支持樹(shù)列表。

GitHub地址：https://github.com/riophae/vue-treeselect

官網(wǎng)地址：https://vue-treeselect.js.org/

NPM安裝：

npm install --save @riophae/vue-treeselect

界面代碼如下所示。

<template>
  <div id="app">
    <treeselect v-model="value" :multiple="true" :options="options" />
  </div>
</template>

這里的value就是選中的集合，options則是樹(shù)列表的節(jié)點(diǎn)數(shù)據(jù)。

<script>
  // import the component
  import Treeselect from '@riophae/vue-treeselect'
  // import the styles
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    // register the component
    components: { Treeselect },
    data() {
      return {
        // define the default value
        value: null,
        // define options
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      }
    },
  }
</script>

我的測(cè)試界面代碼如下所示

<div style="height:180px">
            <!--
                v-model 綁定選中的集合
                options 樹(shù)節(jié)點(diǎn)數(shù)據(jù)
                 defaultExpandLevel 展開(kāi)層次，Infinity為所有
                 flat 為子節(jié)點(diǎn)不影響父節(jié)點(diǎn)，不關(guān)聯(lián)
             -->
            <treeselect
              v-model="value"
              :options="treedata"
              :multiple="true"
              :flat="true"
              :default-expand-level="Infinity"
              :open-on-click="true"
              :open-on-focus="true"
              clearable
              :max-height="200"
            />
          </div>

<script>
// import vue-treeselect component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'Tree',
  components: { Treeselect },
  data() {
    return {
      // 過(guò)濾條件
      filterText: '',
      // 初始化樹(shù)列表
      treedata: [
        {
          label: '一級(jí) 1',
          id: '1',
          children: [{
            id: '1-1',
            label: '二級(jí) 1-1',
            children: [{
              label: '三級(jí) 1-1-1',
              id: '1-1-1'
            }, {
              label: '三級(jí) 1-1-2',
              id: '1-1-2'
            }, {
              label: '三級(jí) 1-1-3',
              id: '1-1-3'
            }]
          }]
        }
      ],
      value: ['1-1-2']
    }
  },
................
}
</script>

來(lái)一張幾個(gè)樹(shù)列表一起的對(duì)比展示界面。