elementUIにはselectコンポーネントとtreeコンポーネントがありますが、ドロップダウンボックスとツリーコンポーネントの組み合わせは無いので、今回はどちらかをカスタマイズしていきます。
レンダリング
コンポーネントのインポート
<select-tree ref="selectTree" @treeChange="treeChangeFun" :dataArray="orgList" :value="currentValue" />
import selectTree from '@/components/selectTree.vue'
components: {
selectTree
},
treeChangeFun (val) {
console.log(val)
},
注意点：
- TreeChange はサブコンポーネントの出力関数です
- dataArray は、親子の入れ子構造の形式のツリーのデータです。
- value は、デフォルトで選択されたノード ID (または、node-key で定義された値に応じて他のキー) です。デフォルトでノードを選択する必要がない場合、このパラメータは無視することもできます。
コンポーネントjsを書く
ソースコードは次のとおりです。
<template>
<div class="selectTree">
<el-select class="main-select-tree" ref="selectTree" v-model="transitValue">
<el-option v-for="item in selectOptions" :key="item.id" :label="item.name" :value="item.id" style="display: none;" />
<el-tree class="main-select-el-tree" ref="selecteltree" :highlight-current="true" :data="dataArray" :props="defaultProps" :expand-on-click-node="false" node-key="id" @node-click="handleNodeClick" :current-node-key="currentKey" :default-expanded-keys="[value]" />
</el-select>
</div>
</template>
<script>
export default {
name: 'selectTree',
props: {
dataArray: Array,
value: [Number, String]
},
data () {
return {
transitValue: '',
selectOptions: [],
currentKey: null,
defaultProps: {
label: 'name',
children: 'children'
}
}
},
computed: {
formatData () {
let result = []
function getChild (item) {
item.forEach((i, x) => {
if (Array.isArray(i['children'])) {
result.push(i)
getChild(i['children'])
} else {
result.push(i)
}
})
}
getChild(this.dataArray)
return result
}
},
methods: {
handleNodeClick (node) {
this.$emit('treeChange', node)
this.transitValue = node.id
this.$refs.selectTree.blur()
}
},
watch: {
formatData (n) {
if (n.length > 0) {
this.selectOptions = n
} else {
this.selectOptions = []
}
},
value: {
// immediate: true,
// deep: true,
handler: function (n) {
if (n.toString()) {
this.$nextTick(() => {
this.transitValue = n
this.currentKey = this.value
this.$refs['selecteltree'].setCurrentKey(this.currentKey)
})
} else {
this.$nextTick(() => {
this.transitValue = n
this.currentKey = this.value
this.$refs['selecteltree'].setCurrentKey(null)
})
}
}
}
}
}
</script>
<style lang="less" scoped>
/deep/ .el-tree-node.is-current>.el-tree-node__content {
color: #409EFF;
}
</style>
注意点：
- 通常、選択でオプションをラップしていることがわかります。これは、ドロップダウン領域の高さをサポートするオプションに依存し、スタイルを次のように設定します。表示：なし。
- 同時に、ツリー コンポーネントは、実際に表示されるエフェクト コンポーネントであるオプションと同じレベルでラップされます。
- transitValue は選択コンポーネントのモデル値、selectOptions はオプション値の配列、currentKey は初期化中にデフォルトで選択されるノード、defaultProps はツリー データのマッピング オブジェクトです。
- formatData 関数の機能は、ネストされた配列を 1 つのレベルにタイル化された 1 次元配列に変換することです。これは、オプション コンポーネントが走査して表示するのに便利です。
- handleNodeClick はツリーのクリック イベントであり、子コンポーネントの Emit イベントをトリガーします。
- watch の formatData は、データの変更を検出し、オプションを動的にレンダリングするために使用されます。
- ウォッチ内の値は、サブコンポーネント ツリーの選択された項目を決定するためにリアルタイムで値を検出するために使用されます (この操作は、コンポーネントが初期化されるとき、親コンポーネントが条件をリセットするとき、または他の値が変更されないときに使用されます)サブコンポーネント ツリー ノードを直接クリックする操作)。