treeselect组件回显数据时,值后面有unknown怎么解决

数据回显时,值后面有unknown,

只有在我点击父节点时才会加载只节点这个时候才会显示出来那这样的话有什么办法可以处理

 <treeselect
                              name="hostDeptId"
                              :options="deptDatas"
                              :load-options="loadDepts"
                              :show-count="true"
                              :appendToBody="true"
                              placeholder="选择部门"
                              v-model.number="scope.row.hostDeptId"
                            />


    // 获取弹窗内部门数据
    loadDepts({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        getDepts({ status: true, pid: parentNode.deptId }).then(res => {

          parentNode.children = res.data.data.rows.map(function (obj) {
            if (obj.hasChildren) {
              obj.children = null
            }
            return obj
          })
          setTimeout(() => {
            callback()
          }, 200)
        })
      }
    },
    // 获取部门列表
    getDepts() {
      getDepts({ status: true }).then(res => {
        this.deptDatas = res.data.data.rows.map(function (obj) {
          if (obj.hasChildren) {
            obj.children = null
          }
          return obj
        })
      })
    },

我暂时能想到的是用自定义值标签。

<treeselect :options="options" :value="value" :multiple="multiple">
    <div slot="value-label" slot-scope="{ node }">{{ getDeptName(node.raw.customLabel) }}</div>
  </treeselect>

getDeptName(name) {
        if (name.lastIndexOf("unknown") > -1) {
        //当treeselect翻译不了值时，name中有id，截取id，去调接口或者字典查询出名字
          return '获得的名字';
        } else {
          return name;
        }
},

参考:https://www.vue-treeselect.cn/

<treeselect
  :multiple="true"
  :options="options"
  :load-options="loadOptions"
  placeholder="Try expanding any folder option..."
  v-model="value"
  />

import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'

// We just use `setTimeout()` here to simulate an async operation
// instead of requesting a real API server for demo purpose.
const simulateAsyncOperation = fn => {
  setTimeout(fn, 2000)
}

export default {
  data: () => ({
    value: null,
    options: [ {
      id: 'success',
      label: 'With children',
      // Declare an unloaded branch node.
      children: null,
    }, {
      id: 'no-children',
      label: 'With no children',
      children: null,
    }, {
      id: 'failure',
      label: 'Demonstrates error handling',
      children: null,
    } ],
  }),

  methods: {
    loadOptions({ action, parentNode, callback }) {
      // Typically, do the AJAX stuff here.
      // Once the server has responded,
      // assign children options to the parent node & call the callback.

      if (action === LOAD_CHILDREN_OPTIONS) {
        switch (parentNode.id) {

        case 'success': {
          simulateAsyncOperation(() => {
            parentNode.children = [ {
              id: 'child',
              label: 'Child option',
            } ]
            callback()
          })
          break
        }
        case 'no-children': {
          simulateAsyncOperation(() => {
            parentNode.children = []
            callback()
          })
          break
        }
        case 'failure': {
          simulateAsyncOperation(() => {
            callback(new Error('Failed to load options: network error.'))
          })
          break
        }
        default: /* empty */
        }
      }
    },
  },
}

treeselect 是vue 树状结构的select一个组件。使用起来是挺方便的。

但是偶尔会有默认值为（unknow）的状况

这种时候需要先看一下大家都知道的这些：

treeselect 绑定的值需要与options输出的id相对应，若是空值，请不要给空字符串，0，等，因为会出现unknown，并且当选择了值以后，会出现选中的值后面会拼上unknown。

解决办法就是把v-modle绑定的值设为null，必须是null，不能是‘null’，初始化的时候才不会出现unknown。

其次有一种比较逗但是我自己被绊了一下的一个情况，那就是在调用接口时获取值后，获取的值后面紧跟（unknow）

说起来简单，有可能是因为它的这个值是绑定后又再次更改过之后的值，此时的这个值在列表中找不到。

比如我的这个是章节信息，

课时上绑定一个章，但是章后来修改了名字，这个时候就会出现这种情况：原章节名称找不到对应值。

unknown是怎么来的，
如果返回数据结果是对的，只是多了个数据接口返回的unknows，再处理一下接口数据就行了

出现那个unknown，是你初始化值的问题，初始值不能为null

treeselect组件 回显数据时,值后面有unknown怎么解决

treeselect组件回显数据时,值后面有unknown怎么解决