el-tree 默认选中第一个且高亮显示

最新推荐文章于 2024-09-30 14:28:41 发布

菜@

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量99

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_45915072/article/details/142518323

版权

node-key="id" 是关键

<el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
            :highlight-current="true"
            :current-node-key="1"
            node-key="id"
            :default-checked-keys="[1]"
          >
</el-tree>
treeData: [
        {
        id:1,
        label: '生盘条导入质检查询', children: []
      },{
        id:2,
        label: '磷化盘条导入质检查询',children: []
      }, {
        id:3,
        label: '镀锌丝导入质检查询',children: []
      }, {
        id:4,
        label: '热处理丝导入质检查询',children: []
      }, {
        id:5,
        label: '成品导入质检查询',children: []
      }, {
        id:6,
        label: '导入出库列表',children: []
      }
      ],
      defaultProps: {
        // 如果你的树形结构含有子节点，可以定义子节点属性
        children: 'children',
        label: 'label',
        // 这里是设置节点的key
        key: 'id',
      },
<style scoped lang='scss'>
/* 改变被点击节点背景颜色，字体颜色 */
::v-deep .el-tree-node:focus > .el-tree-node__content {
  background-color: #6195F0 !important;
  color: #fff !important;
}

/* 节点失焦时的背景颜色 */
::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #6195F0 !important;
  color: #fff !important;
}
</style>