今天我們來了解一種很實(shí)用的組件：Vue 樹形穿梭框。它是一個(gè)集成了樹形結(jié)構(gòu)和穿梭框的組件，在一些需要用到多層級選擇的場景下十分方便。

首先要介紹的是樹形結(jié)構(gòu)。在 Web 開發(fā)中，樹形結(jié)構(gòu)是一種非常常見的數(shù)據(jù)結(jié)構(gòu)，有時(shí)我們需要在用戶界面上用到它來方便用戶選擇。Vue 樹形穿梭框正是基于這種數(shù)據(jù)結(jié)構(gòu)的。

<template>
<el-transfer
v-model="value"
:data="data"
:render-content="renderContent"
@change="handleChange">
</el-transfer>
</template>
<script>
export default {
data() {
return {
value: [],
data: []
};
},
methods: {
renderContent(h, { node, data, store }) {
return <span>{ data.label }</span>;
},
handleChange(value, direction, movedKeys) {
console.log(value, direction, movedKeys);
}
}
};
</script>

上面是一個(gè)簡單的例子。這個(gè)組件的父組件只需要傳入一些數(shù)據(jù)，然后組件內(nèi)部會(huì)自動(dòng)生成樹形結(jié)構(gòu)。其中 v-model 用于雙向綁定，而 :data 則是需要傳入的數(shù)據(jù)。@change 事件可以接收到 EMIT 的信息，打印到控制臺(tái)中看效果。

除此之外，Vue 樹形穿梭框還提供了一些配置項(xiàng)，如默認(rèn)選中，顯示勾選框等。具體可以參考官方文檔。

下面我們來看看穿梭框的部分。穿梭框常見于需要在兩個(gè)列表之間移動(dòng)元素的場景，如系統(tǒng)權(quán)限管理中分配用戶角色時(shí)，需要把用戶從“未擁有”列表中移動(dòng)到“已擁有”列表中。摒棄了繁瑣的全選、刪除等操作，穿梭框集多選和數(shù)組操作為一身，讓人十分高效率地實(shí)現(xiàn)列表的操作。

<el-transfer
v-model="tableDataUserSelected"
:data="tableDataUser"
filter-placeholder="請輸入用戶名"
filterable
:titles="['未擁有', '已擁有']"
:props="{key: 'id', label: 'name'}"
@change="handleSelectChange"
</el-transfer>

上面是穿梭框的部分代碼。其中，:titles 用于設(shè)置左右兩個(gè)列表映射的名稱；:props 則是設(shè)置父組件傳入的數(shù)據(jù)對象中“鍵”對應(yīng)的名稱。如上述代碼中，我們傳入的是 id 和 name，那么這里也需要映射過來。

通過以上的介紹，我們可以看到 Vue 樹形穿梭框在多重選擇、頁面組件化等方面具有很高的可擴(kuò)展性，非常適合需要快速搭建頁面的 Web 開發(fā)者使用。