Vue ElementUI Axios 前后端案例(day02) 之 ElementUI
ElementUI
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
组件
1.Layout 布局
通过基础的 24 分栏，迅速简便地创建布局。
就是这样分了24个格子
基础布局
使用单一分栏创建基础的栅格布局。
通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。
分栏间隔
分栏之间存在间隔。
Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。
分栏偏移
支持偏移指定的栏数。
通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style>.el-row {margin-bottom: 20px;}.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>
</head><body><div id="app"><el-row :gutter="20"><el-col :span="3"><div class="grid-content bg-purple-dark"></div></el-col><el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="3"><div class="grid-content bg-purple-dark"></div></el-col><el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row><el-col :span="3"><div class="grid-content bg-purple-dark"></div></el-col><el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="3"><div class="grid-content bg-purple-dark"></div></el-col><el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="12" ><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row><el-col :span="3" :offset=2><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row type="flex" class="row-bg" justify="center"><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-row></div><!-- 引入组件库 --><!-- 引入组件库 --><script src="js/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data() {return {visible: false}},})</script>
</body></html>
2.Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- import CSS --><link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
</head><body><div id="app"><el-menu :default-active="active" mode="horizontal"><!-- 加冒号和不加冒号,都是属性，一个属性的属性值是外部传进来的值，data区域的1值(data传入的也就是加冒号)，一个是属性是固定值直接写不加冒号 都是属性--><!-- mode水平菜单 --><el-menu-item index="1">首页</el-menu-item><el-menu-item index="2">新闻</el-menu-item><el-menu-item index="3">论坛</el-menu-item><el-submenu index="4"><template slot="title">常用功能</template><el-menu-item index="4-1">选项1</el-menu-item><el-menu-item index="4-2">选项2</el-menu-item><el-menu-item index="4-3">选项3</el-menu-item><el-submenu index="4-4"><template slot="title">选项4</template><el-menu-item index="4-4-1">选项1</el-menu-item><el-menu-item index="4-4-2">选项2</el-menu-item><el-menu-item index="4-4-3">选项3</el-menu-item></el-submenu></el-submenu></el-menu><el-container><!-- <el-header>顶部</el-header> --><el-aside><el-menu default-active="2"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item></el-menu></el-aside><el-main>Hello element-ui</el-main><!-- <el-footer>底部</el-footer> --></el-container></div><!-- 引入组件库 --><!-- 引入组件库 --><script src="js/vue.js"></script><script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data() {return {active: "1"}},})</script>
</body></html>
3.Table 表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- import CSS --><link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
</head><body><div id="app"><el-table :data="tableData"><el-table-column prop="name" label="栏目名称"></el-table-column><el-table-column prop="desc" label="栏目描述"></el-table-column><el-table-column fixed="right" label="操作"><template slot-scope="scope"><el-button type="primary" size="medium">查看</el-button><el-button type="primary" size="small">编辑</el-button><el-button type="primary" size="mini">编辑</el-button></template></el-table-column></el-table></div><!-- 引入组件库 --><script src="js/vue.js"></script><script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data() {return {tableData: [{name: "新闻",desc: "娱乐新闻",}, {name: "新闻",desc: "体育新闻",}]}},})</script>
</body></html>
4.行内表单
当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- import CSS --><link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
</head><body><div id="app"><el-form :inline="true" :model="searchForm"><el-form-item label="栏目名称"> <el-input placeholder="栏目名称" size="small" v-model="searchForm.name"></el-input></el-form-item><el-form-item ><el-button size="small" @click="search">搜索</el-button></el-form-item></el-form><el-button type="primary" size="small" @click="add">新增</el-button><!-- 这里:data属性 是用来显示数据的 tabledata则绑定值 在每一行中 prop这是这行数据的键 每一个键对应一个值 name:10001，desc:"新闻",name:"娱乐新闻"--><el-table :data="tableData"><el-table-column prop="name" label="栏目名称"></el-table-column><el-table-column prop="desc" label="栏目描述"></el-table-column><el-table-column fixed="right" label="操作"><!-- 可以表示项目名称和项目描述下的那一行数据 --><template slot-scope="rowData"><el-button type="primary" size="small" @click="edit(rowData.row)">编辑</el-button><el-button type="danger" size="small" @click="del(rowData.row.id)">删除</el-button></template></el-table-column></el-table><el-pagination prev-text="上一页"next-text="下一页"@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="current":page-sizes="[10, 20, 30, 40]" :page-size="size" :total="total"layout="total, sizes, prev, pager, next, jumper" ></el-pagination><!-- :visible.sync 表示是否显示对话框 这里面的属性值dialogFormVisible 来控制是否显示对话框--><el-dialog title="新增栏目" :visible.sync="dialogFormVisible" width="30%"><el-form label-position="left" label-width="80px" :model="formData"><el-form-item label="栏目名称"><el-input v-model="formData.name"></el-input></el-form-item><el-form-item label="栏目描述"><el-input v-model="formData.desc"></el-input></el-form-item></el-form><div slot="footer" ><el-button @click="dialogFormVisible = false" size="small">取 消</el-button><el-button type="primary" @click="save" size="small">确 定</el-button></div></el-dialog></div><!-- 引入组件库 --><script src="js/vue.js"></script><script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script><script>let vm=new Vue({el: '#app',data() {return {current: 1,size: 10,total: 35,dialogFormVisible: false,tableData: [{id: 1001,name: "新闻",desc: "娱乐新闻",}, {id:1002,name: "新闻",desc: "体育新闻",}],formData :{id: '',name: '',desc: '',},searchForm :{name: '',}}},methods: {search: function(){},add: function () {this.dialogFormVisible = true;},edit: function(row){// console.log(row);this.dialogFormVisible = true; // this.formData =row;this.formData.name =row.name;this.formData.desc =row.desc;},save: function(){//1.提交到到后台//2.上对话框隐藏this.dialogFormVisible = false;},del: function(id){console.log(id);// 这里是this是vm对象 只是elementui将this对象的功能进行继承一样扩展this.$confirm('确认删除, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({type: 'success',showClose: true,message: '删除成功!',// onClose: function(){// alert()// }});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},//一页显示的数据条数发生改变的时候触发handleSizeChange: function(){console.log("handleSizeChange")},//页码发送改变的时候触发handleCurrentChange: function(){console.log("handleCurrentChange")}},})</script>
</body></html>
5.表单校验
el开头的东西通通为组件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- import CSS --><link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
</head><body><div id="app"><!-- :rules属性用于表单校验 --><!-- 表单是在组件内部，但是method：submit(forName)定义在组件外 所以传进去对应表单名称 这样方法才能找到这个表单 --><el-form :model="formData" :rules="rules" ref="ruleForm" label-position="right" label-width="80px"><!-- 数据校验和prop有关,而不是v-model在标签el-form-item中 --><el-form-item label="活动名称" prop="name"><el-input v-model="formData.name"></el-input></el-form-item><el-form-item label="活动区域" prop="area"><el-select placeholder="请选择活动区域" v-model="formData.area"><el-option label="上海" value="sh"></el-option><el-option label="北京" value="bj"></el-option></el-select></el-form-item><el-form-item label="活动时间" prop="datetime"><el-date-picker type="datetime" placeholder="选择日期" v-model="formData.date" value-format="yyyy-MM-dd" ></el-date-picker> </el-form-item><el-form-item label="即时配送" prop="switch"><el-switch v-model="formData.switch"></el-switch></el-form-item><el-form-item label="活动性质" prop="type"><el-checkbox-group v-model="formData.type"><el-checkbox label="1" >美食/餐厅线上活动</el-checkbox><el-checkbox label="2" >地推活动</el-checkbox><el-checkbox label="3" >线下主题活动</el-checkbox><el-checkbox label="44">单纯品牌曝光</el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源" prop="resource"><el-radio-group v-model="formData.resource"><el-radio label="1">线上品牌商赞助</el-radio><el-radio label="2">线下场地免费</el-radio></el-radio-group></el-form-item><el-form-item label="活动形式" prop="intro"><el-input type="textarea" v-model="formData.intro"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button>重置</el-button></el-form-item> </el-form></div><!-- 引入组件库 --><script src="js/vue.js"></script><script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script><script>let vm=new Vue({el: '#app',data() {return {formData: {name: "papa",area: "",date: '',time: '',// datetime:'',switch: '',type: [],resource:'',intro:''},rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],area: [{ required: true, message: '请选择活动区域', trigger: 'change' }],datetime: [{ type: 'datetime', required: true, message: '请选择日期', trigger: 'change' }],type: [{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }],resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],intro: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]}}},methods: {submitForm(formName) {// console.log(this.$data);//console.log(this.formData);//对表单进行校验 // let _this=this;// this.$refs[formName].validate(function (valid) {// console.log(vm.$data.formData);// if (valid) {// alert('submit!');// } else {// console.log('error submit!!');// return false;// }// });this.$refs[formName].validate((valid) => {console.log(this.formData);//箭头函数中作用域的this还是vm对象自己 而普通函数中 指的是方法调用者。但普通函数这里是windows对象这不用深究没意义});// this.$refs[formName].validate((valid) => {// if (valid) {// alert('submit!');// } else {// console.log('error submit!!');// return false;// }// });},}})</script>
</body></html>
6.axios
axios day03