国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁(yè)
  2. >Toy博客

element-tree樹(shù)結(jié)構(gòu)-默認(rèn)選中第一個(gè)節(jié)點(diǎn)高亮-根據(jù)id選中節(jié)點(diǎn)高亮

2年前作者：-風(fēng)過(guò)無(wú)痕分類(lèi)：Toy博客閱讀(25)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了element-tree樹(shù)結(jié)構(gòu)-默認(rèn)選中第一個(gè)節(jié)點(diǎn)高亮-根據(jù)id選中節(jié)點(diǎn)高亮。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

前言

  • tree樹(shù)結(jié)構(gòu)是在開(kāi)發(fā)中經(jīng)常使用的組件，比如區(qū)域樹(shù)，樓層樹(shù)，組織架構(gòu)樹(shù)，等等包含節(jié)點(diǎn)關(guān)系

  • 實(shí)際開(kāi)發(fā)可能需要我們一進(jìn)到頁(yè)面選中樹(shù)形結(jié)構(gòu)第一個(gè)節(jié)點(diǎn)，并且調(diào)用數(shù)據(jù)，來(lái)達(dá)到用戶(hù)體驗(yàn)

  • 在用戶(hù)選擇之后，通過(guò)本地存儲(chǔ)的方式把樓層id存起來(lái)，刷新之后獲取樓層id，調(diào)用數(shù)據(jù)

  • 或者為了用體驗(yàn)我們需要在選中同時(shí)高亮，在狀態(tài)保持之后，把綁定樓層id節(jié)點(diǎn)高亮提示用戶(hù)

  • 萬(wàn)變不離其宗，基于文檔介紹和HTML結(jié)構(gòu)代碼。我們可以通過(guò)2種辦法實(shí)現(xiàn)

第一種-利用默認(rèn)點(diǎn)擊選中會(huì)增加類(lèi)名

  • 當(dāng)我們打開(kāi)瀏覽器檢查會(huì)發(fā)現(xiàn)，當(dāng)樹(shù)節(jié)點(diǎn)點(diǎn)擊之后。會(huì)在該節(jié)點(diǎn)添加一個(gè)類(lèi)名

  • 當(dāng)我們配置好樹(shù)形結(jié)構(gòu)唯一值，默認(rèn)選中數(shù)組，ref之后我們可以通過(guò)在獲取樓層數(shù)據(jù)之后賦值，再通過(guò)偵聽(tīng)器來(lái)偵聽(tīng)，當(dāng)察覺(jué)默認(rèn)數(shù)組復(fù)制之后，就通過(guò)document找到這個(gè)類(lèi)名，點(diǎn)擊它，就會(huì)默認(rèn)選中第一個(gè)

  • 注意：使用this.$nextTick（）避免出現(xiàn)層級(jí)問(wèn)題

  • 缺點(diǎn)：不管傳入什么值-只會(huì)選中第一個(gè)。應(yīng)為是點(diǎn)擊還會(huì)觸發(fā)樹(shù)結(jié)構(gòu)自帶的收縮

案例代碼如下-可直接復(fù)制

<template>
  <div class="box">
 ?  <!-- default-checked-key-默認(rèn)勾選的節(jié)點(diǎn)的 key 的數(shù)組 -->
 ?  <el-tree
 ? ?  ref="myTree"
 ? ?  node-key="id"
 ? ?  :data="data"
 ? ?  :props="defaultProps"
 ? ?  :default-checked-keys="checkedkeys"
 ?  >
 ?  </el-tree>
  </div>
</template>
 
<script>
export default {
  data() {
 ?  return {
 ? ?  // 樹(shù)形結(jié)構(gòu)數(shù)據(jù)
 ? ?  data: [
 ? ? ?  {
 ? ? ? ?  id: "0p150",
 ? ? ? ?  name: "深圳QQQQ科技有限公司",
 ? ? ? ?  children: [
 ? ? ? ? ?  {
 ? ? ? ? ? ?  id: 12070579,
 ? ? ? ? ? ?  name: "一樓",
 ? ? ? ? ? ?  parentId: 0,
 ? ? ? ? ? ?  orderNum: null,
 ? ? ? ? ?  },
 ? ? ? ? ?  {
 ? ? ? ? ? ?  id: 12075624,
 ? ? ? ? ? ?  name: "二樓",
 ? ? ? ? ? ?  parentId: 0,
 ? ? ? ? ? ?  orderNum: null,
 ? ? ? ? ?  },
 ? ? ? ?  ],
 ? ? ?  },
 ? ? ?  {
 ? ? ? ?  id: "0p151",
 ? ? ? ?  name: "wertw",
 ? ? ? ?  children: [],
 ? ? ?  },
 ? ? ?  {
 ? ? ? ?  id: "0p152",
 ? ? ? ?  name: "qqqqq",
 ? ? ? ?  children: [
 ? ? ? ? ?  {
 ? ? ? ? ? ?  id: 120725697,
 ? ? ? ? ? ?  name: "一樓",
 ? ? ? ? ? ?  parentId: 0,
 ? ? ? ? ? ?  orderNum: null,
 ? ? ? ? ?  },
 ? ? ? ? ?  {
 ? ? ? ? ? ?  id: 1207236195,
 ? ? ? ? ? ?  name: "二樓",
 ? ? ? ? ? ?  parentId: 0,
 ? ? ? ? ? ?  orderNum: null,
 ? ? ? ? ?  },
 ? ? ? ?  ],
 ? ? ?  },
 ? ? ?  {
 ? ? ? ?  id: "0p154",
 ? ? ? ?  name: "1231",
 ? ? ? ?  children: [],
 ? ? ?  },
 ? ? ?  {
 ? ? ? ?  id: "0p155",
 ? ? ? ?  name: "123",
 ? ? ? ?  children: [],
 ? ? ?  },
 ? ? ?  {
 ? ? ? ?  id: "0p156",
 ? ? ? ?  name: "123123",
 ? ? ? ?  children: [],
 ? ? ?  },
 ? ?  ],
 ? ?  // 樹(shù)形結(jié)構(gòu)數(shù)據(jù)配置
 ? ?  defaultProps: {
 ? ? ?  id: "id",
 ? ? ?  label: "name",
 ? ? ?  children: "children",
 ? ?  },
 ? ?  //
 ? ?  checkedkeys: [],
 ?  };
  },
  // 偵聽(tīng)器
  watch: {
 ?  checkedkeys: {
 ? ?  // immediate: true,
 ? ?  handler: function (newVal, oldVal) {
 ? ? ?  if (newVal) {
 ? ? ? ?  this.$nextTick(() => {
 ? ? ? ? ?  // tree樹(shù)結(jié)構(gòu)點(diǎn)擊會(huì)加上下面這個(gè)類(lèi)名
 ? ? ? ? ?  // 如果默認(rèn)全部展開(kāi)-那就會(huì)關(guān)閉
 ? ? ? ? ?  document.querySelector(".el-tree-node__content").click();
 ? ? ? ?  });
 ? ? ?  }
 ? ?  },
 ?  },
  },
  mounted() {
 ?  // 使用$nextTick 等頁(yè)面加載完畢之后-在選中，防止加載順序問(wèn)題
 ?  this.$nextTick(function () {
 ? ?  // 通過(guò)ref找到樹(shù)節(jié)點(diǎn)
 ? ?  // 通過(guò)樹(shù)結(jié)構(gòu)設(shè)置node-key
 ? ?  // 結(jié)果-選中第一個(gè)
 ? ?  this.checkedkeys.push(this.data[0].id);
 ? ?  // 結(jié)果固定id-選中第一個(gè)
 ? ?  // this.checkedkeys.push('0p150');
 ? ?  // 結(jié)果-子集選中第一個(gè)
 ? ?  // this.checkedkeys.push(12070579);
 ? ?  // 節(jié)點(diǎn)key 結(jié)果選中第一個(gè)
 ? ?  // this.checkedkeys.push(["0p150", 12070579]);
 ?  });
?
 ?  // 結(jié)論：不管傳入什么，只會(huì)通過(guò)偵聽(tīng)器選中樹(shù)結(jié)構(gòu)第一個(gè)
  },
};
</script>
<style lang="scss" scoped>
// 點(diǎn)擊選中顏色
</style>

第二種方法-通過(guò)高亮屬性+tree提供api-推薦

  • 當(dāng)我們配置好樹(shù)結(jié)構(gòu)唯一值，高亮當(dāng)前節(jié)點(diǎn)屬性，ref之后，

  • 我們?cè)讷@取屬性結(jié)構(gòu)數(shù)據(jù)地方取第一個(gè)數(shù)據(jù)id，傳入api，就可以高連當(dāng)前節(jié)點(diǎn)

  • 注意：使用this.$nextTick（）避免出現(xiàn)層級(jí)問(wèn)題

  • 優(yōu)點(diǎn)：只需要樹(shù)形結(jié)構(gòu)唯一值id傳入api就可以實(shí)現(xiàn)選中樹(shù)形結(jié)構(gòu)任意節(jié)點(diǎn)并且高亮-符合實(shí)際開(kāi)發(fā)

案例代碼如下-可直接復(fù)制

<template>
  <div class="box">
 ?  <!-- default-expand-all-展開(kāi)全部 -->
 ?  <!-- highlight-current- 是否高亮當(dāng)前選中節(jié)點(diǎn) -->
 ?  <el-tree
 ? ?  ref="myTree"
 ? ?  node-key="id"
 ? ?  :data="data"
 ? ?  :props="defaultProps"
 ? ?  highlight-current
 ? ?  default-expand-all
 ?  >
 ?  </el-tree>
  </div>
</template>
 
<script>
export default {
  data() {
 ?  return {
 ? ?  // 樹(shù)形結(jié)構(gòu)數(shù)據(jù)
 ? ?  data: [
 ? ? ?  {
 ? ? ? ?  id: "0p150",
 ? ? ? ?  name: "深圳QQQQ科技有限公司",
 ? ? ? ?  children: [
 ? ? ? ? ?  {
 ? ? ? ? ? ?  id: 12070579,
 ? ? ? ? ? ?  name: "一樓",
 ? ? ? ? ? ?  parentId: 0,
 ? ? ? ? ? ?  orderNum: null,
 ? ? ? ? ?  },
 ? ? ? ? ?  {
 ? ? ? ? ? ?  id: 12075624,
 ? ? ? ? ? ?  name: "二樓",
 ? ? ? ? ? ?  parentId: 0,
 ? ? ? ? ? ?  orderNum: null,
 ? ? ? ? ?  },
 ? ? ? ?  ],
 ? ? ?  },
 ? ? ?  {
 ? ? ? ?  id: "0p151",
 ? ? ? ?  name: "wertw",
 ? ? ? ?  children: [],
 ? ? ?  },
 ? ? ?  {
 ? ? ? ?  id: "0p152",
 ? ? ? ?  name: "qqqqq",
 ? ? ? ?  children: [
 ? ? ? ? ?  {
 ? ? ? ? ? ?  id: 120725697,
 ? ? ? ? ? ?  name: "一樓",
 ? ? ? ? ? ?  parentId: 0,
 ? ? ? ? ? ?  orderNum: null,
 ? ? ? ? ?  },
 ? ? ? ? ?  {
 ? ? ? ? ? ?  id: 1207236195,
 ? ? ? ? ? ?  name: "二樓",
 ? ? ? ? ? ?  parentId: 0,
 ? ? ? ? ? ?  orderNum: null,
 ? ? ? ? ?  },
 ? ? ? ?  ],
 ? ? ?  },
 ? ? ?  {
 ? ? ? ?  id: "0p154",
 ? ? ? ?  name: "1231",
 ? ? ? ?  children: [],
 ? ? ?  },
 ? ? ?  {
 ? ? ? ?  id: "0p155",
 ? ? ? ?  name: "123",
 ? ? ? ?  children: [],
 ? ? ?  },
 ? ? ?  {
 ? ? ? ?  id: "0p156",
 ? ? ? ?  name: "123123",
 ? ? ? ?  children: [],
 ? ? ?  },
 ? ?  ],
 ? ?  // 樹(shù)形結(jié)構(gòu)數(shù)據(jù)配置
 ? ?  defaultProps: {
 ? ? ?  id: "id",
 ? ? ?  label: "name",
 ? ? ?  children: "children",
 ? ?  },
 ?  };
  },
  mounted() {
 ?  // 使用$nextTick 等頁(yè)面加載完畢之后-在選中，防止加載順序問(wèn)題
 ?  this.$nextTick(function () {
 ? ?  // 通過(guò)ref找到樹(shù)節(jié)點(diǎn)
 ? ?  // 通過(guò)樹(shù)結(jié)構(gòu)設(shè)置node-key，通過(guò)唯一id來(lái)高亮節(jié)點(diǎn)
 ? ?  // setCurrentKey-通過(guò) key 設(shè)置某個(gè)節(jié)點(diǎn)的當(dāng)前選中狀態(tài)，使用此方法必須設(shè)置 node-key 屬性
 ? ?  // 這行不會(huì)選中
 ? ?  this.$refs.myTree.setCurrentKey(this.data[0].id);
 ? ?  // 這行會(huì)生效
 ? ?  this.$refs.myTree.setCurrentKey(this.data[0].children[0].id);
 ?  });
  },
};
</script>
<style lang="scss" scoped>
// 設(shè)置高亮顏色
::v-deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #baf !important;
}
</style>

總結(jié)：

經(jīng)過(guò)這一趟流程下來(lái)相信你也對(duì) element-tree樹(shù)結(jié)構(gòu)-默認(rèn)選中第一個(gè)節(jié)點(diǎn)高亮-根據(jù)id選中節(jié)點(diǎn)高亮 有了初步的深刻印象，但在實(shí)際開(kāi)發(fā)中我 們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬(wàn)變不離其宗。加油，打工人！

什么不足的地方請(qǐng)大家指出謝謝 -- 風(fēng)過(guò)無(wú)痕文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-708228.html

到了這里，關(guān)于element-tree樹(shù)結(jié)構(gòu)-默認(rèn)選中第一個(gè)節(jié)點(diǎn)高亮-根據(jù)id選中節(jié)點(diǎn)高亮的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶(hù)投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包