el-tree中展示项换行展示

文章目录

效果如下所示:

没有换行展示的效果

修改样式换行之后的展示效果

本质上就是在vue代码中对el-tree的默认样式进行了修改,这是修改样式的代码。如果想了解详细的,往后看就行了

html 复制代码
<!-- <style scoped>

/* 这里需要用到深度选择器,否则改变不了样式,
无论scoped是否存在都需要使用到深度选择器 */
:deep(.el-tree-node) {
  white-space: normal;
  outline: 0;
}

:deep(.el-tree-node__content) {
  text-align: left;
  align-items: start;
  margin: 4px;
  height: 100%;

}


</style> -->

<style scoped lang="scss">
// 如果使用了sass时,也可以这样写,
// 使用了sass也可以像上面一样写,就写两个深度选择器
// 这个我也是F12,然后看到它们对应的关系的
:deep(.el-tree-node) {
      white-space: normal;
      outline: 0;

      .el-tree-node__content {
        text-align: left;
        align-items: start;
        margin: 4px;
        height: 100%;
      }
    }
</style>

想要了解el-tree使用的详情往下看

这里使用的是Vite(Home | Vite中文网 (vitejs.cn)) + Vue3 + Ts建立的项目,使用了element plus(设计 | Element Plus (element-plus.org))这个组件库。

package.json中对应的版本信息如下所示

javascript 复制代码
{
  "name": "vue3-ts-vite-wen-zhang-ji-lu-xiang-mu",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.4.2",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vue-tsc": "^1.8.5"
  }
}

代码和数据如下所示

Vue代码中可能使用到的数据如下

假设从后端请求有一份这样的数据,属性数据result.json文件如下所示

javascript 复制代码
{
    "code": 200,
    "message": "成功",
    "data": [
        {
            "mediaCatalogId": 1,
            "mediaCatalogName": "合同",
            "parentId": -1,
            "children": [
                {
                    "mediaCatalogId": 2,
                    "mediaCatalogName": "合同",
                    "parentId": 1,
                    "children": []
                }
            ]
        },
        {
            "mediaCatalogId": 3,
            "mediaCatalogName": "项目部组织体系文件这是一个测试项测试项测试项",
            "parentId": -1,
            "children": [
                {
                    "mediaCatalogId": 4,
                    "mediaCatalogName": "项目部成立文件项目部组织体系文件这是一个测试项测试项测试项,我来进行测试了",
                    "parentId": 3,
                    "children": []
                },
                {
                    "mediaCatalogId": 5,
                    "mediaCatalogName": "质量管理机构人员项目部组织体系文件这是一个测试项测试项测试项,我来进行测试了",
                    "parentId": 3,
                    "children": []
                }
            ]
        },
        {
            "mediaCatalogId": 6,
            "mediaCatalogName": "过程资料项目部组织体系文件这是一个测试项测试项测试项,测试中",
            "parentId": -1,
            "children": [
                {
                    "mediaCatalogId": 7,
                    "mediaCatalogName": "地质资料项目部组织体系文件这是一个测试项测试项测试项,测试中",
                    "parentId": 6,
                    "children": []
                },
                {
                    "mediaCatalogId": 8,
                    "mediaCatalogName": "出工检查表",
                    "parentId": 6,
                    "children": []
                },
                {
                    "mediaCatalogId": 9,
                    "mediaCatalogName": "开工申请表",
                    "parentId": 6,
                    "children": []
                },
                {
                    "mediaCatalogId": 10,
                    "mediaCatalogName": "中期检杳查、完工验收表项目部组织体系文件这是一个测试项测试项测试项,测试中",
                    "parentId": 6,
                    "children": []
                },
                {
                    "mediaCatalogId": 11,
                    "mediaCatalogName": "钻孔较工验收单",
                    "parentId": 6,
                    "children": []
                },
                {
                    "mediaCatalogId": 12,
                    "mediaCatalogName": "钻孔质量评定表项目部组织体系文件这是一个测试项测试项测试项",
                    "parentId": 6,
                    "children": []
                },
                {
                    "mediaCatalogId": 13,
                    "mediaCatalogName": "平码验收单",
                    "parentId": 6,
                    "children": []
                }
            ]
        },
        {
            "mediaCatalogId": 14,
            "mediaCatalogName": "人员台账",
            "parentId": -1,
            "children": [
                {
                    "mediaCatalogId": 15,
                    "mediaCatalogName": "勘察单位人员台好",
                    "parentId": 14,
                    "children": []
                },
                {
                    "mediaCatalogId": 16,
                    "mediaCatalogName": "勘探单位人员台账项目部组织体系文件这是一个测试项测试项测试项",
                    "parentId": 14,
                    "children": [
                        {
                            "mediaCatalogId": 17,
                            "mediaCatalogName": "第三级分类项目部组织体系文件这是一个测试项测试项测试项",
                            "parentId": 16,
                            "children": []
                        }
                    ]
                }
            ]
        }
    ]
}

对应的ts类型,MediaCatalog.ts

typescript 复制代码
/**
 * MediaCatalog
 */
export interface MediaCatalog {
  /**
   * 创建者
   */
  createBy?: string;
  /**
   * 更新时间
   */
  createTime?: string;
  /**
   * 媒体目录ID
   */
  mediaCatalogId?: number;
  /**
   * 媒体目录名称
   */
  mediaCatalogName?: string;
  /**
   * 父级ID
   */
  parentId?: number;
  /**
   * 备注
   */
  remark?: string;
  /**
   * 类型
   */
  type?: string;
  /**
   * 更新者
   */
  updateBy?: string;
  /**
   * 更新时间
   */
  updateTime?: string;

  /**
   * 树形结构
   */

  children?: MediaCatalog[]
  
}

Vue的代码如下:

el-tree的用法看官网:Tree 树形控件 | Element Plus (element-plus.org),这里有基础用法,就不重复追叙了,直接上代码

html 复制代码
<template>
  <div style="width: 300px; height: 800px;">
    <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { MediaCatalog } from './test/MediaCatalog.ts'
import result from './test/result.json'

interface Tree {
  /**
   * 媒体目录ID
   */
  mediaCatalogId?: number;
  /**
   * 媒体目录名称
   */
  mediaCatalogName?: string;
  /**
   * 父级ID
   */
  parentId?: number;
  /**
   * 子集
   */
  children?: Tree[]
}

const defaultProps = {

  id: 'mediaCatalogId',
  // 这个children项在树形数据中也是需要有的
  children: 'children',
  mediaCatalogId: 'mediaCatalogId',
  mediaCatalogName: 'mediaCatalogName',
  // 可以适当多添加几项,根据需求来
  parentId: "parentId",
  // // 这个label选项是必须要有的,否则无法显示文字,只展示树形关系,也就是每一层都是空白
  label: 'mediaCatalogName'

}

const handleNodeClick = (data: Tree) => {
  console.log("点击属性结构某一项的数据", data)
}

const treeData = ref<MediaCatalog[]>([])

onMounted(() => {
  console.log(result)
  treeData.value = result.data
})

</script>

<!-- <style scoped>

/* 这里需要用到深度选择器,否则改变不了样式,
无论scoped是否存在都需要使用到深度选择器 */
:deep(.el-tree-node) {
  white-space: normal;
  outline: 0;
}

:deep(.el-tree-node__content) {
  text-align: left;
  align-items: start;
  margin: 4px;
  height: 100%;

}


</style> -->

<style scoped lang="scss">
// 如果使用了sass时,也可以这样写,
// 使用了sass也可以像上面一样写,就写两个深度选择器
// 这个我也是F12,然后看到它们对应的关系的
:deep(.el-tree-node) {
      white-space: normal;
      outline: 0;

      .el-tree-node__content {
        text-align: left;
        align-items: start;
        margin: 4px;
        height: 100%;
      }
    }
</style>

没有换行展示的效果

换行之后的展示效果

在代码中的

从上面的代码可以看出,本质上就是修改了el-tree的默认样式

html 复制代码
<!-- <style scoped>

/* 这里需要用到深度选择器,否则改变不了样式,
无论scoped是否存在都需要使用到深度选择器 */
:deep(.el-tree-node) {
  white-space: normal;
  outline: 0;
}

:deep(.el-tree-node__content) {
  text-align: left;
  align-items: start;
  margin: 4px;
  height: 100%;

}


</style> -->

<style scoped lang="scss">
// 如果使用了sass时,也可以这样写,
// 使用了sass也可以像上面一样写,就写两个深度选择器
// 这个我也是F12,然后看到它们对应的关系的
:deep(.el-tree-node) {
      white-space: normal;
      outline: 0;

      .el-tree-node__content {
        text-align: left;
        align-items: start;
        margin: 4px;
        height: 100%;
      }
    }
</style>

样式调试

从F12之后调试中我们可以看到

相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰7 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪7 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy8 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom9 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom9 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom9 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom9 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试