vue-treeselect的基本使用以及如何更改id以及label的绑定值

一、最主要的几点就是

1、绑值:value=“form.astdeptId”，主要绑的就是id，通过id找到对应的label回显

2、options是数据源，正常调接口获取就行了

3、append-to-body=”true”这个最好加上，可能会遇到下拉的弹窗打不开或者只有一点点高的情况

4、（******） normalizer属性就是把我们自己的后端返的数据格式按树插件需要的格式转换

tenantIdnormalizer(node) {
  if (node.children && !node.children.length) {
    delete node.children
  }
  return {
    id: node.id,
    label: node.name,
    children: node.children
  }
},

5、select点击事件里赋值

6、插槽slot=“option-label” 是下拉框的值

7、插槽slot=“value-label” 是输入框回显的值

二、引入

import XTreeselect from ‘@riophae/vue-treeselect'
// 样式
import ‘@riophae/vue-treeselect/dist/vue-treeselect.css'

三、使用

  
    
      
        
          
            {{ baseInfo.approvalName }}
          
        
        
          
            
              
                {{ node.raw.name ? node.raw.name + "-snows" : "" }}
              
              
                {{ node.raw.name ? node.raw.name + "-s" : "" }}
              
            
          
        
      
    
    
      取 消
      确 定
    
  



import XTreeSelect from "@riophae/vue-treeselect"
// import the styles
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
  name: "",
  components: {
    XTreeSelect
  },
  data() {
    return {
      dialogVisible: false,
      baseInfo: {
        approvalName: "",
        approvalPersnal: []
      },
      options: [
        {
          id: 1,
          name: "东南",
          children: [
            {
              id: 2,
              name: "上海",
              children: [
                { id: 3, name: "普陀" },
                { id: 4, name: "黄埔" },
                { id: 5, name: "徐汇" }
              ]
            },
            {
              id: 7,
              name: "江苏",
              children: [
                { id: 8, name: "南京" },
                { id: 9, name: "苏州" },
                { id: 10, name: "无锡" }
              ]
            },
            {
              id: 12,
              name: "浙江",
              children: [
                { id: 13, name: "杭州" },
                { id: 14, name: "宁波" },
                { id: 15, name: "嘉兴" }
              ]
            }
          ]
        },
        {
          id: 17,
          name: "西北",
          children: [
            {
              id: 18,
              name: "陕西",
              children: [
                { id: 19, name: "西安" },
                { id: 20, name: "延安" }
              ]
            },
            {
              id: 21,
              name: "新疆维吾尔族自治区",
              children: [
                { id: 22, name: "乌鲁木齐" },
                { id: 23, name: "克拉玛依" }
              ]
            }
          ]
        }
      ],
      
    }
  },

  created() {},

  methods: {

    tenantIdnormalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
  }
}