Use of Vue Treeselect tree drop-down box

    I was working on a form yesterday, and there was a select box in the form of a tree↓ 

    So, the treeselect component in vue is used, record it here.

 There are a few more important points:

1. Binding value, :value="form.astdeptId", the main binding is id or code, find the corresponding label echo through id or code 2.
options is the data source, and it is enough to get it through the normal interface
. 3. append-to It is best to add -body="true", you may encounter
situations where the drop-down pop-up window cannot be opened or is only a little high Convert
5. Assign value in select click event
6. Slot slot = "option-label" is the value of the drop-down box
7. Slot slot = "value-label" is the value echoed in the input box

use

1. Put it in the target position

      <el-form-item label="父节点" v-model="formData.parentCategoryKey">
        <listBoxF>
          <template slot="content">
            <treeselect class="treeSelect-option" v-model="value" :multiple="multiple" :normalizer="normalizer" :options="list" placeholder="请选择" @select="selectNode" />
          </template>
        </listBoxF>
      </el-form-item>

2. Use watch to monitor the change of value

    watch:{
      // 监听选中值的变化
      value:{
        deep:true,
        handler(val){
          this.$emit('getSelectVal',val)
        }
      }
    },

3. Be sure to remember to set the replacement field 

      // 自定义参数键值名称
      normalizer(node){
          //去掉children=[]的children属性
          if(node.children && !node.children.length){
              delete node.children;
          }
          return {
            id: node.categoryKey,
            label: node.categoryName,
            children: node.children,
            level: node.level
          }
      },

4. When selected, perform relevant assignment operations

      selectNode(node){
        this.formData.level=node.level+1
        this.formData.parentCategoryKey=node.categoryKey || ''
        this.value=node.categoryKey
        console.log("selectNode(node)：",this.formData)
      },

5. For initialization, be sure to write null, otherwise unknown will appear by default

    created(){
      // console.log(this.value,this.formData)
      this.getTree()
      this.reset()
      if(this.formData.parentCategoryKey){
        this.value=this.formData.parentCategoryKey
      }else{
        this.value=null
      }
    }

Additional: the slots I used inside

<template>
  <div class="clearfix list-box-f">
    <div class="text">
      <slot name="name"></slot>
    </div>
    <div class="cont">
      <slot name="content"></slot>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'list-box-f'
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  .list-box-f {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .text {
      width: 144px;
      float: left;
      text-align: right;
      line-height: 32px;
      padding-right: 8px;
      >strong {
        color: #ff0000;
        padding-right: 4px;
      }
    }
    .cont {
      // width: calc(100% - 162px);
      float: left;
      .textarea-content {
        .v-input {
          textarea {
            min-height: 400px !important;
            font-size: 12px;
          }
        }
      }
      >.v-radio-group,>.ans-radio-group {
        padding-top: 7px;
      }
      >.v-input {
        textarea {
          height: 70px;
        }
      }
      .v-radio-group-item {
        font-weight: normal;
        margin-top: 1px;
      }
    }
  }
</style>

 Effect:

 Step on the pit:

Because at the beginning, I initialized the value as '' and {}, neither of which will work, and unknown will appear.

Finally I changed to value and it worked!

It matches the label according to the id, and if it cannot find the key, it will not match.  The value bound by treeselect needs to correspond to the id output by options. If it is a null value, please do not give an empty string , 0, etc., because unknown will appear, and when the value is selected, it will appear after the selected value. unknown.

Solution: Set the value of v-modle binding to null, so that unknown will not appear during initialization.