当前位置:   article > 正文

element ui知识_element ui 分割线

element ui 分割线

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用于指定列宽度。
          注意,一般最后一列的宽度我们不指定,这样的话可以自动占满剩余空间。

    6、vue条件语句
           1. v-if="变量"      控制元素是否显示 变量true显示 false不显示(删除元素)
           2. v-else让元素的显示状态和上面v-if取反
           3. v-show="变量" 控制元素是否显示 变量true显示 false不显示(隐藏元素)
  如果元素需要频繁切换显示状态则使用v-show
 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/113635
推荐阅读
相关标签
  

闽ICP备14008679号