vue-treeselect绑值、回显等常见问题总结

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

最近vue-treeselect使用的比较多，分享一波 可以用在表单里，也可以用在可编辑的表格内 这里以表单里的举例， 在main.js中引入 import ElTreeSelect from 'el-tree-select' import Treeselect from '@riophae/vue-treeselect' import '@riophae/vue-treeselect/dist/vue-treeselect.css' Vue.use(ElTreeSelect) Vue.component('TreeSelect', Treeselect)

最主要的几点就是： 1、绑值， :value="form.astdeptId"，主要绑的就是id或者code，通过id或code找到对应的label回显 2、options是数据源，正常调接口获取就行了 3、append-to-body="true"这个最好加上，可能会遇到下拉的弹窗打不开或者只有一点点高的情况 4、normalizer就是把我们自己的后端返的数据格式按树插件需要的格式转换 5、select点击事件里赋值 6、插槽slot="option-label" 是下拉框的值 7、插槽slot="value-label" 是输入框回显的值

<el-form-item label="上级部门:">
              <TreeSelect
                :value="form.astdeptId"
                :options="zoneCodeOptions"
                clearable            
                no-options-text="暂无可用选项"
                :append-to-body="true"
                :normalizer="tenantIdnormalizer"
                open-direction="bottom"
                placeholder="请选择父级节点"
                @select="node => tenantIdHandleSelect(node)"
              >
                <div slot="option-label" slot-scope="{ node }" style="white-space: nowrap; font-size: 14px">
                  {{ node.raw.name ? node.raw.name : '' }}
                </div>
                <div slot="value-label" slot-scope="{ node }">{{ node.raw.name ? node.raw.name : '' }}</div>
              </TreeSelect>
            </el-form-item>

打印node，拿对应的id，label和children

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

赋值给 this.form.astdeptId

    tenantIdHandleSelect(node) {
      this.form.astdeptId = node.astdeptId
      this.form.name = node.name
    },