VueTreeselect使用步驟以及解決vueselectTree顯示no sub-options的問題

官方文檔：https://www.vue-treeselect.cn/

官方示例

一、安裝

建議通過npm安裝vue-treeselect

npm install --save @riophae/vue-treeselect

二、引入組件和樣式

import Treeselect from '@riophae/vue-treeselect' import '@riophae/vue-treeselect/dist/vue-treeselect.css'

三、注冊

components: { Treeselect },

四、使用

<treeselect v-model="value" :multiple="true" :options="options" />

options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],

完整代碼：

<template>
  <div style="width: 800px;padding-left: 300px;">
    <treeselect
            :multiple="true"
            :options="options"
            placeholder="Select your favourite(s)..."
            v-model="value"
            :clearable="false"
            :flat="true"
            :default-expand-level="1"
            :searchable="false"
            :open-on-click="true"
            :sort-value-by="INDEX"
    />
  </div>
</template>
<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  export default {
    components: { Treeselect },
    data: () => ({
      value: [],
      options: [ {
        id: 'fruits',
        label: 'Fruits',
        children: [ {
          id: 'apple',
          label: 'Apple 🍎',
          isNew: true,
        }, {
          id: 'grapes',
          label: 'Grapes 🍇',
        }, {
          id: 'pear',
          label: 'Pear 🍐',
        }, {
          id: 'strawberry',
          label: 'Strawberry 🍓',
        }, {
          id: 'watermelon',
          label: 'Watermelon 🍉',
        } ],
      }, {
        id: 'vegetables',
        label: 'Vegetables',
        children: [ {
          id: 'corn',
          label: 'Corn 🌽',
        }, {
          id: 'carrot',
          label: 'Carrot 🥕',
        }, {
          id: 'eggplant',
          label: 'Eggplant 🍆',
        }, {
          id: 'tomato',
          label: 'Tomato 🍅',
        } ],
      } ],
    }),
  }
</script>

效果如下：

常用屬性：

如果將multiple的值設置為false，效果如下：

 而且只能選擇一個

 

如果將clearable值設置為false,效果如下：

 

 

當default-expand-level值設置為0，效果如下：

 當default-expand-level值設置為1，效果如下：

searchable值設置為true，效果如下：

 searchable值設置為false，效果如下

 

 

 

如果要控制所選選項的顯示順序，請使用sortValueBy道具。該道具有三個選擇：

• "ORDER_SELECTED" （默認）-選擇訂單
• "LEVEL" - 選擇級別: C 🡒 BB 🡒 AAA
• "INDEX" - 選項索引: AAA 🡒 BB 🡒 C

 五、項目使用

<template>
  <el-dialog title="葯品分類" :visible.sync="dialogFormVisible" width="600px" @close="closeDialog">
    <el-form ref="form" label-width="150px">
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item label="葯品分類：">
            <treeselect
                    placeholder="請選擇葯品分類"
                    v-model="cataId"
                    :multiple="false"
                    :options="trees"
                    :default-expand-level="2"
                    :clearable="true"
                    :searchable="true"
            style="width: 350px;"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="create()">確認</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { standardCode } from '@/api/productManagement/standardCode'
export default {
  name: 'Edit',
  inject: ['returnMessage'],
    components: { Treeselect },
  data() {
    return {
      dialogFormVisible: false,
      dialogStatus: '',
        trees: [],
      cataId: null,
      standardCodeId : '',
    }
  },
    created() {
    },
  methods: {
      getTrees() {
        standardCode.queryTree().then(res => {
              if (res.success) {
                res.data.forEach(item =>{
                  item.label = item.name
                  if(item.children && item.children.length > 0){
                    item.children.forEach(item1 => {
                      item1.label = item1.name
                      if(item1.children && item1.children.length == 0){
                        delete item1["children"]
                      }
                      if(item1.children && item1.children.length > 0){
                        item1.children.forEach(item2 =>{
                          item2.label = item2.name
                          if(item2.children && item2.children.length == 0){
                            delete item2["children"]
                          }
                          if(item2.children && item2.children.length > 0){
                            item2.children.forEach(item3=>{
                              item3.label = item3.name
                              if(item3.children.length == 0){
                                delete item3["children"]
                              }
                            })
                          }
                        })
                      }

                    })
                  }
                  this.trees = item.children;

                })

              }
          })
      },
    create() {
        const query = {
          standardCodeId: this.standardCodeId,
          cataId: this.cataId
        }
      standardCode.saveRela(query).then(response => {
        if (response.success === true) {
          this.dialogFormVisible = false
          this.$message.success('保存成功')
          this.standardCodeId = ''
        } else {
          this.$message.warning(response.msg)
          this.dialogFormVisible = false
        }
      }).catch(error => {
        this.$loading().close()
        // this.$message.error('添加失敗')
        this.dialogFormVisible = false
        console.log(error)
      })
    },
    getCataRela(id) {
        // console.log(id)
      this.dialogFormVisible = true
      // this.cataId = ''
      console.log(this.cataId)
      this.standardCodeId = id
      const query = {
        standardCodeId: id
      }
      standardCode.getCataRela(query).then(response => {
        // console.log(response)
        if (response.success === true) {
          if(response.data !== null){
            // console.log(response.data.cataId)
            this.cataId = response.data.cataId
            // console.log(this.cataId)
          // }else{
          //   this.cataId=null
          }
        }
      })
    },
    closeDialog(){ this.cataId=null }
  }
}
</script>

注意：

1、cataId初始化時要設置為null，不能是空字符串，否則會報錯unknown。

2、關閉對話框時要將cataId置空，否則打開對話框時顯示的是上一次的數據。

六、解決顯示no sub-options的問題

如果顯示no sub-options,是因為如果child=[]時會顯示，默認顯示黃色感嘆號和No sub-options，如果想要沒有子部門直接不展示，我的方法是遍歷數據源，刪掉空數組

// 處理樹形結構
    treeChange (arr) {
      return arr.map(item => {
        if (item.children && item.children.length > 0) {
          this.treeChange(item.children)
        } else {
          delete item.children
        }
        return item
      })
    }