在 `iview v4.3.1` 中是不提供 `select-tree` 組件的，但實際業務場景中卻會有需求。
下面是自己封裝的基于 `iview` 的結合 `select` 與 `tree` 的組件。
- 目前基本滿足了當前業務場景的功能使用
- 但還缺少一些高階的功能使用（比如說 `iview` 中 `select` 的輸入篩選 `filterable` ），因為需要實現的功能沒有那么多，就沒有再拓展，感興趣者可自行嘗試。
~~~
<!--
* @Author: pimzh
* @Date: 2020-10-14 10:37:21
* @LastEditTime: 2020-10-15 14:27:42
* @LastEditors: pimzh
* @Description: select tree 組件
-->
<template>
<div :class="prefixCls">
<i-select
v-bind="$attrs"
:value="selectVal"
>
<Option :value="selectVal">{{ selectLabel }}</Option>
<Tree v-bind="$attrs" :data="treeData" @on-select-change="handleSelectChange" />
</i-select>
</div>
</template>
<script>
const prefixCls = "select-tree";
export default {
name: "select-tree",
data() {
return {
prefixCls: prefixCls,
selectVal: "",
selectLabel: "",
treeData: []
};
},
props: {
data: {
type: Array,
default: () => []
},
value: [String, Number, Array]
},
watch: {
value: {
handler(val) {
if (val) {
this.selectVal = val;
}
},
immediate: true
},
data: {
handler(val) {
if (this.value) {
// 初始化若有value展開到value所在的節點
this.treeData = this.loopArr(JSON.parse(JSON.stringify(val)));
} else {
this.treeData = JSON.parse(JSON.stringify(val));
}
},
deep: true,
immediate: true
}
},
methods: {
// 遍歷數據展開節點
loopArr(treeArr) {
const { value } = this;
let isFind = false;
const loop = arr => {
const newArr = [];
arr.forEach(item => {
if (!isFind) {
item.expand = true;
// 在當前節點已找到
if (item.value === value) {
isFind = true;
item.expand = false;
item.selected = true;
this.selectLabel = item.title;
} else if (item.children && item.children.length > 0) {
loop(item.children);
// 在子節點還未找到
if (!isFind) {
item.expand = false;
}
}
}
newArr.push(item);
});
return newArr;
};
return loop(treeArr);
},
// 點擊樹節點時觸發
handleSelectChange(data, item) {
if (this.selectVal === item.value) {
// 重復點擊同一個節點時依然保持選中狀態
item.selected = true;
} else {
// 不需要重復點擊同一個節點時重新賦值
this.selectLabel = item.title;
this.selectVal = item.value;
this.$emit("on-select-change", item);
}
}
}
};
</script>
<style lang="scss" scoped>
.select-tree {
/deep/ .ivu-select {
&-item {
display: none;
}
&-dropdown {
height:?8.5rem;
padding-left: 0.2rem;
.ivu-tree ul li {
margin: 0;
}
}
}
}
</style>
~~~
