Element-UI 组件
Tree 树形控件
用清晰的层级结构展示信息，可展开或折叠。
<el-tree></el-tree>
常用属性（参数 说明 类型 可选值 默认值）
lazy需与load结合使用
在data数据内添加id键来绑定array内的值
一般绑定id
为false的时候 只有点▲箭头才能展开/收缩
筛选节点
accordion 手风琴模式 同一级节点，只能同时展开一个
拖拽节点
如下，三级 3-2-2节点（返回false） 无法被拖拽
如下 二级 3-1节点 无法把其它节点放置到它内部（inner）
常用props（参数 说明 类型 可选值 默认值）
常用事件（事件名称 说明 回调参数）
节点点击
节点选中状态改变
拖拽
disabled设置禁用状态
Table 表格控件
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
<el-table></el-table> <el-table-column></el-table-column>
固定表头
只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。
固定列
固定列需要使用fixed属性，它接受 Boolean 值或者left/right，表示左边固定还是右边固定。
树形结构和表格结合
table有expand的type，可以展开，在内嵌入树形结构
Tooltip 文字提示
常用于展示鼠标 hover 时的提示信息。
<el-tooltip></el-tooltip>
使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。如placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。
通过设置effect属性来改变主题，默认为dark。 dark/light
Dropdown 下拉菜单
将 动作或菜单 折叠到下拉菜单中。
<el-dropdown>
<el-dropdown-menu>
<el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
通过组件slot来设置下拉触发的元素 以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下，下拉按钮只要hover即可，无需点击也会显示下拉菜单。
disabled 属性 禁止选用
divided 属性 在选项上方出现一条水平线
split-button 属性
触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为true即可
左边按钮 右边下拉菜单
trigger 属性 值默认为hover 可选为click
设置菜单激活的触发方式
hide-on-click 属性
下拉菜单默认在被点击后会隐藏 可以更改此值，让其被点击后不隐藏
dropdown 的 command 事件 点击菜单项触发的事件回调 回调参数是dropdown-item的指令
dropdown-item 的 command 属性 类型string/number/object
Q1：每次格式化代码后，html部分的标签属性，每个属性都会单独占一行
格式化后👇
1、打开文件=》首选项=》设置，在下图的用户中找到 扩展=》Vetur ，点击 在settings.json 中编辑。
2、在settings.json 中添加如下代码
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto",
"wrap_line_length": 0,
}
}3、然后看一下Default Formatter：HTML 下拉框的值，将值改成了js-beautify-html
Q2：每次格式化代码后，代码缩进由默认的4变成2
1、打开文件=》首选项=》设置，搜索tabsize，如图，将插件的值更改为4文章来源：https://www.toymoban.com/news/detail-494756.html
文章来源地址https://www.toymoban.com/news/detail-494756.html
到了这里，关于Element-UI的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
