成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Element中的Cascader（級(jí)聯(lián)列表）動(dòng)態(tài)加載?。校瘏^(qū)數(shù)據(jù)

fxp / 1380人閱讀

摘要：中的其實(shí)是有動(dòng)態(tài)加載次級(jí)選項(xiàng)的方法。方法的原理是利用址引用傳遞，動(dòng)態(tài)修改。其中找到究竟需要在那層添加數(shù)據(jù)就變成一個(gè)很麻煩的問題。格式化數(shù)據(jù)格式返回清除方法

element中的cascader其實(shí)是有動(dòng)態(tài)加載次級(jí)選項(xiàng)的方法。
方法的原理是利用址（引用）傳遞，動(dòng)態(tài)修改:options。

var c={name: "bob"}
var d=c
d.name = "tom"
console.log(c)
// {name: "tom"}

http://element-cn.eleme.io/#/...

其中找到究竟需要在那層添加數(shù)據(jù)就變成一個(gè)很麻煩的問題。
怎么找了？
當(dāng)然只能遞歸了。

簡(jiǎn)化一下大致思路：

var a = [
  {
    value: "2",
    children: [
      {
        value: "2-1",
        children: [
          {
            value: "2-1-1",
            children: [],
          },
        ],
      },
      {
        value: "2-2",
        children: [
          {
            value: "2-2-1",
            children: [],
          },
          {
            value: "2-2-2",
            children: [
              {
                value: "2-2-2-1",
                children: [],
              },
            ],
          },
        ],
      },
    ],
  },
]
var b = ["2","2-2","2-2-1"]

那么我們就需要通過b找到a所在的位置。

a[0].children[1].children[0]

{
    value: "2-2-1",
    children: [],
  },

然后再賦值:

a[0].children[1].children[0].children = [{value: "2-2-1-1",children: []}]

console.log(a)

編寫function：

findRegionOption(regionOptions, regionArr) {
      if (_.isEmpty(regionArr) || _.isEmpty(regionOptions)) {
        return null
      }

      let regionId = _.first(regionArr)
      let regionOption = _.find(regionOptions, regionOption => {
        return regionOption.value === regionId
      })
      
      if (!regionOption) {
        return null
      }
      
      let tailRegionArr = _.tail(regionArr) // lodash的tail方法，獲取除了array數(shù)組第一個(gè)元素以外的全部元素。

      if (_.isEmpty(tailRegionArr)) {
        return regionOption
      }
      return this.findRegionOption(regionOption.children, tailRegionArr)
}

動(dòng)態(tài)加載數(shù)據(jù)：

loadRegionChild(regionIdArr) {
  let regionOptions = this.regionHiera
  let regionOptionInUI = this.findRegionOption(regionOptions, regionIdArr)
  if (
    !regionOptionInUI ||
    !regionOptionInUI.children ||
    regionOptionInUI.children.length > 0
  ) {
    return null
  }

  let regionKey = _.last(regionIdArr)
  if (!regionKey) {
    return null
  }

  api
    .getRegionHiera(regionKey)
    .then(res => {
      regionOptionInUI.children = res.data
    })
}

整個(gè)頁面代碼大致就是：

整體思路還是找到點(diǎn)擊后的region，然后動(dòng)態(tài)賦值給children。
寫的有點(diǎn)亂，希望有幫助吧。

PS：其中用到的 _.XXX 引入的lodash的庫

再附一個(gè)方吧，如果后臺(tái)返回的數(shù)據(jù)不符合組件的數(shù)據(jù)類型（children、label、value），可以使用該方法。

/**
* 格式化Region數(shù)據(jù)格式
* @param []  
* @return [] // 返回清除listener方法 
*/
function transRegion(regionInfo) {
 if (!regionInfo) {
   return null;
 }

 let regionId = regionInfo.regionId;
 let regionName = regionInfo.name;
 let children = _.map(regionInfo.children, child => {
   return transRegion(child);
 });

 var res = {
   label: regionName,
   value: regionId,
   children: children
 };
 return res;
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116027.html

相關(guān)文章

  • Element中的Cascader（級(jí)聯(lián)列表）動(dòng)態(tài)加載省／市／區(qū)數(shù)據(jù)

    摘要：中的其實(shí)是有動(dòng)態(tài)加載次級(jí)選項(xiàng)的方法。方法的原理是利用址引用傳遞，動(dòng)態(tài)修改。其中找到究竟需要在那層添加數(shù)據(jù)就變成一個(gè)很麻煩的問題。 element中的cascader其實(shí)是有動(dòng)態(tài)加載次級(jí)選項(xiàng)的方法。方法的原理是利用址（引用）傳遞，動(dòng)態(tài)修改:options。 var c={name: bob} var d=c d.name = tom console.log(c) // {name: to...

    golden_hamster 評(píng)論0 收藏0

  • Element中的Cascader（級(jí)聯(lián)列表）動(dòng)態(tài)加載省／市／區(qū)數(shù)據(jù)

    摘要：中的其實(shí)是有動(dòng)態(tài)加載次級(jí)選項(xiàng)的方法。方法的原理是利用址引用傳遞，動(dòng)態(tài)修改。其中找到究竟需要在那層添加數(shù)據(jù)就變成一個(gè)很麻煩的問題。格式化數(shù)據(jù)格式返回清除方法 element中的cascader其實(shí)是有動(dòng)態(tài)加載次級(jí)選項(xiàng)的方法。方法的原理是利用址（引用）傳遞，動(dòng)態(tài)修改:options。 var c={name: bob} var d=c d.name = tom console.log(c)...

    JinB 評(píng)論0 收藏0

  • 從零開始實(shí)現(xiàn)一個(gè)Vue級(jí)聯(lián)組件

    摘要：從零開始實(shí)現(xiàn)一個(gè)級(jí)聯(lián)組件本文實(shí)現(xiàn)級(jí)聯(lián)組件需要用到自定義指令和組件通信相關(guān)知識(shí)，最好先閱讀以下兩篇文章自定義指令組件基礎(chǔ)與通信一組件簡(jiǎn)介本文實(shí)現(xiàn)的是一個(gè)省市縣多級(jí)聯(lián)動(dòng)組件，當(dāng)組件渲染完成后默認(rèn)會(huì)加載出所有的省名稱，當(dāng)用戶點(diǎn)擊某個(gè)省的名稱后，右 從零開始實(shí)現(xiàn)一個(gè)Vue級(jí)聯(lián)組件 本文實(shí)現(xiàn)級(jí)聯(lián)組件需要用到自定義指令和組件通信相關(guān)知識(shí)，最好先閱讀以下兩篇文章: Vue自定義指令 Vue組件基礎(chǔ)與...

    binaryTree 評(píng)論0 收藏0

  • 如何實(shí)現(xiàn)一個(gè)這樣的級(jí)聯(lián)組件

    摘要：封裝組件系列文章如何實(shí)現(xiàn)一個(gè)這樣的級(jí)聯(lián)組件組件背景根據(jù)產(chǎn)品原型實(shí)現(xiàn)一個(gè)級(jí)聯(lián)組件，下面看演示圖應(yīng)用場(chǎng)景很多，如后臺(tái)管理系統(tǒng)，旅游系統(tǒng)，廣告投放系統(tǒng)，營(yíng)銷系統(tǒng)等，現(xiàn)在流行，，三大框架，下面看看怎么使用實(shí)現(xiàn)實(shí)現(xiàn)邏輯產(chǎn)品經(jīng)理的評(píng)審功能需求如下根據(jù)大 Vue封裝組件系列文章 如何實(shí)現(xiàn)一個(gè)這樣的級(jí)聯(lián)組件 組件背景 根據(jù)產(chǎn)品原型實(shí)現(xiàn)一個(gè)級(jí)聯(lián)組件，下面看演示圖 showImg(https://i.lo...

    daydream 評(píng)論0 收藏0

  • 一些基于React、Vue、Node.js、MongoDB技術(shù)棧的實(shí)踐項(xiàng)目

    摘要：利用中間件實(shí)現(xiàn)異步請(qǐng)求，實(shí)現(xiàn)兩個(gè)用戶角色實(shí)時(shí)通信。目前還未深入了解的一些概念。往后會(huì)寫更多的前后臺(tái)聯(lián)通的項(xiàng)目。刪除分組會(huì)連同組內(nèi)的所有圖片一起刪除。算是對(duì)自己上次用寫后臺(tái)的一個(gè)強(qiáng)化，項(xiàng)目文章在這里。后來一直沒動(dòng)，前些日子才把后續(xù)的完善。 歡迎訪問我的個(gè)人網(wǎng)站：http://www.neroht.com/? 剛學(xué)vue和react時(shí)，利用業(yè)余時(shí)間寫的關(guān)于這兩個(gè)框架的訓(xùn)練，都相對(duì)簡(jiǎn)單，有的...

    tangr206 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<