默认选中tree中的第一个元素 elementui

最新推荐文章于 2024-08-12 10:13:19 发布

没错就是我哎呀

最新推荐文章于 2024-08-12 10:13:19 发布

阅读量1.5k

点赞数

分类专栏： vue 前端

本文链接：https://blog.csdn.net/he3236220/article/details/115394911

版权

前端同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

vue

34 篇文章 1 订阅

订阅专栏

这是一个基于Vue.js的地铁线路选择组件，利用el-tree展示数据，并通过节点点击事件进行线路选择。组件默认展开所有节点，高亮当前选中线路，同时支持本地存储获取和设置当前选中线路的ID。当节点被点击时，会触发'line-click'事件，将数据传递给父组件。样式上，组件设置了特定的高亮和滚动效果。

摘要由CSDN通过智能技术生成

主要代码：

node-key="id"
:current-node-key="defaultId"

完整代码：

<template>
  <div class="dt-line">
    <el-scrollbar>
      <basic-container>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>地铁线路</span>
          </div>
          <el-tree
            :data="deptTree"
            :props="defaultProps"
            node-key="id"
            :current-node-key="defaultId"
            default-expand-all="true"
            highlight-current
            @node-click="handleNodeClick"
          ></el-tree>
        </el-card>
      </basic-container>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "dtLine",
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "title",
      },
      defaultId: "",
    };
  },
  props: {
    deptTree: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  created() {
    this.defaultId = localStorage.getItem("deptId");
  },
  methods: {
    handleNodeClick(data) {
      this.$emit("line-click", data);
    },
  },
};
</script>

<style scoped>
.dt-line {
  height: 800px;
}
.dt-line .el-scrollbar__wrap {
  overflow: scroll;
}

.dt-line .box-card /deep/ .el-card__body {
  padding: 0 !important;
  margin-top: 15px;
}

.dt-line
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  color: #4d95fd;
  font-weight: bold;
}
</style>