主要代码:

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>

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐