2021-11-21 vue笔记-PC端框架:Element-UI组件库(二) element-ui常用组件的介绍和使用

Element-UI组件详解：布局与表单组件

原创

已于 2023-02-03 11:49:53 修改 · 974 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节 #vue #element-ui #组件库

于 2021-11-21 21:09:30 首次发布

本文是关于Vue.js框架中Element-UI的深入笔记，主要介绍了基本组件中的Layout布局和Container容器，详细讲解了不同类型的布局结构及示例。此外，还探讨了表单组件，如Form、Input、Radio、Checkbox等，并展示了如何通过rules属性进行表单验证。

文章目录

零.回顾

2021-07-09 vue笔记-PC端框架:Element-UI组件库(一) element-ui介绍安装和使用

一.基本组件

0.有哪些基本组件?

layout布局
container布局容器
border边框
icon图标
button图标
…

1.layout布局:通过基础的 24 分栏，迅速简便地创建布局

有哪些布局?

基础布局:使用单一分栏创建基础的栅格布局
分栏间隔:分栏之间存在间隔
混合布局:通过基础的1/24分栏任意扩展组合形成较为复杂的混合布局
分栏偏移:支持偏移指定的栏数
对齐方式:通过flex布局对分栏进行灵活的对齐

其他示例和效果查看官网:https://element.eleme.cn/#/zh-CN/component/layout

示例:使用row组件和col组件+span进行基础布局

home.vue

<template>
  <div>
	  <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>