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

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

原文地址:https://www.cnblogs.com/liuyj-dev/p/9967706.html