Tree 樹形控制元件

Tree 樹形控制元件

用清晰的層級結構展示資訊，可展開或摺疊。

基礎用法

基礎的樹形結構展示。

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

export default {

data() {

return {

data: [{

label: '一級 1',

children: [{

label: '二級 1-1',

children: [{

label: '三級 1-1-1'

}]

}]

}, {

label: '一級 2',

children: [{

label: '二級 2-1',

children: [{

label: '三級 2-1-1'

}]

}, {

label: '二級 2-2',

children: [{

label: '三級 2-2-1'

}]

}]

}, {

label: '一級 3',

children: [{

label: '二級 3-1',

children: [{

label: '三級 3-1-1'

}]

}, {

label: '二級 3-2',

children: [{

label: '三級 3-2-1'

}]

}]

}],

defaultProps: {

children: 'children',

label: 'label'

}

};

},

methods: {

handleNodeClick(data) {

console.log(data);

}

}

};

</script>
 

可選擇

適用於需要選擇層級時使用。

本例還展示了動態載入節點資料的方法。

<el-tree

:props="props"

:load="loadNode"

lazy

show-checkbox

@check-change="handleCheckChange">

</el-tree>
<script>

export default {

data() {

return {

props: {

label: 'name',

children: 'zones'

},

count: 1

};

},

methods: {

handleCheckChange(data, checked, indeterminate) {

console.log(data, checked, indeterminate);

},

handleNodeClick(data) {

console.log(data);

},

loadNode(node, resolve) {

if (node.level === 0) {

return resolve([{ name: 'region1' }, { name: 'region2' }]);

}

if (node.level > 3) return resolve([]);
 

    var hasChild;
    if (node.data.name === 'region1') {
      hasChild = true;
    } else if (node.data.name === 'region2') {
      hasChild = false;
    } else {
      hasChild = Math.random() &gt; 0.5;
    }

    setTimeout(() =&gt; {
      var data;
      if (hasChild) {
        data = [{
          name: 'zone' + this.count++
        }, {
          name: 'zone' + this.count++
        }];
      } else {
        data = [];
      }

      resolve(data);
    }, 500);
  }
}
 

};

</script>

懶載入自定義葉子節點

由於在點選節點時才進行該層資料的獲取，預設情況下 Tree 無法預知某個節點是否為葉子節點，所以會為每個節點新增一個下拉按鈕，如果節點沒有下層資料，則點選後下拉按鈕會消失。同時，你也可以提前告知 Tree 某個節點是否為葉子節點，從而避免在葉子節點前渲染下拉按鈕。

<el-tree

:props="props1"

:load="loadNode1"

lazy

show-checkbox>

</el-tree>
<script>

export default {

data() {

return {

props1: {

label: 'name',

children: 'zones',

isLeaf: 'leaf'

},

};

},

methods: {

loadNode1(node, resolve) {

if (node.level === 0) {

return resolve([{ name: 'region' }]);

}

if (node.level > 1) return resolve([]);
    setTimeout(() =&gt; {
      const data = [{
        name: 'leaf',
        leaf: true
      }, {
        name: 'zone'
      }];

      resolve(data);
    }, 500);
  }
}

};

</script>

預設展開和預設選中

可將 Tree 的某些節點設定為預設展開或預設選中

分別通過default-expanded-keys和default-checked-keys設定預設展開和預設選中的節點。需要注意的是，此時必須設定node-key，其值為節點資料中的一個欄位名，該欄位在整棵樹中是唯一的。

<el-tree

:data="data2"

show-checkbox

node-key="id"

:default-expanded-keys="[2, 3]"

:default-checked-keys="[5]"

:props="defaultProps">

</el-tree>
<script>

export default {

data() {

return {

data2: [{

id: 1,

label: '一級 1',

children: [{

id: 4,

label: '二級 1-1',

children: [{

id: 9,

label: '三級 1-1-1'

}, {

id: 10,

label: '三級 1-1-2'

}]

}]

}, {

id: 2,

label: '一級 2',

children: [{

id: 5,

label: '二級 2-1'

}, {

id: 6,

label: '二級 2-2'

}]

}, {

id: 3,

label: '一級 3',

children: [{

id: 7,

label: '二級 3-1'

}, {

id: 8,

label: '二級 3-2'

}]

}],

defaultProps: {

children: 'children',

label: 'label'

}

};

}

};

</script>

禁用狀態

可將 Tree 的某些節點設定為禁用狀態

通過disabled設定禁用狀態。

<el-tree

:data="data3"

show-checkbox

node-key="id"

:default-expanded-keys="[2, 3]"

:default-checked-keys="[5]">

</el-tree>
<script>

export default {

data() {

return {

data3: [{

id: 1,

label: '一級 2',

children: [{

id: 3,

label: '二級 2-1',

children: [{

id: 4,

label: '三級 3-1-1'

}, {

id: 5,

label: '三級 3-1-2',

disabled: true

}]

}, {

id: 2,

label: '二級 2-2',

disabled: true,

children: [{

id: 6,

label: '三級 3-2-1'

}, {

id: 7,

label: '三級 3-2-2',

disabled: true

}]

}]

}],

defaultProps: {

children: 'children',

label: 'label'

}

};

}

};

</script>

樹節點的選擇

通過 node 獲取通過 key 獲取通過 node 設定通過 key 設定清空

本例展示如何獲取和設定選中節點。獲取和設定各有兩種方式：通過 node 或通過 key。如果需要通過 key 來獲取或設定，則必須設定node-key。

<el-tree

:data="data2"

show-checkbox

default-expand-all

node-key="id"

ref="tree"

highlight-current

:props="defaultProps">

</el-tree>
<div class="buttons">

<el-button @click="getCheckedNodes">通過 node 獲取</el-button>

<el-button @click="getCheckedKeys">通過 key 獲取</el-button>

<el-button @click="setCheckedNodes">通過 node 設定</el-button>

<el-button @click="setCheckedKeys">通過 key 設定</el-button>

<el-button @click="resetChecked">清空</el-button>

</div>
<script>

export default {

methods: {

getCheckedNodes() {

console.log(this.$refs.tree.getCheckedNodes());

},

getCheckedKeys() {

console.log(this.$refs.tree.getCheckedKeys());

},

setCheckedNodes() {

this.$refs.tree.setCheckedNodes([{

id: 5,

label: '二級 2-1'

}, {

id: 9,

label: '三級 1-1-1'

}]);

},

setCheckedKeys() {

this.$refs.tree.setCheckedKeys([3]);

},

resetChecked() {

this.$refs.tree.setCheckedKeys([]);

}

},
data() {
  return {
    data2: [{
      id: 1,
      label: '一級 1',
      children: [{
        id: 4,
        label: '二級 1-1',
        children: [{
          id: 9,
          label: '三級 1-1-1'
        }, {
          id: 10,
          label: '三級 1-1-2'
        }]
      }]
    }, {
      id: 2,
      label: '一級 2',
      children: [{
        id: 5,
        label: '二級 2-1'
      }, {
        id: 6,
        label: '二級 2-2'
      }]
    }, {
      id: 3,
      label: '一級 3',
      children: [{
        id: 7,
        label: '二級 3-1'
      }, {
        id: 8,
        label: '二級 3-2'
      }]
    }],
    defaultProps: {
      children: 'children',
      label: 'label'
    }
  };
}

};

</script>

自定義節點內容

節點的內容支援自定義，可以在節點區新增按鈕或圖示等內容

可以通過兩種方法進行樹節點內容的自定義：render-content和 scoped slot。使用render-content指定渲染函式，該函式返回需要的節點區內容即可。渲染函式的用法請參考 Vue 文件。使用 scoped slot 會傳入兩個引數node和data，分別表示當前節點的 Node 物件和當前節點的資料。注意：由於 jsfiddle 不支援 JSX 語法，所以render-content示例在 jsfiddle 中無法執行。但是在實際的專案中，只要正確地配置了相關依賴，就可以正常執行。

<div class="custom-tree-container">

<div class="block">

<p>使用 render-content</p>

<el-tree

:data="data4"

show-checkbox

node-key="id"

default-expand-all

:expand-on-click-node="false"

:render-content="renderContent">

</el-tree>

</div>

<div class="block">

<p>使用 scoped slot</p>

<el-tree

:data="data5"

show-checkbox

node-key="id"

default-expand-all

:expand-on-click-node="false">

<span class="custom-tree-node" slot-scope="{ node, data }">

<span>{{ node.label }}</span>

<span>

<el-button

type="text"

size="mini"

@click="() => append(data)">

Append

</el-button>

<el-button

type="text"

size="mini"

@click="() => remove(node, data)">

Delete

</el-button>

</span>

</span>

</el-tree>

</div>

</div>
<script>

let id = 1000;
export default {

data() {

const data = [{

id: 1,

label: '一級 1',

children: [{

id: 4,

label: '二級 1-1',

children: [{

id: 9,

label: '三級 1-1-1'

}, {

id: 10,

label: '三級 1-1-2'

}]

}]

}, {

id: 2,

label: '一級 2',

children: [{

id: 5,

label: '二級 2-1'

}, {

id: 6,

label: '二級 2-2'

}]

}, {

id: 3,

label: '一級 3',

children: [{

id: 7,

label: '二級 3-1'

}, {

id: 8,

label: '二級 3-2'

}]

}];

return {

data4: JSON.parse(JSON.stringify(data)),

data5: JSON.parse(JSON.stringify(data))

}

},
methods: {
  append(data) {
    const newChild = { id: id++, label: 'testtest', children: [] };
    if (!data.children) {
      this.$set(data, 'children', []);
    }
    data.children.push(newChild);
  },

  remove(node, data) {
    const parent = node.parent;
    const children = parent.data.children || parent.data;
    const index = children.findIndex(d =&gt; d.id === data.id);
    children.splice(index, 1);
  },

  renderContent(h, { node, data, store }) {
    return (
      &lt;span class="custom-tree-node"&gt;
        &lt;span&gt;{node.label}&lt;/span&gt;
        &lt;span&gt;
          &lt;el-button size="mini" type="text" on-click={ () =&gt; this.append(data) }&gt;Append&lt;/el-button&gt;
          &lt;el-button size="mini" type="text" on-click={ () =&gt; this.remove(node, data) }&gt;Delete&lt;/el-button&gt;
        &lt;/span&gt;
      &lt;/span&gt;);
  }
}

};

</script>
<style>

.custom-tree-node {

flex: 1;

display: flex;

align-items: center;

justify-content: space-between;

font-size: 14px;

padding-right: 8px;

}

</style>

節點過濾

通過關鍵字過濾樹節點

在需要對節點進行過濾時，呼叫 Tree 例項的filter方法，引數為關鍵字。需要注意的是，此時需要設定filter-node-method，值為過濾函式。

<el-input

placeholder="輸入關鍵字進行過濾"

v-model="filterText">

</el-input>
<el-tree

class="filter-tree"

:data="data2"

:props="defaultProps"

default-expand-all

:filter-node-method="filterNode"

ref="tree2">

</el-tree>
<script>

export default {

watch: {

filterText(val) {

this.$refs.tree2.filter(val);

}

},
methods: {
  filterNode(value, data) {
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
  }
},

data() {
  return {
    filterText: '',
    data2: [{
      id: 1,
      label: '一級 1',
      children: [{
        id: 4,
        label: '二級 1-1',
        children: [{
          id: 9,
          label: '三級 1-1-1'
        }, {
          id: 10,
          label: '三級 1-1-2'
        }]
      }]
    }, {
      id: 2,
      label: '一級 2',
      children: [{
        id: 5,
        label: '二級 2-1'
      }, {
        id: 6,
        label: '二級 2-2'
      }]
    }, {
      id: 3,
      label: '一級 3',
      children: [{
        id: 7,
        label: '二級 3-1'
      }, {
        id: 8,
        label: '二級 3-2'
      }]
    }],
    defaultProps: {
      children: 'children',
      label: 'label'
    }
  };
}

};

</script>

手風琴模式

對於同一級的節點，每次只能展開一個

<el-tree

:data="data"

:props="defaultProps"

accordion

@node-click="handleNodeClick">

</el-tree>
<script>

export default {

data() {

return {

data: [{

label: '一級 1',

children: [{

label: '二級 1-1',

children: [{

label: '三級 1-1-1'

}]

}]

}, {

label: '一級 2',

children: [{

label: '二級 2-1',

children: [{

label: '三級 2-1-1'

}]

}, {

label: '二級 2-2',

children: [{

label: '三級 2-2-1'

}]

}]

}, {

label: '一級 3',

children: [{

label: '二級 3-1',

children: [{

label: '三級 3-1-1'

}]

}, {

label: '二級 3-2',

children: [{

label: '三級 3-2-1'

}]

}]

}],

defaultProps: {

children: 'children',

label: 'label'

}

};

},

methods: {

handleNodeClick(data) {

console.log(data);

}

}

};

</script>

可拖拽節點

通過 draggable 屬性可讓節點變為可拖拽。

<el-tree

:data="data6"

node-key="id"

default-expand-all

@node-drag-start="handleDragStart"

@node-drag-enter="handleDragEnter"

@node-drag-leave="handleDragLeave"

@node-drag-over="handleDragOver"

@node-drag-end="handleDragEnd"

@node-drop="handleDrop"

draggable

:allow-drop="allowDrop"

:allow-drag="allowDrag">

</el-tree>
<script>

export default {

data() {

return {

data6: [{

id: 1,

label: '一級 1',

children: [{

id: 4,

label: '二級 1-1',

children: [{

id: 9,

label: '三級 1-1-1'

}, {

id: 10,

label: '三級 1-1-2'

}]

}]

}, {

id: 2,

label: '一級 2',

children: [{

id: 5,

label: '二級 2-1'

}, {

id: 6,

label: '二級 2-2'

}]

}, {

id: 3,

label: '一級 3',

children: [{

id: 7,

label: '二級 3-1'

}, {

id: 8,

label: '二級 3-2',

children: [{

id: 11,

label: '三級 3-2-1'

}, {

id: 12,

label: '三級 3-2-2'

}, {

id: 13,

label: '三級 3-2-3'

}]

}]

}],

defaultProps: {

children: 'children',

label: 'label'

}

};

},

methods: {

handleDragStart(node, ev) {

console.log('drag start', node);

},

handleDragEnter(draggingNode, dropNode, ev) {

console.log('tree drag enter: ', dropNode.label);

},

handleDragLeave(draggingNode, dropNode, ev) {

console.log('tree drag leave: ', dropNode.label);

},

handleDragOver(draggingNode, dropNode, ev) {

console.log('tree drag over: ', dropNode.label);

},

handleDragEnd(draggingNode, dropNode, dropType, ev) {

console.log('tree drag end: ', dropNode && dropNode.label, dropType);

},

handleDrop(draggingNode, dropNode, dropType, ev) {

console.log('tree drop: ', dropNode.label, dropType);

},

allowDrop(draggingNode, dropNode, type) {

if (dropNode.data.label === '二級 3-1') {

return type !== 'inner';

} else {

return true;

}

},

allowDrag(draggingNode) {

return draggingNode.data.label.indexOf('三級 3-2-2') === -1;

}

}

};

</script>

Attributes

props

方法

Tree 內部使用了 Node 型別的物件來包裝使用者傳入的資料，用來儲存目前節點的狀態。 Tree 擁有如下方法：

Events

Scoped Slot

本文件系騰訊云云+社群成員共同維護，如有問題請聯絡 [email protected]

https://cloud.tencent.com/developer/section/1489888