快捷導(dǎo)航

Vue Treeselect樹形下拉框的使用小結(jié)

更新時(shí)間：2023年10月17日 10:21:00 作者：小白探索世界歐耶！~

樹形下拉框是一個(gè)帶有下列樹形結(jié)構(gòu)的下拉框,本文主要介紹了Vue Treeselect樹形下拉框的使用小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下

1、綁值， :value=“form.astdeptId”，主要綁的就是id或者code，通過id或code找到對(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)換
5、select點(diǎn)擊事件里賦值
6、插槽slot=“option-label” 是下拉框的值
7、插槽slot=“value-label” 是輸入框回顯的值

使用

1.放入目標(biāo)位置

      <el-form-item label="父節(jié)點(diǎn)" v-model="formData.parentCategoryKey">
        <listBoxF>
          <template slot="content">
            <treeselect class="treeSelect-option" v-model="value" :multiple="multiple" :normalizer="normalizer" :options="list" placeholder="請(qǐng)選擇" @select="selectNode" />
          </template>
        </listBoxF>
      </el-form-item>

2. 用watch來監(jiān)聽value的變化

    watch:{
      // 監(jiān)聽選中值的變化
      value:{
        deep:true,
        handler(val){
          this.$emit('getSelectVal',val)
        }
      }
    },

3.一定要記得設(shè)置好替換的字段

      // 自定義參數(shù)鍵值名稱
      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. 選中的時(shí)候，進(jìn)行相關(guān)賦值操作

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

5. 初始化，一定要寫null，否則默認(rèn)情況下會(huì)出現(xiàn) unknown

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

附加：里面我用到的插槽

<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>

效果：

踩坑：

因?yàn)橐婚_始我吧value初始化為''、{}兩種方式，都不行，會(huì)出現(xiàn)unknown

最后我改為value，就可以了！

它是根據(jù)id來與label進(jìn)行匹配的，找不到key他就對(duì)不上。 treeselect 綁定的值需要與options輸出的id相對(duì)應(yīng)，若是空值，請(qǐng)不要給空字符串，0，等，因?yàn)闀?huì)出現(xiàn)unknown，并且當(dāng)選擇了值以后，會(huì)出現(xiàn)選中的值后面會(huì)拼上unknown。

解決辦法：把v-modle綁定的值設(shè)為null，初始化的時(shí)候才不會(huì)出現(xiàn)unknown。

到此這篇關(guān)于Vue Treeselect樹形下拉框的使用小結(jié)的文章就介紹到這了,更多相關(guān)Vue 樹形下拉框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: