el-tree 按比例设置列宽度

时间: 2023-07-20 22:23:09 浏览: 104

el-tree创建结构线，并且可拖动

在前端开发中，`el-tree` 是一个非常常用的组件，尤其在数据展示和管理时，如组织架构、文件目录等场景。本知识点主要探讨如何利用 `el-tree` 创建具有结构线的树形视图，并实现节点的拖动功能，以增强用户交互体验。一、el-tree 结构线在 `el-tree` 中，结构线指的是树形结构中的连接线，它有助于清晰地展示各个节点之间的层级关系。默认情况下，`el-tree` 并不显示结构线，但可以通过设置配置项来开启这一特性。在 Vue 中，可以这样做： ```html <el-tree :props="defaultProps" :default-expand-all="true" node-key="id" show-checkbox highlight-current :indent="18" :expand-on-click-node="false" :render-content="renderContent" :node-render="renderNode" :data="data" :show-line="{true}" ></el-tree> ``` 在这里，`:show-line="{true}"` 就是开启结构线的配置，将值设为 `true` 即可。二、el-tree 拖拽功能为了让 `el-tree` 具备拖动节点的能力，我们需要引入第三方库 `vuedraggable`，这是一个基于 Vue.js 的拖放库，兼容了 Sortable.js。首先安装 `vuedraggable`： ```bash npm install vuedraggable --save ``` 然后在项目中导入并使用： ```js import draggable from 'vuedraggable'; export default { components: { draggable, }, // ... }; ``` 接下来，我们需要自定义渲染节点，使用 `v-for` 循环遍历数据，同时添加 `draggable` 组件，如下： ```html <template slot-scope="{ node, data, store }"> <div class="tree-node" ref="nodeRef">  </div> <draggable v-model="store.states.treeData" :options="{ group: 'tree', handle: '.drag-handle' }" @start="dragStart" @end="dragEnd" > <template v-for="(item, index) in store.states.treeData" :key="item.id"> <div class="tree-node" ref="nodeRef">  </div> </template> </draggable> </template> ``` 在拖放过程中，需要监听 `start` 和 `end` 事件，以便在拖动开始和结束时执行相应操作，比如更新数据源： ```js methods: { dragStart() { // ... }, dragEnd(newOrder) { this.$nextTick(() => { const treeData = this.store.states.treeData.slice(); treeData.sort((a, b) => newOrder.indexOf(a.id) - newOrder.indexOf(b.id)); this.$set(this.store.states, 'treeData', treeData); }); }, }, ``` 至此，我们已经实现了 `el-tree` 结构线的显示以及节点的拖放功能。在实际应用中，可能还需要处理其他细节，例如处理拖动时的动画效果、防止拖动到不允许的位置等。记得在使用过程中根据具体需求进行调整和优化，以提供更流畅、友好的用户体验。

对于 el-tree 组件，可以通过设置其 column 标签的 width 属性来设置列的宽度。如果要按比例设置列宽度，可以使用 calc() 函数结合百分比来实现。例如，如果想让第一列宽度为整个 el-tree 宽度的 30%，可以这样设置： ```html <el-tree :data="data"> <el-tree-column prop="name" label="名称" width="calc(30% - 16px)"></el-tree-column> <el-tree-column prop="age" label="年龄" width="calc(70% - 16px)"></el-tree-column> </el-tree> ``` 其中，-16px 是因为 el-tree-column 默认有 8px 的 padding，所以需要减去。这样就可以按比例设置 el-tree 的列宽度了。

阅读全文

el-tree 按比例设置列宽度

相关推荐

Vue+El-Table表格自适应操作列宽度封装Demo

Vue-CLI项目中El-tree自定义增删改操作与局部刷新懒加载详解

el-table 按比例设置列宽度

el-select-tree:ElementUI的el-select与el-tree结合

el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件

el-tree-selected-tree

el-tree的宽度怎么设置

el-tree宽高设置

el-tree 宽度

el-tree自定义宽度

【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用demo, 开箱即用

el-tree-transfer.rar

在element-ui的el-tree组件中用render函数生成el-button的实例代码

el-tree实现el-transfer(穿梭框)的效果代码（全）

el-tree虚拟滚动

封装ElementUI组件el-tree

Element-ui el-tree新增和删除节点后如何刷新tree的实例

el-tree自适应高度

el-tree 添加横向滚动条

最新推荐

改变el-table宽度

element-ui tree结构实现增删改自定义功能代码

R语言中workflows包的建模工作流程解析

管理建模和仿真的文件

【工程技术中的数值分析秘籍】：数学问题的终极解决方案

如何在数控车床仿真系统中正确进行机床回零操作？请结合手工编程和仿真软件操作进行详细说明。

Vue统计工具项目配置与开发指南

"互动学习：行动中的多样性与论文攻读经历"

74LS181逻辑电路设计：原理图到实际应用的速成课

在集成电路测试中，如何根据JEDEC标准正确应用K因子校准方法来测量热阻？