使用 vue-treeselect 自定义数据结构转换

使用 vue-treeselect 自定义数据结构转换

• 使用这个插件时当数据结构和官方文档的数据结构不一致，需要进行转化。
• 示例

 // 引入相关包文件
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
<template>
	<treeselect
    v-model="departmentData.higherUp"
    :options="deptTreeData1"
    placeholder="请选择上级菜单"
    :normalizer="normalizer"
    />
</template>
<script>
	export default {
		// 注册组件
		components: { Treeselect },
		data() {
			return {
				deptTreeData1:[]
			}
		},
		methods: {
			normalizer(node) {
                  // 去掉children=[]的children属性
                  if (node.children && !node.children.length) {
                    delete node.children
                  }
                  return {
                    id: node.deptId,
                    label: node.deptName,
                    children: node.children
                  }
            }
		}
	}
</script>

• 说在最后吐槽下 这个官方文档，不知道官方没写 normalizer 相关介绍还是我没有找到。
  希望能帮小伙伴