2023.2.27
1.按钮
(60条消息) Element el-button 按钮组件详解_程序员大阳的博客-CSDN博客_el-button
<el-row>分栏布局
link 元素用于链接样式表等外部资源。
*属性：rel属性定义链接资源与文档之间的关系；
href：指明外部资源文件的路径；
2、分割线
template模板标签
content-position 控制分割线内容的位置
direction="vertical" 设置垂直分割线
3、下拉菜单：el-dropdown
适用场景
el-dropdown和el-select的展示效果很相似
知识点：
1.el-dropdown嵌套el-dropdown-menu，el-dropdown-menu嵌套el-dropdown-item使用
2.下拉可设置成文本+图标，按钮+图标，统一在el-dropdown的标签包裹位置设置
3.按钮+分割线+图标的设置通过el-dropdown中的split-button和type属性控制，@click事件点击按钮文本触发
4.el-dropdown的trigger默认为hover，可以设置为click
5.el-dropdown的hide-on-click默认为true，即下拉菜单选项被选中后，会自动关闭下拉菜单，设置为false，不会自动关闭
6.size可以控制下拉菜单的大小
7.el-dropdown-menu需要指定slot为dropdown
8.el-dropdown-item设置icon,左侧显示图标
9.el-dropdown-item设置command对应el-dropdown的@command的参数；
10.el-dropdown-item设置divided 可以在菜单选项上方显示分割线；
11.el-dropdown和el-dropdown-item设置disabled,即不可选中；
4、选择器：el-select，
https://blog.csdn.net/woshisangsang/article/details/119511780?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167751304316800211581961%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167751304316800211581961&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-119511780-null-null.142^v73^pc_new_rank,201^v4^add_ask,239^v2^insert_chatgpt&utm_term=el-select&spm=1018.2226.3001.4187
a. 用途：称作下拉框、下拉列表，用于从若干个候选项中选择其中一个(或者多个)。
b.数据绑定
通过v-for绑定一个数组;
b1.固定选项
选中项的value与selectedValue双向绑定
b2.选项绑定数组
选项绑定数组，可以通过v-for循环进行动态绑定
5.表格：el-table
el-table-column表示表格的一列，
prop是列表的属性名，
label是列的显示名称，
width用于指定列宽度。
注意，一般最后一列的宽度我们不指定，这样的话可以自动占满剩余空间。文章来源：https://www.toymoban.com/news/detail-770487.html
6、vue条件语句
1. v-if="变量" 控制元素是否显示 变量true显示 false不显示(删除元素)
2. v-else让元素的显示状态和上面v-if取反
3. v-show="变量" 控制元素是否显示 变量true显示 false不显示(隐藏元素）
如果元素需要频繁切换显示状态则使用v-show
文章来源地址https://www.toymoban.com/news/detail-770487.html
到了这里，关于element ui知识的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
