vue2+elementUI的el-tree的选中、高亮、定位功能的实现

在使用无选择框的el-tree时遇到的坑以及如何使用el-tree

最后附全部代码

    ref="tree" ----> 必须写
  accordion ----> 是否每次只打开一个同级树节点展开 看个人选择
  default-expand-all ----> 默认打开全部节点
  :data="leftData"  ----> 必写 展示数据
  @node-click="handleNodeClick" ----> 节点被点击时的回调
  node-key="listId"  ----> 设置选中的数据 必须写 注意不要写 ':' 我当时就是写了 找错找了得有好几个小时 哭死
  :current-node-key="currentNodeKey" ----> 设置选中必须写
  :highlight-current="true" ----> 设置高亮 必须写
  :props="defaultProps" ----> 可以配置节点标签的属性值

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: {
  // 点击节点
  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'); 
  },

  // 如果数据过多可以调用这个方法并传入要显示的id
  //滚动到选中定位的位置
  selectedRegion(id) {
    console.log("滚动到选中定位的位置");
    // 通过Id获取到对应的dom元素
    const node = document.getElementById(id);
    setTimeout(() => {
      if (node) {
        this.$nextTick(() => {
          // 通过scrollIntoView方法将对应的dom元素定位到可见区域 【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>

关于vue2+elementUI的el-tree的选中、高亮、定位的文章就介绍至此，更多相关vue2elementUI选中、高亮、定位内容请搜索编程宝库以前的文章，希望以后支持编程宝库！

 一. svg图标介绍svg图标是用作Web应用程序或移动应用程序内的图标或图像按钮。图标使用svg的优点：可以轻松地按比例放大和缩小图标，具体取决于要在应用程序中显示的位置以及显示应用程序的屏幕尺寸 ...