element树形组件,element树形表格
本文主要介绍树列表组件和下拉列表树组件在项目中的使用，以及SplitPanel组件。
:
目录
1.使用传统的树形列表控件2。下拉框树形列表的处理
1、常规树列表控件的使用
众所周知，通用接口的很多情况都涉及到树型列表的处理，比如类型显示。如果是层，可以用下拉列表代替。如果是多层的，用树形控件显示会更直观。
元素中还有一个el树控件，如下所示。这里主要介绍它的各种性质和方法。
简单的代码如下
El-tree:data= data @ node-click= handle node click /El-tree
在脚本部分，指定了它的数据data，以及点击节点的事件处理，结合卡片控件的显示，我们可以在里面显示树。
界面如下所示。所有扩展可以设置为default-expand-all，icon-class指定节点图标(或者默认不指定)。
电子贺卡class=盒卡
div slot= header class= clear fix
Span树列表/span
El-button style= float:right；Padding: 3px 0 type=text 操作按钮/el-button
/div
差异
el树
style=padding-top:10px
:data=treedata
node-key=id
默认-展开-全部
el-icon-price-tag
突出显示-当前
@node-click=handleNodeClick
span slot-scope={ node，data } class=custom-tree-node
跨度
i :class=node.icon？node . icon: El-icon-price-tag /
{{ node.label }}
/span
/span
/el-tree
/div
/电子名片
在界面中，我们通过class=custom-tree-node 指定树列表的显示内容，并可以添加图标和其他信息。
在脚本中，定义了一个treedata属性。
//初始化树列表
treedata: [
{
标签:“级别1 1”，
id:“1”，
孩子：[{
id:“1-1”，
标签:“级别2 1-1”，
孩子：[{
标签:“级别3111”，
id:“1-1-1”
}, {
标签:“级别3 1-1-2”，
id:“1-1-2”
}, {
标签:“第三层113”，
id:“1-1-3”
}]
}]
}
]
如果设置了选择框，界面如下。
设置主show-checkbox和@ check-change= handleCheckchange 。
接口代码如下
el树
style=padding-top:10px
:data=treedata
node-key=id
默认-展开-全部
突出显示-当前
显示-复选框
:default-checked-keys=[ 1-1-1 ]
@node-click=handleNodeClick
@ check-change= handleCheckChange
span slot-scope={ node，data } class=custom-tree-node
跨度
i :class=node.icon？node . icon: El-icon-price-tag /
{{ node.label }}
/span
/span
/el-tree
对于树形列表，可以进行过滤操作，如下图界面所示。
在内容区添加一个输入文本框进行过滤，并绑定相应的属性变量。
el输入
v-model=filterText
Placeholder=输入要过滤的关键字
可清除的
前缀图标=el-icon-search
/
列表控件需要添加过滤函数绑定：filter-node-method=filterNode ，如下面的代码所示。
el树
ref=tree
class=筛选器树
style=padding-top:10px
:data=treedata
node-key=id
默认-展开-全部
突出显示-当前
显示-复选框
:filter-node-method=filterNode
@ check-change= handleCheckChange
@node-click=handleNodeClick
span slot-scope={ node，data } class=custom-tree-node
跨度
i :class=node.icon？node . icon: El-icon-price-tag /
{{ node.label }}
/span
/span
/el-tree
脚本的处理代码如下所示，需要看过滤的绑定值，变化就进行过滤处理。
为了在列表结合中进行快速的过滤，我们可以在上次介绍的列表界面里面增加一个树列表的快速查询处理。如下界面所示。
这里列表里面增加了一个第三方组件拆分窗格，用来划分区块展示，而且可以拖动，非常不错，地址是：
https://github.com/antoniandre/splitpanes
这个组件的演示展示地址如下所示：https://安东尼安德。github。io/拆分窗格
效果大概如下所示
新公共管理安装如下所示
npm i - S拆分窗格
安装成功后，然后在某视频剪辑软件文件的脚本部分里面引入即可
从"拆分窗格"导入{ Splitpanes，Pane }
导入 splitpanes/dist/splitpanes.css
它的使用代码也很简单
splitpanes style=height: 400px
窗格最小尺寸= 20 1/窗格
窗片
水平拆分窗格
窗格2/窗格
窗格3/窗格
窗格4面板
/splitpanes
/窗格
窗格5/窗格
/splitpanes
我的列表界面使用了两个面板即可实现左侧树的展示，和右侧常规列表查询的处理。
2、下拉框树列表的处理
除了常规的树列表展示内容外，我们也需要一个在下拉列表中展示树内容的界面组件。
这里又得引入一个第三方的界面组件，因此元素的挑选组件不支持树列表。
开源代码库地址：https://github。com/Rio phae/vue-树选择
官网地址：https://vue-treeselect.js.org/
新公共管理理论安装：
新公共管理安装-保存@riophae/vue-treeselect
界面代码如下所示。
模板
div id=应用程序
树选择v-model= value :multiple= true :options= options /
/div
/模板
这里的价值就是选中的集合，选项则是树列表的节点数据。
脚本
//导入组件
从" @riophae/vue-treeselect "导入树选择
//导入样式
导入@ Rio phae/vue-tree select/dist/vue-tree select。 CSS
导出默认值{
//注册组件
组件：{ Treeselect }，
data() {
返回{
//定义默认值
值：null，
//定义选项
选项：[ {
id: a ，
标签:“一个”，
孩子：[ {
id:“aa”，
标签:“aa”，
}, {
id: ab ，
标签:“ab”，
} ],
}, {
id:“b”，
标签:“b”，
}, {
id:“c”，
标签:“c”，
} ],
}
},
}
/脚本
我的测试界面代码如下所示
div style=height:180px
！-
v型车绑定选中的集合
选择树节点数据
defaultExpandLevel展开层次，无穷大为所有
平的为子节点不影响父节点，不关联
-
树选择
v-model=值
:options=treedata
:multiple=true
:flat=true
:default-expand-level=Infinity
：点击打开=真
：焦点上打开=真
可清除的
：最大高度=200
/
/div
脚本
//导入树选择组件
从" @riophae/vue-treeselect "导入树选择
//导入样式
导入@ Rio phae/vue-tree select/dist/vue-tree select。 CSS
导出默认值{
名称："树",
组件：{ Treeselect }，
data() {
返回{
//过滤条件
filterText:" "，
//初始化树列表
treedata: [
{
标签: 一级1,
id:“1”，
孩子：[{
id:“1-1”，
标签: 二级1-1,
孩子：[{
标签: 三级1-1-1,
id:“1-1-1”
}, {
标签: 三级1-1-2,
id:“1-1-2”
}, {
标签: 三级1-1-3,
id:“1-1-3”
}]
}]
}
],
值：[1-1-2]
}
},
..
}
/脚本
来一张几个树列表一起的对比展示界面。
以上是普通树形列表和下拉列表树形显示的界面效果。往往一些特殊的界面处理需要通过一些包装良好的第三方界面组件来实现，可以丰富我们的界面显示效果。
以上是Vue元素前端应用开发的树形列表组件的详细内容。更多关于Vue元素树列表组件的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。