vue Treeselect 树形下拉框出现unknown

今天项目中在实现 VueTreeselect 树形下拉框时,出现 unknown,如下图:
在这里插入图片描述
实现代码如下:

<el-form-item 
          :label="$t('sysManage.department.table.parDepart')">
          <treeselect
            :options="preDepartTreeData"
            :normalizer="normalizer"
            v-model="oneDepart.parentId"
            :placeholder="$t('sysManage.department.parDepartInput')"
          ></treeselect>
</el-form-item>
<script>

const defaultDepart = {
  desc: "",
  id: "",
  name: "",
  deptType: 0,
  parentId: "",
  idxno: 0
}
export default {
  components: {
    Treeselect
  },
  data() {
    return {
      oneDepart: Object.assign({}, defaultDepart)
    }
  }
}
</script>

后来查资料发现:

当下拉树是单选的时候,绑定的值设为null,不能是‘null’或" ",只有这样,初始化的时候才不会出现unknown

解决办法:

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

<el-form-item 
          :label="$t('sysManage.department.table.parDepart')">
          <treeselect
            :options="preDepartTreeData"
            :normalizer="normalizer"
            v-model="oneDepart.parentId"
            :placeholder="$t('sysManage.department.parDepartInput')"
          ></treeselect>
</el-form-item>
<script>

const defaultDepart = {
  desc: "",
  id: "",
  name: "",
  deptType: 0,
  parentId: null,
  idxno: 0
}
export default {
  components: {
    Treeselect
  },
  data() {
    return {
      oneDepart: Object.assign({}, defaultDepart)
    }
  }
}
</script>

页面效果:
在这里插入图片描述

你可能感兴趣的:(前端)