响应式布局
happylay 🐑 2020-12-25 代码片段
摘要: 响应式布局 时间: 2020-12-23
# element-ui 响应式布局
<template>
<div>
<el-row>
<!-- xs：超小 sm：小 md：中等 lg：大 xl:超级大 -->
<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="3">测试一</el-col>
<el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17"> 测试二 </el-col>
<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">测试三</el-col>
</el-row>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 简单表格
<div>
<el-row
v-for="(item1, index1) in 10"
:key="index1"
style="border-bottom: 1px solid #aaa; display:flex;align-items: center;"
>
<!-- 渲染一级权限 -->
<el-col :span="5">
<el-tag style="margin:7px;">第一列{{ item1 }}</el-tag>
<i class="el-icon-caret-right"></i>
</el-col>
<!-- 渲染二、三级权限 -->
<el-col :span="19">
<el-row
v-for="(item2, index2) in item1"
:key="index2"
style="border-top: 1px solid #aaa; display:flex;align-items: center;"
>
<!-- 二级权限 -->
<el-col :span="6">
<el-tag type="success" style="margin:7px;">
第二列{{ item2 }}
</el-tag>
<i class="el-icon-caret-right"></i>
</el-col>
<!-- 三级权限 -->
<el-col :span="18">
<el-tag
type="success"
style="margin:7px;"
v-for="(item3, index3) in item2"
:key="index3"
>
第三列{{ item3 }}
</el-tag>
<i class="el-icon-caret-right"></i>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41