欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年07月26日 09:39:40   作者：addU  
這篇文章主要介紹了關(guān)于下拉類型多選組件Vue-Treeselect(鍵名轉(zhuǎn)換)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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

支持的功能項(xiàng)

1.支持嵌套選項(xiàng)的單選和多選

2.模糊匹配

3.異步搜索

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

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

6.豐富的選項(xiàng)和高度可定制的

7.支持 多種瀏覽器

它支持在vue項(xiàng)目中通過(guò)npm安裝vue-treeselect：

npm install --save @riophae/vue-treeselect

在一般項(xiàng)目中也可以使用

前提是保證在vue作為依賴項(xiàng)

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

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

頁(yè)面截圖：

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

<treeselect
  :options="options"
  :value="value"
  :normalizer="normalizer" /*改變這個(gè)參數(shù)的對(duì)應(yīng)簡(jiǎn)明即可*/
  />
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)行樹(shù)狀渲染
        label: node.name,
        children: node.subOptions,
      }
    },
  }),
}
自定義選項(xiàng)標(biāo)簽

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

vue-treeselect下拉樹(shù)

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

鏈接：Vue-Treeselect

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

稍微注意點(diǎn)

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

2.另外，看文檔時(shí)一定要細(xì)心，正因?yàn)槭怯⑽奈臋n則更要謹(jǐn)慎，特別是案例demo最好copy下來(lái)試試每個(gè)屬性/方法/事件 的效果，不然會(huì)踩跟多坑。

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

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

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

下載：

npm install --save @riophae/vue-treeselect

引入及注冊(cè)：

// 引入下拉樹(shù)組件
import Treeselect from '@riophae/vue-treeselect'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import { LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
// 引入下拉樹(shù)樣式
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="請(qǐng)選擇"
? ? ? ? ?v-model="outerQueryCondition.typeIds"
? ? ?/>
?</el-form-item>
// 派單大小類樹(shù)--初始默認(rèn)數(shù)組
?typeIdsOptions: [
? ? ? {
? ? ? ? ? id: 0,
? ? ? ? ? name: '派單大小類樹(shù)',
? ? ? ? ? children: null,
? ? ? ? ? telType: 0
? ? ? }
? ],
// 獲取派單大小類樹(shù)
loadTypeIdsOptions({ action, parentNode, callback }) {
? ? let self = this;
? ? // 臨時(shí)數(shù)組
? ? let typeIdsOptions= [];
? ? let formData = {
? ? ? ? id: parentNode.id
? ? };
? ? // 根據(jù)父id請(qǐng)求子選項(xiàng)
? ? fetchThreeOrderTree( formData )
? ? .then( response => {
? ? ? ? if(response.data.code == 200){
? ? ? ? ? ? typeIdsOptions = response.data.data.list;
? ? ? ? ? ? typeIdsOptions.forEach( item => {
? ? ? ? ? ? ? ? // 判斷是否是葉子節(jié)點(diǎn)，不是葉子節(jié)點(diǎn)就添加children屬性
? ? ? ? ? ? ? ? if( item.expand == true ){
? ? ? ? ? ? ? ? ? ? self.$set( item,'children',null) ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? });
? ? ? ? ? ? console.log('派單大小類列表',typeIdsOptions);
? ? ? ? }else{
? ? ? ? ? ? self.$message({
? ? ? ? ? ? ? ? message: response.data.msg,
? ? ? ? ? ? ? ? type: 'danger'
? ? ? ? ? ? });
? ? ? ? }
? ? })
? ? .catch(err => {
? ? });
? ? // 將子選項(xiàng)放入對(duì)應(yīng)的父節(jié)點(diǎn)下
? ? 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) { ? ? // 自定義派單大小類樹(shù)鍵名
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? id: node.id,
? ? ? ? ? ? ? ? ? ? label: node.name,
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },?
? ? ? ? ? ? ClassNormalizer(node) { ? ? // 自定義話務(wù)分類下拉樹(shù)鍵名
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? id: node.id,
? ? ? ? ? ? ? ? ? ? label: node.name,
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },?

總之，Vue-Treeselect庫(kù)還是挺好用的。 

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

相關(guān)文章

最新評(píng)論