一、最主要的幾點(diǎn)就是

1、綁值:value=“form.astdeptId”，主要綁的就是id，通過id找到對(duì)應(yīng)的label回顯

2、options是數(shù)據(jù)源，正常調(diào)接口獲取就行了

3、append-to-body="true"這個(gè)最好加上，可能會(huì)遇到下拉的彈窗打不開或者只有一點(diǎn)點(diǎn)高的情況

4、（******）?normalizer屬性就是把我們自己的后端返的數(shù)據(jù)格式按樹插件需要的格式轉(zhuǎn)換

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

5、select點(diǎn)擊事件里賦值

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

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

二、引入

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

三、使用文章來源地址http://www.zghlxwxcb.cn/news/detail-784719.html

<!--
 * @Description: ------ 文件描述 ------
 * @Creater: snows_l snows_l@163.com
 * @Date: 2023-02-03 16:37:11
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2023-02-06 11:05:57
 * @FilePath: /lg-ebt-backend-vue-top2-2/package/module/system/src/views/approvalManage/approvalEdit/Dialog.vue
-->
<template>
  <el-dialog
    title="編輯流程"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <el-form
      ref="personalForm"
      size="small"
      :model="baseInfo"
      :rules="rules"
      label-position="right"
      label-width="120px"
    >
      <el-row class="pd20">
        <el-col :span="18">
          <el-form-item label="審批流程名稱：" prop="approvalName">
            <span>{{ baseInfo.approvalName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="人員選擇：" prop="approvalPersnal">
            <x-tree-select
              v-model="baseInfo.approvalPersnal"
              :multiple="true"
              :options="optionss"
              placeholder="請(qǐng)選擇人員"
              :normalizer="tenantIdnormalizer"
            >
              <div
                slot="option-label"
                slot-scope="{ node }"
                style="white-space: nowrap; font-size: 14px"
              >
                {{ node.raw.name ? node.raw.name + "-snows" : "" }}
              </div>
              <div slot="value-label" slot-scope="{ node }">
                {{ node.raw.name ? node.raw.name + "-s" : "" }}
              </div>
            </x-tree-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">確 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
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: "新疆維吾爾族自治區(qū)",
              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
      }
    },
  }
}
</script>

<style lang="scss" scoped></style>