• element-ui学习


    1.
    行:el-row
    列:el-col
    例:
    <el-row>
    <el-col :span="20"><div class="grid-content bg-purple-dark"></div></el-col>
    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
    </el-row>

    col 组件的 offset 属性可以指定分栏偏移的栏数

    2.
    实例化Vue
    方法一:最常用的方法
    var app=new vue({
    el:"#app",
    data(){}
    })

    方法二:$mount 手动挂载(挂载到某个dom)
    var app=new vue({
    data(){}
    })
    app.$mount("#app")

    3.
    <el-container>:外层容器。当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。

    <el-header>:顶栏容器。

    <el-aside>:侧边栏容器。

    <el-main>:主要区域容器。

    <el-footer>:底栏容器。

    子元素中有 el-header 或 el-footer 时为 vertical,否则为 horizontal

    4.
    table
    prop="name"

    5.
    :xs="24" :sm="8" :lg="6" :xl="6"
    响应式布局-兼容多个终端

    6.
    inline 属性可以让表单域变为行内的表单域

    7.
    highlight-current-row 高亮显示
    stripe 斑马纹
    sort-change 当表格的排序条件发生变化的时候会触发该事件
    el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的代码

    show-overflow-tooltip 表格里数据过长时,省略号显示
    text-overflow="ellipsis" 同上 CSS

    effect="light" effect 默认提供的主题 String dark/light dark

    如果错误,请指出,谢谢!

  • 相关阅读:
    jmeter 创建
    MySQL远程连接不上的解决方法
    删除文件及文件夹
    wsdl使用方式
    solr查询参数过长问题解决
    Inno Setup添加自定义页面
    java中日期的加减,比较,以及与String的互相转换
    vue项目引入第三方js
    vue覆盖elementui样式的几种方式
    SQL Server 连接表内部查询中的逗号分隔字符串
  • 原文地址:https://www.cnblogs.com/liuyj-dev/p/9967706.html
Copyright © 2020-2023  润新知