Element-UI

RumbleWx

已于 2022-07-07 18:41:43 修改

阅读量1.4k

点赞数

于 2022-07-06 11:46:54 首次发布

本文链接：https://blog.csdn.net/RumbleWx/article/details/125633503

版权

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