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