【Vue-Treeselect 和 vue3-treeselect】树形下拉框

Vue-Treeselect Vue2树形下拉框

链接

文档：Vue-Treeselect

实现

第一步：安装

npm install --save @riophae/vue-treeselect

第二步:实现

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

属性

:multiple="true" ：是否允许多选
:options="list" ：渲染的数据

:show-count="true" ：展示下拉总数数据
:flat="true" ：设置平面模式（选中的标签不联动子节点和父节点）
:limit="5" ：展示多选的标签个数
:limitText="count => `及其它${count}项`" ：多选的超出文字展示方式
:auto-deselect-descendants="true" ：取消节点时取消其接点的子节点（平面模式下使用）
:auto-select-descendants="true"：选择节点时取消其接点的子节点（平面模式下使用）    :disable-branch-nodes="true"：只能选择末级节点

placeholder="请选择区域"

no-options-text="暂无数据" ：列表为空的情况

no-children-text="暂无数据" ：选项children为空的情况

空数据文字提示

列表为空的情况：

选项children为空的情况：

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

默认选择出现unknown问题

解决方法：v-modal 绑定的值给null

自定义验证规则

 input是输入之后调用的方法，close是关闭下拉框调用的方法。

<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')
    }) 
}

自定义id和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树形下拉框

链接

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

实现

第一步：安装

npm install --save vue3-treeselect

第二步：页面

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

  vue3-treeselect 插件适用的数据格式是：id、label、children，后端得到的数据需要转格式。

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

详情页回显

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

新增页清空渲染

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

})