[Vue-Treeselect and vue3-treeselect] tree drop-down box

Vue-Treeselect Vue2 tree drop-down box

Link

Documentation: Vue-Treeselect

accomplish

Step 1: Install

npm install --save @riophae/vue-treeselect

Step 2: Implementation

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

Attributes

:multiple="true" : Whether to allow multiple selections
:options="list" : The rendered data

:show-count="true" : Display the total number of drop-down data
:flat="true" : Set the flat mode (the selected label does not link child nodes and parent nodes)
:limit="5" : Display the number of multi-selected labels
: limitText="count => `and other ${count} items`": Multi-select beyond the text display method
: auto-deselect-descendants="true": When canceling a node, cancel the child nodes of its joints (used in flat mode)
:auto-select-descendants="true": When selecting a node, cancel the child nodes of its joints (used in flat mode) :disable-branch-nodes="true": Only the last node can be selected

placeholder="Please select an area"

no-options-text="No data yet": When the list is empty

no-children-text="No data yet": When the option children is empty

Empty Data Text Prompt

When the list is empty:

When the option children is empty:

 

<treeselect
  v-model="searchForm.id" 
  :options="cateList" 
  no-options-text="暂无数据" 
  no-children-text="暂无数据" 
></treeselect>

The default selection has an unknown problem

Solution: The value bound by v-modal is null

custom validation rules

 input is the method called after input, and close is the method called to close the drop-down box.

<el-form-item label="审批人" prop="name">
　　<treeselect 
        v-model='form.name' 
        :options='options' 
    　　@input='change' 
    　　@close='change'
    ></treeselect>
<el-form-item>

cost valid = (rule, value, callback) => {
    if(!value) {    
           document.querySelector('.vue-treeselect__control').style.borderColor = "red"
           callback(new Error('请输入电话号码'))
    }  else {
           document.querySelector('.vue-treeselect__control').style.borderColor = "green"
    }
}

rules:[
    { required: true, validator: valid, trigger: 'input'}
]

change(val){
    this.$nextTick(()=>{
        this.$refs.form.validateField('name')
    }) 
}

Custom id and name

<treeselect 
    v-model="id" 
    :options="list" 
    :normalizer="normalizer" 
/>

data() {
  return {
    id: 0,
    list:[
      {
        id: 1,
        name: '1',
        
        children: [
          {
            id: 11,
            name: '11',
            children: [
              {
                id: 111,
                name: '111',
              }
            ]
          },
          {
            id: 12,
            name: '12',
          },
        ]
      },
      {
        id: 2,
        name: '2',
        children: [
          {
            id: 21,
            name: '21'
          },
          {
            id: 22,
            name: '22'
          },
        ]
      }
    ]

  };
},

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

vue3-treeselect Vue3 tree drop-down box

Link

github：https://github.com/megafetis/vue3-treeselect

accomplish

Step 1: Install

npm install --save vue3-treeselect

Step Two: Pages

<treeselect class="vegetable"
  ref="cateSelect"
  v-model="form.id" 
  :options="cateList" 
  :clearable="false" 
  :searchable="false" 
  :disable-branch-nodes="true" 
  no-options-text="暂无数据" 
  no-sub-options-text="暂无数据"
  placeholder="请选择种类"
  @select="handleSelect"
></treeselect>

  The applicable data format of the vue3-treeselect plugin is: id, label, children, and the data obtained by the backend needs to be converted.

<script lang="ts">
import {defineComponent, onActivated, ref} from "vue";
import { getCateList } from "@src/api/api";
import Treeselect from "vue3-treeselect"
import 'vue3-treeselect/dist/vue3-treeselect.css'

export default defineComponent({
  components: {
    Treeselect
  },
  setup(props) {

    // 进入页面获取种类列表
    onActivated(() => {
      getCate()
    })

    // 格式化后端返回的数据
    const dg = (list: any) => {
      list && list.forEach((v: any) => {
        v.label = v.name 
        v.children = v.child
        if (v.children && v.children.length > 0) {
          dg(v.children)
        }
      })
    }

    // 获取种类列表
    const cateList: any = ref([])
    const getCate = async () => {
      getCateList().then((res: any) => {
        dg(res.list)
        cateList.value = res.list
      }).catch(() => { })
    }

    // 获取选中的id
    const form = ref(<any>{
      id: null,
      name: ''
    });

    // 选择id的同时获取文本
    handleSelect(e) {
      form.value.name = e.name
    }

    return {
      form,
      cateList,
      getCate,
      dg,
      handleSelect
    }
  }
})
</script>

.vegetable{
  height: 37px;
  width: 300px;
}
::v-deep .vegetable .vue-treeselect__control {
  height: inherit;
} 

Details page echo

<treeselect class="vegetable_treeselect"
  ref="cateSelect"
  v-model="form.agentiaCategoryId" 
  :searchable="false" 
  :options="cateList" 
  :clearable="false" 
  :disable-branch-nodes="true" 
  no-options-text="暂无数据" 
  no-children-text="暂无数据" 
  placeholder="请选择果蔬品类"
  @select="handleSelect"
></treeselect>

const cateSelect = ref(null)
const getInfo = () => {
  
  getDetail().then((res:any) => {

    form.value = res;

    nextTick(() => {
      cateSelect.value.select(cateSelect.value.getNode(form.value.id))
    })

  }).catch(() => {

  })
}    
return {
  getInfo 
}

New page clear rendering

<treeselect class="vegetable_treeselect"
  ref="cateSelect"
  v-model="form.agentiaCategoryId" 
  :searchable="false" 
  :options="cateList" 
  :clearable="false" 
  :disable-branch-nodes="true" 
  no-options-text="暂无数据" 
  no-children-text="暂无数据" 
  placeholder="请选择果蔬品类"
  @select="handleSelect"
  v-if="render"
></treeselect>

const render = ref(true)

onActivated(() => {

  render.value = false

  nextTick(() => {
    render.value = true
  })

})