element ui知识

本文详细介绍了ElementUI中的按钮组件、分栏布局、下拉菜单的使用,包括按钮的属性、下拉菜单的触发方式和尺寸控制,以及选择器的选项绑定。同时,也提到了Vue的条件语句v-if、v-else和v-show在控制元素显示状态的应用。
摘要由CSDN通过智能技术生成

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
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值