按部就班VUE+Element 前端應用開發(8）--- 樹列表組件的使用

時間 2020-06-08

標籤按部就班 vue+element vue element 前端應用開發列表組件使用简体版

原文原文鏈接

在我前面隨筆《按部就班VUE+Element 前端應用開發(6）--- 常規Element 界面組件的使用》裏面曾經介紹過一些常規的界面組件的處理，主要介紹到單文本輸入框、多文本框、下拉列表，以及按鈕、圖片展現、彈出對話框、表單處理，本篇隨筆補充這一個主題，介紹樹列表組件和下拉列表樹組件在項目中的使用，以及一個SplitPanel的組件。css

一、常規樹列表控件的使用

衆所周知，通常界面不少狀況涉及到樹列表的處理，如類型展現，若是是一層的，能夠用下拉列表代替，若是是多個層級的，採用樹控件展現會更加直觀。html

在Element裏面也有一個el-tree的控件，以下所示，這裏主要對它的各類屬性和方法進行介紹。前端

簡單的代碼以下所示vue

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

主要在script部分裏面指定它的data數據，以及單擊節點的事件處理，結合卡片控件的展現，咱們能夠把樹放在其中進行展現node

界面代碼以下所示，經過 default-expand-all 能夠設置所有展開，icon-class 指定節點圖標（也能夠默認不指定）git

        <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="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 }}
               &nbsp;&nbsp;
                </span>
              </span>
            </el-tree>
          </div>
        </el-card>

其中界面裏面，咱們經過 class="custom-tree-node"，來指定樹列表的展示內容，能夠加入圖標等信息github

而在script裏面，定義了一個treedata的屬性npm

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

若是設置有選擇框，獲得界面以下所示。後端

主要設置 show-checkbox 和 @check-change="handleCheckChange" 便可。app

界面代碼以下所示

<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 }}
   &nbsp;&nbsp;
    </span>
  </span>
</el-tree>

而對於樹列表，能夠進行一個過濾處理操做，以下界面所示。

在內容區增長一個input的文本框進行過濾處理，並綁定對應的屬性變量

<el-input
  v-model="filterText"
  placeholder="輸入關鍵字進行過濾"
  clearable
  prefix-icon="el-icon-search"
/>

樹列表控件須要增長過濾函數綁定 :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 }}
   &nbsp;&nbsp;
    </span>
  </span>
</el-tree>

script的處理代碼以下所示，須要watch過濾的綁定值，變化就進行過濾處理。

爲了在列表結合中進行快速的過濾，咱們能夠在上次介紹的列表界面裏面增長一個樹列表的快速查詢處理。以下界面所示。

這裏列表裏面增長了一個第三方組件 splitpanes，用來劃分區塊展現，並且能夠拖動，很是不錯，地址是：https://github.com/antoniandre/splitpanes

這個組件的Demo展現地址以下所示：https://antoniandre.github.io/splitpanes

效果大概以下所示

npm 安裝以下所示

npm i --S splitpanes

安裝成功後，而後在vue文件的script部分裏面引入便可

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

它的使用代碼也很簡單

<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>

個人列表界面使用了兩個Panel便可實現左側樹的展現，和右側常規列表查詢的處理。

二、下拉框樹列表的處理

除了常規的樹列表展現內容外，咱們也須要一個在下拉列表中展現樹內容的界面組件。

這裏又得引入一個第三方的界面組件，所以Element的Select組件不支持樹列表。

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

官網地址：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則是樹列表的節點數據。

<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>

個人測試界面代碼以下所示

          <div style="height:180px">
            <!--
                v-model 綁定選中的集合
                options 樹節點數據
                 defaultExpandLevel 展開層次，Infinity爲全部
                 flat 爲子節點不影響父節點，不關聯
             -->
            <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 {
      // 過濾條件
      filterText: '',
      // 初始化樹列表
      treedata: [
        {
          label: '一級 1',
          id: '1',
          children: [{
            id: '1-1',
            label: '二級 1-1',
            children: [{
              label: '三級 1-1-1',
              id: '1-1-1'
            }, {
              label: '三級 1-1-2',
              id: '1-1-2'
            }, {
              label: '三級 1-1-3',
              id: '1-1-3'
            }]
          }]
        }
      ],
      value: ['1-1-2']
    }
  },
................
}
</script>