本章节我们介绍ElementUI框架，它是一个纯前端的UI框架，因此可以搭配vue使用。这里，我们使用的ElementUI版本为“2.15.14”，截图如下所示
接下来，我们就引入该文件
<link rel="stylesheet" href="element-ui/2.15.14/theme-chalk/index.min.css">
<script src="element-ui/2.15.14/index.min.js"></script>
注意，这里我们既要引入它的样式文件，也要引入它的js文件。
我们创建一个“09_elementui.html”文件，完整代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="element-ui/2.15.14/theme-chalk/index.min.css">
<script src="vue/2.6.14/vue.min.js"></script>
<script src="element-ui/2.15.14/index.min.js"></script>
</head>
<body>
<div id="app">
<el-button>按钮</el-button>
</div>
<script>new Vue({el: '#app'})</script>
</body>
</html>
在上述代码中，我们需要注意的是，应该先引入vue后再引入element-ui，否则element-ui就没办法正确解析了。因为element-ui是建立在vue基础之上的。接下来，我们使用了“<el-button>按钮</el-button>”标签定义了一个按钮。这个“<el-button>”标签是element-ui框架自定义的，并不是标准的html标签，他会被element-ui“翻译”成<button>标签。
对于element-ui框架的学习并不是很难，大家可以直接去的官方
https://element.eleme.cn/#/zh-CN/component/installation
这里，我们简单介绍一下element-ui使用比较多的标签。
首先，我们介绍element-ui的布局标签<el-row>和<el-col>。通过名称，我们大概知道，它代表了行和列。这两个标签实现的是“横向布局”。我们创建“09_elementui_layout.html”文件，
<style>
.bg1 { background: #ff0000; }
.bg2 { background: #00ff00; }
.bg3 { background: #0000ff; }
.el-col { text-align: center; margin-bottom:10px; }
</style>
<div id="app">
<el-row>
<el-col :span="24"><div class="bg1">全部</div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="bg1">一半</div></el-col>
<el-col :span="12"><div class="bg2">一半</div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="bg1">三分之一</div></el-col>
<el-col :span="8"><div class="bg2">三分之一</div></el-col>
<el-col :span="8"><div class="bg3">三分之一</div></el-col>
</el-row>
</div>
<script>new Vue({el: '#app'})</script>
为了能够凸显我们的页面效果，我们定义了三个背景色，同时我们让<el-col>里面的文字居中。首先，我们使用<el-row>定义一行，然后里面可以包含若干<el-col>列。请注意，<el-col>标签里面有个“:span”属性，它的属性值代表了<el-col>列宽度。element-ui将<el-row>定义成“24”的宽度（块级标签占据一整行的宽度），而“:span”属性就是你想占据“24分之几”的宽度，因此它实际是一个百分比的宽度。因为只有百分比的数值，<el-col>列的宽度才能跟随浏览器窗口的宽度变化而变化，达到“自适应”的目的。我们查看效果吧。
那么，这种“横向布局”本质是如何实现呢？我们点击“一半”的列查看它的样式吧。
我们发现，横向布局是通过浮动定位实现的，宽度则是通过百分比计算实现的。
我们使用了“margin-bottom:10px;”定义了行与行之间的空隙，如何定义列与列的空隙呢？大家可以使用“margin-left:10px;”或者“margin-right:10px;”来实现，但是为了“对齐”，我们需要对最左端或者最右端的<el-col>进行清除外边距的操作，比较麻烦一些。其中，element-ui已经想到这个问题，它可以提供一个“:gutter”属性来定义列间隙，单位就是像素。我们继续增加新的代码来查看吧。
<el-row :gutter="20">
<el-col :span="8"><div class="bg2">左边</div></el-col>
<el-col :span="16"><div class="bg3">右边</div></el-col>
</el-row>
我们设置两列之间间隔20像素，我们回到浏览器查看效果
我们发现，列间距就是通过内边距实现的啊。
我们之间讲解过布局的内容，最终的结论就是推荐大家使用Flex弹性布局。其实element-ui的<el-row>和<el-col>也支持flex弹性布局，代码如下
<el-row type="flex" justify="space-between">
<el-col :span="6"><div class="bg1">flex pace-between</div></el-col>
<el-col :span="6"><div class="bg2">flex pace-between</div></el-col>
<el-col :span="6"><div class="bg3">flex pace-between</div></el-col>
</el-row>
我们只需要设置<el-row>的“type”属性开启flex弹性布局，然后还可以使用“justify”设置对齐方式，这里我们使用的是“space-between”两边对齐方式。
这里需要注意的是，我们三个<el-col>列的总和并不是24，而是18，剩余的空间留给了列空隙。我们大概计算一下，“el-col-6”的宽度大概就是“25%”左右。
关于element-ui布局，还有一个“容器”布局，我们创建“09_elementui_layout2.html”
<style>
.el-header, .el-footer { background-color:#B3C0D1; color:#333; text-align:center; line-height:60px; }
.el-aside { background-color:#D3DCE6; color:#333; text-align:center; line-height:200px; }
.el-main { background-color:#E9EEF3; color:#333; text-align:center; line-height:160px; }
</style>
<div id="app">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
<el-footer>Footer</el-footer>
</el-container>
</div>
<script>new Vue({el: '#app'})</script>
它就是实现了一个快速页面框架搭建的过程。
接下来，我们重点介绍一下表格的使用。
我们创建“09_elementui_table.html”文件，内容如下
<div id="app">
<el-table :data="tableData" stripe border style="width:100%">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column prop="id" label="编号" width="100"></el-table-column>
<el-table-column prop="name" label="姓名" width="200"></el-table-column>
<el-table-column prop="age" label="年龄" width="100"></el-table-column>
<el-table-column prop="born" label="生日"></el-table-column>
<el-table-column label="操作">
<el-button size="mini">编辑</el-button>
<el-button size="mini" type="danger">删除</el-button>
</el-table-column>
</el-table>
</div>
<script>
new Vue({
el: '#app',
data:{
tableData: [
{ id: 1, name: '张三', age: 20, born: '2010-09-01' },
{ id: 2, name: '李四', age: 20, born: '2010-09-01' },
{ id: 3, name: '王五', age: 20, born: '2010-09-01' },
{ id: 4, name: '赵六', age: 20, born: '2010-09-01' }
]}
})
</script>
表格的使用其实就是参考了<table>标签的使用，对应的就是<el-table>标签。该标签的“:data="tableData"”属性用于绑定数据“tableData”，该数据就是一个json数组而已。很明显，<el-table>会循环遍历“tableData”数组中的每一项，对应显示为表格的每一行。那么，这个“<el-table-column>”标签就是用来显示每一行数据的标签。该标签的“prop”属性用来绑定“tableData”数组元素中的属性，也就是id,name,age,born等等。至于后面的“label”则是显示表格的表头部分，相当于<thead>部分。我们简单的几个标签和数据绑定就可以按照“表格”的形式输出一个列表/数组数据了。我们浏览器查看效果吧。
接下来，我们继续介绍表单。我们同样创建一个“09_elementui_form.html”文件。
<div id="app">
<el-form :model="form" label-width="100px" label-position="left">
<el-form-item label="姓名">
<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.gender">
<el-radio label="1">男</el-radio>
<el-radio label="2">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="爱好">
<el-checkbox-group v-model="form.hobby">
<el-checkbox label="1">游泳</el-checkbox>
<el-checkbox label="2">篮球</el-checkbox>
<el-checkbox label="3">跑步</el-checkbox>
<el-checkbox label="4">看书</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="生日">
<el-date-picker type="date" v-model="form.born" placeholder="请选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="城市">
<el-select v-model="form.city" placeholder="请选择城市">
<el-option label="北京" value="1"></el-option>
<el-option label="上海" value="2"></el-option>
<el-option label="广州" value="3"></el-option>
<el-option label="深圳" value="4"></el-option>
</el-select>
</el-form-item>
<el-form-item label="简介">
<el-input type="textarea" v-model="form.brief" placeholder="请输入简介"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
<script>
new Vue({
el: '#app',
data: {
form: {
name: '张三',
gender: '1',
hobby: ['1','3'],
born: '2023-09-01',
city: '2',
brief: ''
}
},
methods: {
onSubmit() {
console.log(this.form);
}
}
})
</script>
对于表单的使用，涉及的标签非常的多。我们首先查看<el-form>这个标签，它虽然类似于html原始的<form>标签，但是两者区分很大。首先，<form>标签就是用来提交数据的；但是<el-form>只是用来做布局的，真正提交数据是使用axios来实现的。我们看到代码中，我们定义了“form”数据，它是一个json对象，里面定义了姓名，性别，爱好，生日等属性。这些属性数据就绑定了<el-form>标签中的每一项<el-form-item>。由于“双向数据绑定”的原因，当我们在表单中修改任何一项的时候，对应的绑定数据就会同步修改。例如，我们填写了姓名一项，那么对应的数据“form.name”就会同步修改。因此，当我们使用axios提交数据的时候，只需要提交“form”数据就行了。这个过程与原始<form>标签的使用完全不同。在<el-form>标签的每一项<el-form-item>中，我们又定义了不同的输入标签。例如，<el-input>就是普通输入框，等效于<input type=”text”>标签；然后使用“v-model”来绑定数据。接下来就是单选框<el-radio>和复选框<el-checkbox>的使用，label就是他们的value值。接下来就是<el-date-picker>时间选择框，点击它后会弹出一个日历框，我们可以选择日期和时间。而“type="date"”则指定我们只使用日期，不使用具体的几点几分。如果需要同时使用日期和时间的话，修改为“type="datetime"”即可。剩下的下拉框<el-select>和文本域<el-input type="textarea">我们就不再详细介绍了。我们还是看页面效果吧。
有时候，我们希望表单内的标签“横向排列”，我们可以通过“:inline="true"”实现，这我们创建新的“09_elementui_form2.html”文件，代码如下
<div id="app">
<el-form :model="form" :inline="true" size="mini">
<el-form-item label="姓名">
<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="城市">
<el-select v-model="form.city" placeholder="请选择城市">
<el-option label="北京" value="1"></el-option>
<el-option label="上海" value="2"></el-option>
<el-option label="广州" value="3"></el-option>
<el-option label="深圳" value="4"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
</el-form>
</div>
<script>
new Vue({
el: '#app',
data: {
form: { name: '', city: '' }
}
})
</script>
我们重点查看“<el-form :model="form" :inline="true" size="mini">”代码即可。我们除了使用“:inline="true"”实现横排之外，还使用了“size="mini"”缩小了表单的整体大小，该值一共三个选项：medium / small / mini。这种横向布局的方式，不适合用于表单的数据录入，可以用于简单的条件查询录入。我们查看页面效果。
最后，我们介绍一下表单验证。我们在使用表单收集用户录入数据的时候，基本上都会对这些数据进行一个验证，通常使用js来完成。比如说，不能为空，只能是数字等等。表单<el-form>在帮助我们对数据验证上提供了很大的帮助，我们创建“09_elementui_form3.html”文件。
<div id="app">
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" label-position="left">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="form.gender">
<el-radio label="1">男</el-radio>
<el-radio label="2">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="爱好" prop="hobby">
<el-checkbox-group v-model="form.hobby">
<el-checkbox label="1">游泳</el-checkbox>
<el-checkbox label="2">篮球</el-checkbox>
<el-checkbox label="3">跑步</el-checkbox>
<el-checkbox label="4">看书</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="生日" prop="born">
<el-date-picker type="date" v-model="form.born" placeholder="请选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="城市" prop="city">
<el-select v-model="form.city" placeholder="请选择城市">
<el-option label="北京" value="1"></el-option>
<el-option label="上海" value="2"></el-option>
<el-option label="广州" value="3"></el-option>
<el-option label="深圳" value="4"></el-option>
</el-select>
</el-form-item>
<el-form-item label="简介" prop="brief">
<el-input type="textarea" v-model="form.brief" placeholder="请输入简介"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
<script>
// 不能选择今天作为生日
var checkBorn = function(rule, value, callback){
var today = new Date();
var year = today.getFullYear();
year = parseInt(year);
var month = today.getDate();
month = parseInt(month);
var day = today.getMonth();
day = parseInt(day);
var born = new Date(value);
var year2 = born.getFullYear();
year2 = parseInt(year2);
var month2 = born.getDate();
month2 = parseInt(month2);
var day2 = born.getMonth();
day2 = parseInt(day2);
if(year == year2 && month == month2 && day == day2){
return callback(new Error('不能选择今天作为生日'));
}else{
callback();
}
};
new Vue({
el: '#app',
data: {
form: {
name: '',
gender: '',
hobby: [],
born: '',
city: '',
brief: ''
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
],
gender: [
{ required: true, message: '请选择性别', trigger: 'blur' }
],
hobby: [
{ type: 'array', required: true, message: '请选择爱好', trigger: 'change' }
],
born: [
{ required: true, message: '请选择日期', trigger: 'blur' },
{ validator: checkBorn, trigger: 'blur' }
],
city: [
{ required: true, message: '请选择城市', trigger: 'blur' }
],
brief: [
{ required: true, message: '请输入简介', trigger: 'blur' }
]
}
},
methods: {
onSubmit: function() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) { alert('ok'); }
else { return false; }
});
}
}
})
</script>
使用<el-form>做表单验证，还是比较简单的。首先，我们需要使用“:rules="rules"”绑定我们的验证规则。其中这个“rules”就是在vue的data属性中定义的，类似于数据的定义。一般情况下，我们基本上都会按照数据进行规则制定。例如，我们有一个“name”数据，那我们就定义一个“name”规则。也就是说，我们的规则是按照表单每一个<el-form-item>项目制定的。因此，我们就会看到，我们的规则使用，也是放置在<el-form-item>标签中“prop="name"”使用。我们回到规则制定上来，每一个表单项目规则都可以指定多个验证方式。例如对于“name”规则，我们就制定了两个验证方式，首先是不能为空，触发条件是“trigger: 'blur'”输入框失去光标焦点的时候；其次我们规则输入的数据长度在2-5个字符之间。而“message: '请输入姓名'”就不用说了，当验证不通过的话，就显示这个警告文本。另外，在“生日”一项中，我们还自定义了一个验证方法，就是checkBorn方法，然后使用“{ validator: checkBorn, trigger: 'blur' }”添加到规则里面去。这个方法实现的验证是，不可以选择“今天”作为生日；如果选择了，就提示“不能选择今天作为生日”的警告文字。
我们首先使用鼠标点击“姓名”一行的输入框，然后再用鼠标点击其他地方，使得这个输入框失去光标焦点，触发“blur”事件。此时，就是使用我们制定的规则进行验证“姓名”。
接下来，我们在录入框中只写入一个“张”字，然后在点击其他地方
接下来，我们“生日”选择框中选择今天，然后再点击其他地方
最后，我们刷新页面，点击“保存”按钮，触发“onSubmit”方法。在这个方法中，我们对表单使用全部验证规则。由于我们刷新页面，数据全部为空，所以所有规则都不通过。
当然，如果我们按照规则填写所有数据，然后再点击“保存”则验证通过。
我们js中验证通过后，就弹出一个“ok”弹框。
本章节先介绍到这里。
本课程的内容可以通过CSDN免费下载：https://download.csdn.net/download/richieandndsc/89025243
扫一扫
3011
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
