循序渐进VUE+Element 前端应用开发(8）--- 树列表组件的使用

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

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

// 初始化树列表
      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'
            }]
          }]
        }
      ]

界面代码如下所示
<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>

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

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

npm i --S splitpanes

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>

npm install --save @riophae/vue-treeselect

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

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