快捷導(dǎo)航

vue2+elementUI的el-tree的選中、高亮、定位功能的實現(xiàn)

更新時間：2022年09月19日 09:42:08 作者：懶啦

這篇文章主要介紹了vue2+elementUI的el-tree的選中、高亮、定位功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

在使用無選擇框的el-tree時遇到的坑以及如何使用el-tree

最后附全部代碼

    ref="tree" ----> 必須寫
    accordion ----> 是否每次只打開一個同級樹節(jié)點展開 看個人選擇
    default-expand-all ----> 默認打開全部節(jié)點
    :data="leftData"  ----> 必寫 展示數(shù)據(jù)
    @node-click="handleNodeClick" ----> 節(jié)點被點擊時的回調(diào)
    node-key="listId"  ----> 設(shè)置選中的數(shù)據(jù) 必須寫 注意不要寫 ':' 我當(dāng)時就是寫了 找錯找了得有好幾個小時 哭死
    :current-node-key="currentNodeKey" ----> 設(shè)置選中必須寫
    :highlight-current="true" ----> 設(shè)置高亮 必須寫
    :props="defaultProps" ----> 可以配置節(jié)點標簽的屬性值

props的配置

在這里插入圖片描述

HTML部分

    <el-tree
      ref="tree"
      default-expand-all
      :data="data"
      @node-click="handleNodeClick"
      node-key="id"
      :current-node-key="currentNodeKey"
      :highlight-current="true"
      :props="defaultProps"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span :id="data.id">{{ node.label }}</span>
      </span>
    </el-tree>
    <el-button @click="nodeClick1" type="primary">點擊后選中id為006的</el-button>

JS部分

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          name: "一級 1",
          children: [
            {
              id: 4,
              name: "二級 1-1",
              children: [
                {
                  id: 9,
                  name: "三級 1-1-1",
                },
                {
                  id: 10,
                  name: "三級 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          name: "一級 2",
          children: [
            {
              id: "005",
              name: "二級 2-1",
            },
            {
              id: "006",
              name: "二級 2-2",
            },
          ],
        },
        {
          id: 3,
          name: "一級 3",
          children: [
            {
              id: 7,
              name: "二級 3-1",
            },
            {
              id: 8,
              name: "二級 3-2",
              children: [
                {
                  id: 11,
                  name: "三級 3-2-1",
                },
                {
                  id: 12,
                  name: "三級 3-2-2",
                },
                {
                  id: 13,
                  name: "三級 3-2-3",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
      currentNodeKey: "",
    };
  },
   watch: {
    currentNodeKey(newVal) {
      if (newVal.toString()) {
        this.$refs["tree"].setCurrentKey(newVal);
      } else {
        this.$refs["tree"].setCurrentKey(null);
      }
    },
  },
  methods: {
    // 點擊節(jié)點
    handleNodeClick(data,node){
      this.currentNodeKey = data.id;
      // 判斷點擊的層級進行操作
      if(node.level == 1){
        console.log('第一層data1',data);
        console.log('第一層node1',node);
      }else if(node.level == 2){
        console.log('第二層data2',data);
        console.log('第二層node2',node);
      }else if(node.level == 3){
        console.log('第三層data3',data);
        console.log('第三層node3',node);
      }
    },

    nodeClick1(){
      // 點擊選中006號
      this.$refs.tree.setCurrentKey('006'); 
    },

    // 如果數(shù)據(jù)過多可以調(diào)用這個方法并傳入要顯示的id
    //滾動到選中定位的位置
    selectedRegion(id) {
      console.log("滾動到選中定位的位置");
      // 通過Id獲取到對應(yīng)的dom元素
      const node = document.getElementById(id);
      setTimeout(() => {
        if (node) {
          this.$nextTick(() => {
            // 通過scrollIntoView方法將對應(yīng)的dom元素定位到可見區(qū)域 【block: 'center'】這個屬性是在垂直方向居中顯示
            node.scrollIntoView({ block: "center" });
          });
        }
      }, 100);
    },
  },
};
</script>

修改樣式

<style scoped>
/*  點擊時的樣式 */
.el-tree ::v-deep.el-tree-node:focus > .el-tree-node__content {
  background-color: #edf3fc !important;
  border-radius: 8px;
}
/* tree 的高度和寬度重新定義 */
::v-deep.el-tree .el-tree-node > .el-tree-node__content {
  width: 300px;
  height: 40px;
}
/*  鼠標hover改變背景顏色 */
.el-tree ::v-deep.el-tree-node > .el-tree-node__content:hover {
  background-color: #edf3fc !important;
  border-radius: 8px;
}
/*  顏色高亮 */
::v-deep.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #edf3fc !important;
  border-radius: 8px;
}
</style>

附上全部代碼

<style scoped>
/*  點擊時的樣式 */
.el-tree ::v-deep.el-tree-node:focus > .el-tree-node__content {
  background-color: #edf3fc !important;
  border-radius: 8px;
}
/* tree 的高度和寬度重新定義 */
::v-deep.el-tree .el-tree-node > .el-tree-node__content {
  width: 300px;
  height: 40px;
}
/*  鼠標hover改變背景顏色 */
.el-tree ::v-deep.el-tree-node > .el-tree-node__content:hover {
  background-color: #edf3fc !important;
  border-radius: 8px;
}
/*  顏色高亮 */
::v-deep.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #edf3fc !important;
  border-radius: 8px;
}
</style>

到此這篇關(guān)于vue2+elementUI的el-tree的選中、高亮、定位的文章就介紹到這了,更多相關(guān)vue2 elementUI選中、高亮、定位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: