树形控件如何隐藏vue
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了树形控件如何隐藏vue相关的知识，希望对你有一定的参考价值。
参考技术A 具体代码<el-tree
:data="data"
ref="tree"
default-expand-all
node-key="id"
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope=" node, data " @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
<span> node.label </span>
<span>
<el-tooltip v-show="data.show" class="item" effect="dark" content="文字提示" placement="top">
<el-button
type="text"
size="mini"
@click="() => append(data)"
icon="el-icon-plus"
>
</el-button>
</el-tooltip>
<el-dropdown v-show="data.show" @command="handleCommand">
<span class="el-dropdown-link">
<i class="el-icon-more"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="addFolder">新增文件夹</el-dropdown-item>
<el-dropdown-item command="edit">编辑</el-dropdown-item>
<el-dropdown-item command="delete">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</span>
</el-tree>
<script>
export default
data()
const data = [
id: 1,
label: '一级 1',
children: [
id: 4,
label: '二级 1-1',
]
,
id: 2,
label: '一级 2',
children: [
id: 5,
label: '二级 2-1',
,
id: 6,
label: '二级 2-2',
]
,
id: 3,
label: '一级 3',
children: [
id: 7,
label: '二级 3-1',
,
id: 8,
label: '二级 3-2',
]
]
return
defaultProps:
children: 'children',
label: 'label'
,
data: JSON.parse(JSON.stringify(data))
,
methods:
mouseenter(data)
this.$set(data, 'show', true)
,
mouseleave(data)
this.$set(data, 'show', false)
,
</script>
vue基于element树形控件实现上下拖拽
前言
树形控件能够用清晰的层级结构关系展示信息。通过树形控件你可以控制系统的菜单，但如果想要修改菜单的顺序，就需要修改数据库来调整，显然是很麻烦的，所以就需要我们实现树形控件之间上下的拖拽排序。
实现思路
树形控件拖拽又分为两种：同级拖拽排序、可跨级拖拽排序。其实不论是同级还是跨级都离不开一个核心的属性：draggable 属性。通过将树形控件设置 draggable 属性即可让节点变为可拖拽。以下是本章用到的属性参数和事件方法。
属性参数和事件方法
| 参数 | 说明 | 默认值 | 回调参数 |
|---|---|---|---|
| allow-drop | 拖拽时判定目标节点能否被放置。type 参数：‘prev’、‘inner’ 和 ‘next’，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 | - | - |
| draggable | 是否开启拖拽节点功能 | false | - |
| node-drop(事件方法) | 拖拽成功完成时触发的事件 | - | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event |
| show-checkbox | 节点是否可被选择 | false | - |
| default-expand-all | 是否默认展开所有节点 | false | - |
| node-key | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | - | - |
| highlight-current | 是否高亮当前选中节点 | false | - |
props
| 参数 | 说明 | 类型 |
|---|---|---|
| label | 指定节点标签为节点对象的某个属性值 | string, function(data, node) |
| children | 指定子树为节点对象的某个属性值 | string |
| disabled | 指定节点选择框是否禁用为节点对象的某个属性值 | boolean, function(data, node) |
| isLeaf | 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 | boolean, function(data, node) |
同级拖拽排序
源码如下
<template>
<div>
<!-- 树形组件 -->
<el-tree draggable :allow-drop="dropAllow" @node-drop="dragSuccess" ref="tree" :data="dataList" :props="defaultProps" show-checkbox
default-expand-all node-key="id" highlight-current></el-tree>
</div>
</template>
<script>
export default
data()
return
// 模拟数据
dataList: [
id: 1,
label: "一级菜单",
children: [
id: 5,
label: "1-1",
,
],
,
id: 2,
label: "二级菜单",
children: [
id: 6,
label: "2-1",
,
id: 7,
label: "2-2",
,
],
,
id: 3,
label: "三级菜单",
children: [
id: 8,
label: "3-1",
,
id: 9,
label: "3-2",
,
],
,
id: 4,
label: "四级菜单",
,
],
defaultProps:
label: "label", //指定节点标签为节点对象的某个属性值
children: "children", //指定子树为节点对象的某个属性值
,
;
,
methods:
// 拖拽时触发
dropAllow(draggingNode, dropNode, type)
if (draggingNode.level === dropNode.level)
if (draggingNode.parent.id === dropNode.parent.id)
// 向上拖拽 || 向下拖拽
return type === "prev" || type === "next";
else
return false;
,
// 拖拽成功时触发
dragSuccess(draggingNode, dropNode, type, event)
this.$message(
message: "成功",
type: "success",
);
console.log(draggingNode, dropNode, type, event);
// 请求接口传参即可
,
,
;
</script>
可跨级拖拽排序
可跨级拖拽说白了就是将限制放开，我们只需要在拖拽时判定目标节点能否被放置的方法中稍加修改即可，代码如下。
// 拖拽时触发
dropAllow(draggingNode, dropNode, type)
if (draggingNode.data.id === dropNode.data.id)
return type === "prev" || type === "next";
else
return type === "prev" || type === "next" || type === "inner";
,
以上是关于树形控件如何隐藏vue的主要内容，如果未能解决你的问题，请参考以下文章