關(guān)于下拉類型多選組件Vue-Treeselect(鍵名轉(zhuǎn)換)

更新時間：2022年07月26日 09:39:40 作者：addU

這篇文章主要介紹了關(guān)于下拉類型多選組件Vue-Treeselect(鍵名轉(zhuǎn)換)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

下拉類型多選組件Vue-Treeselect(鍵名轉(zhuǎn)換)

支持的功能項

1.支持嵌套選項的單選和多選

2.模糊匹配

3.異步搜索

4.延遲加載（僅在需要時加載深度選項的數(shù)據(jù)）

5.鍵盤支持（使用Arrow Up & Arrow Down鍵導(dǎo)航，使用鍵選擇選項Enter等）

6.豐富的選項和高度可定制的

7.支持多種瀏覽器

它支持在vue項目中通過npm安裝vue-treeselect：

npm install --save @riophae/vue-treeselect

在一般項目中也可以使用

前提是保證在vue作為依賴項

<html>
  <head>
    <!-- include Vue 2.x -->
    <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
    <!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
    <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
    <link rel="stylesheet"  rel="external nofollow" >
  </head>
  <body>
    <div id="app">
      <treeselect v-model="value" :multiple="true" :options="options" />
    </div>
  </body>
  <script>
    // register the component
    Vue.component('treeselect', VueTreeselect.Treeselect)
    new Vue({
      el: '#app',
      data: {
        // define the default value
        value: null,
        // define options
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      },
    })
  </script>
</html>

（上述代碼段來自原開發(fā)文檔）

頁面截圖：

這里主要記錄一下它的自定義鍵名，

<treeselect
  :options="options"
  :value="value"
  :normalizer="normalizer" /*改變這個參數(shù)的對應(yīng)簡明即可*/
  />

export default {
  data: () => ({
    value: null,
    options: [ {
      key: 'a',
      name: 'a',
      subOptions: [ {
        key: 'aa',
        name: 'aa',
      } ],
    } ],
    normalizer(node) { //方法
      return {
        id: node.key, // 鍵名轉(zhuǎn)換，方法默認(rèn)是label和children進(jìn)行樹狀渲染
        label: node.name,
        children: node.subOptions,
      }
    },
  }),
}
自定義選項標(biāo)簽

其他需要可以仔細(xì)閱讀開發(fā)文檔，快速進(jìn)入

vue-treeselect下拉樹

最近遇到下拉樹的需求，what？下拉框和樹的結(jié)合？趕緊element-UI找一波，然而并沒有找到這種組件，于是問了下度娘，發(fā)現(xiàn)好多人都是自己封裝的下拉樹組件，五花八門的功能，但是都不完善，還是決定用靠譜點的庫，于是用了vue-treeselect這個庫，也是vue系列，這個庫就是專門弄下拉樹組件；但有個不好是這個庫是全英文的，沒有中文版本，要看懂的話只有慢慢翻譯和嘗試。

鏈接：Vue-Treeselect

同理，下拉樹的數(shù)據(jù)也有同步數(shù)據(jù)和異步加載兩種，同步數(shù)據(jù)較簡單，這兒只說懶加載(延遲加載)。

稍微注意點

1.延遲加載，它提供規(guī)范函數(shù)用于轉(zhuǎn)化樹節(jié)點字段label/children，特別關(guān)鍵，不轉(zhuǎn)化時只認(rèn)label/children(children屬性決定了節(jié)點是否有子節(jié)點即是否葉子節(jié)點)，轉(zhuǎn)化之后只認(rèn)轉(zhuǎn)化后的字段，比如將將name轉(zhuǎn)化為label，那么只會認(rèn)name，即使數(shù)據(jù)中有l(wèi)abel但沒有name，則子選項不會顯示，因為規(guī)范函數(shù)只會去找轉(zhuǎn)化后的字段。

2.另外，看文檔時一定要細(xì)心，正因為是英文文檔則更要謹(jǐn)慎，特別是案例demo最好copy下來試試每個屬性/方法/事件的效果，不然會踩跟多坑。

3.組件規(guī)定：下拉樹單選時，綁定值初始值必須是null，不然會出現(xiàn)unknown，多選時，初始值必須是**[ ]，不然會報錯。

4.下拉樹默認(rèn)綁定選中節(jié)點的value值，可以使用valueFormat屬性指定下拉樹綁定值為所選中節(jié)點對象。**

5.庫里提供了很多屬性及方法，基本可以滿足下拉樹的所有需求，比如節(jié)點關(guān)聯(lián)選擇，禁用，全選，單選等，需要時自行查看api。

下載：

npm install --save @riophae/vue-treeselect

引入及注冊：

// 引入下拉樹組件
import Treeselect from '@riophae/vue-treeselect'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import { LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
// 引入下拉樹樣式
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
const simulateAsyncOperation = fn => {
? setTimeout(fn, 500)
}
export default {
? ? name: 'PathTrafficConfig',
? ? components: { Treeselect },
? ? ?data(){
? ? ? ? return {}
? ? ? ? ? }?

使用：

<el-form-item label="派單大小類:" label-width="87px" prop="typeIds">
? ? <treeselect
? ? ? ? ?:multiple="true"
? ? ? ? ?:options="typeIdsOptions"
? ? ? ? ?value-consists-of="ALL_WITH_INDETERMINATE"
? ? ? ? ?:load-options="loadTypeIdsOptions"
? ? ? ? ?:normalizer="typeIdsNormalizer" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ?placeholder="請選擇"
? ? ? ? ?v-model="outerQueryCondition.typeIds"
? ? ?/>
?</el-form-item>

// 派單大小類樹--初始默認(rèn)數(shù)組
?typeIdsOptions: [
? ? ? {
? ? ? ? ? id: 0,
? ? ? ? ? name: '派單大小類樹',
? ? ? ? ? children: null,
? ? ? ? ? telType: 0
? ? ? }
? ],

// 獲取派單大小類樹
loadTypeIdsOptions({ action, parentNode, callback }) {
? ? let self = this;
? ? // 臨時數(shù)組
? ? let typeIdsOptions= [];
? ? let formData = {
? ? ? ? id: parentNode.id
? ? };
? ? // 根據(jù)父id請求子選項
? ? fetchThreeOrderTree( formData )
? ? .then( response => {
? ? ? ? if(response.data.code == 200){
? ? ? ? ? ? typeIdsOptions = response.data.data.list;
? ? ? ? ? ? typeIdsOptions.forEach( item => {
? ? ? ? ? ? ? ? // 判斷是否是葉子節(jié)點，不是葉子節(jié)點就添加children屬性
? ? ? ? ? ? ? ? if( item.expand == true ){
? ? ? ? ? ? ? ? ? ? self.$set( item,'children',null) ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? });
? ? ? ? ? ? console.log('派單大小類列表',typeIdsOptions);
? ? ? ? }else{
? ? ? ? ? ? self.$message({
? ? ? ? ? ? ? ? message: response.data.msg,
? ? ? ? ? ? ? ? type: 'danger'
? ? ? ? ? ? });
? ? ? ? }
? ? })
? ? .catch(err => {
? ? });
? ? // 將子選項放入對應(yīng)的父節(jié)點下
? ? if (action === LOAD_CHILDREN_OPTIONS) {
? ? ? ? // 模擬加載中l(wèi)oading
? ? ? ? simulateAsyncOperation(() => {
? ? ? ? ? ? parentNode.children = typeIdsOptions;
? ? ? ? ? ? callback()
? ? ? ? })
? ? } ?
},

const simulateAsyncOperation = fn => {
? setTimeout(fn, 500)
}
export default {
? ? name: 'PathTrafficConfig',
? ? components: { Treeselect },
? ? ?data(){
? ? ? ? return {
? ? ? ? ? ? typeIdsNormalizer(node) { ? ? // 自定義派單大小類樹鍵名
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? id: node.id,
? ? ? ? ? ? ? ? ? ? label: node.name,
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },?
? ? ? ? ? ? ClassNormalizer(node) { ? ? // 自定義話務(wù)分類下拉樹鍵名
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? id: node.id,
? ? ? ? ? ? ? ? ? ? label: node.name,
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },?

總之，Vue-Treeselect庫還是挺好用的。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: