vue treeselect树形选择器使用（select下拉框中显示树形列表）

谁践踏了优雅 2022-10-12 13:57 681阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]

## 官方文档 ##

[官方文档][Link 1]

## npm配置 ##

npm install --save @riophae/vue-treeselect

## 具体使用 ##

*  需要注意的地方是normailzer规范化，后端返回的数据结构未知，但是树形选择器需要结构为id,label,children三个属性,因此需要出来规范。

<template>
    	<div class="content-part">
    		<el-form ref="form" :model="formData">
    			<el-form-item label="资产目录">
    				<treeselect v-model="formData.id"
    						  :options="assetOptions"
    						  :normalizer="normalizer"
    						  :show-count="true"
    						  placeholder="资产目录"/>
    			</el-form-item>
    		</el-form>
    	</div>
    </template>
    
    <script>
        //引用
    	import Treeselect from "@riophae/vue-treeselect"
    	import "@riophae/vue-treeselect/dist/vue-treeselect.css"
    	export default {
    		data() {
    			return {
    				formData:{
    					id:undefined
    				},
    				// 资产目录树选项
    				assetOptions: [],
    			}
    		},
    		created() {
    			this.getTreeselect()
    		},
    		methods: {
    			/** 查询菜单下拉树结构 */
    			getTreeselect() {
    			  getTreeWeb().then(response => {
    			  	this.assetOptions = response.data.data
    			  });
    			},
    			/** 转换菜单数据结构 */
    			normalizer(node) {
    			  if (node.children && !node.children.length) {
    			    delete node.children;
    			  }
    			  return {
    			    id: node.id,
    			    label: node.name,
    			    children: node.children
    			  };
    			},
    		
    		}
    	}
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]: /images/20221005/b5f886af0bb2473fb327b79b0e886de7.png
[Link 1]: https://www.vue-treeselect.cn/