vue 2 element UI 开发后台 常用组件_vue2 element ui 布局

1. element ui 地址

官网地址 ：https://element.eleme.cn/#/zh-CN/component/layout

2. 常用的Layout 布局

• 如图：

	<el-row>
	  	<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
	</el-row>
	<el-row>
	  	<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
	  	<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
	</el-row>
	<el-row>
	  	<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
	  	<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
	  	<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
	</el-row>
	<el-row>
	  	<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
	  	<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
	  	<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
	  	<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
	</el-row>
	<el-row>
		  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
	  	<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
	  	<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
	  	<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
	  	<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
	  	<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
	</el-row>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55

3. el-button的使用

• 如图：

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

<el-row>
  <el-button plain>朴素按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button type="success" plain>成功按钮</el-button>
  <el-button type="info" plain>信息按钮</el-button>
  <el-button type="warning" plain>警告按钮</el-button>
  <el-button type="danger" plain>危险按钮</el-button>
</el-row>

<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" round>信息按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
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

以及常用属性：

更多详情前往官网查看。。。

4. 单选框多选框

• 如下图：
  

<template>
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
  </el-checkbox-group>
</template>

<script>
  export default {
    data () {
      return {
        checkList: ['选中且禁用','复选框 A']
      };
    }
  };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

更多属性方法前往官网

5. input textarea number 输入框

• 如图：
  
  

6. 开关switch 日期选择

7. 上传 form表单 添加验证

8. 通知类的 弹框确认类的

9. 图片展示 预览 分割线

10. 压轴的 table page 列表和分页

功能很多后台最最常用的~

具体前往官网查看~

一起进步~