Element UI学习

记录跟着青戈学毕设，一切来源于B站up主 @程序员青戈

文章目录

一、下载与安装

Element UI官网 https://element.eleme.cn/#/zh-CN

npm安装

npm i element-ui -S

安装若是很慢就用镜像，我是直接就成功了。
如下图就安装成功

二、使用

1.引入 Element

在main.js中写入以下内容

import ElementUI from'element-ui';import'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI,{size:'small'});//small指的是小尺寸，官方提供了3种尺寸small，mini，默认，通常用small

插入位置如下

2.创建新页面

在router文件中新增路由指向新增页面

{path:'/element',name:'Element',component:()=>import('../views/Element.vue')}

1.点击运行
2.得到url，点击链接
3.输入 /新增页面名称

三、组件

官网有丰富且完备的组件说明

• 布局：分为24栏，可以十分方便的设置布局 <el-row> 行 <el-col> 列 row 行组件 提供 gutter属性来指定每一栏之间的间隔，默认间隔为 0。 col 列组件 通过 span 属性来指定列占多少栏
• 按钮：<el-button> 提供有多个样式可以直接使用 使用type、plain、round和circle属性来定义 Button 的样式。type 有 primary、success、info、warning、danger -
• 表单：（表单组件必须有v-model属性）el-input 搜索框、el-autocomplete 带搜索建议的搜索框（可以用作搜索联想）、el-select 下拉框 搭配el-option 使用，filterable 下拉框可搜索属性、el-radio单选框 搭配el-radio-group 使用、el-checkbox 复选框 搭配el-checkbox-group 使用el-date-picker 日期时间选择器
• 表格 当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名，可以使用width属性来定义列宽，stripe属性可以创建带斑马纹的表格，border属性设置边框

代码如下：

<template><div><el-rowstyle="margin: 20px">--------------------布局--------------------</el-row><el-row:gutter="10"><el-col:span="12"><divstyle="width: 100%;height: 100px;background-color: aqua"></div></el-col><el-col:span="6"><divstyle="width: 100%;height: 100px;background-color: red"></div></el-col><el-col:span="3"><divstyle="width: 100%;height: 100px;background-color: pink"></div></el-col><el-col:span="3"><divstyle="width: 100%;height: 100px;background-color: green"></div></el-col></el-row><el-row><el-col:span="6"><divstyle="border: 1px solid #ccc;padding: 10px;text-align: center"><imgstyle="width: 50%"src="@/assets/logo.png"><div>这是Vue的logo</div><divstyle="color: red">价格 ￥99.99</div></div></el-col><el-col:span="6"><divstyle="border: 1px solid #ccc;padding: 10px;text-align: center"><imgstyle="width: 50%"src="@/assets/logo.png"><div>这是Vue的logo</div><divstyle="color: red">价格 ￥99.99</div></div></el-col><el-col:span="6"><divstyle="border: 1px solid #ccc;padding: 10px;text-align: center"><imgstyle="width: 50%"src="@/assets/logo.png"><div>这是Vue的logo</div><divstyle="color: red">价格 ￥99.99</div></div></el-col><el-col:span="6"><divstyle="border: 1px solid #ccc;padding: 10px;text-align: center"><imgstyle="width: 50%"src="@/assets/logo.png"><div>这是Vue的logo</div><divstyle="color: red">价格 ￥99.99</div></div></el-col></el-row><el-rowstyle="margin: 20px">--------------------按钮--------------------</el-row><el-row><el-col:span="24"><button>按钮</button></el-col><el-button>默认按钮</el-button><el-buttontype="primary">主要按钮</el-button><el-buttontype="success">成功按钮</el-button><el-buttontype="info">信息按钮</el-button><el-buttontype="warning">警告按钮</el-button><el-buttontype="danger">危险按钮</el-button><el-buttonplain>朴素按钮</el-button><el-buttontype="primary"plain>主要按钮</el-button><el-buttontype="success"plain>成功按钮</el-button><el-buttonround>圆角按钮</el-button><el-buttontype="primary"round>主要按钮</el-button><el-buttonicon="el-icon-search"circle></el-button><el-buttontype="primary"icon="el-icon-edit"circle></el-button><el-buttontype="success"icon="el-icon-check"circle></el-button></el-row><el-rowstyle="margin: 20px">--------------------表单--------------------</el-row><!--        表单组件必须有v-model属性--><!--input--><el-row><el-col><el-inputstyle="width: 200px"v-model="value"placeholder="请输入内容"></el-input><!--输入框强制要求必须有v-model属性--><el-inputtype="textarea"style="width: 200px"v-model="value1"placeholder="多行文本"></el-input><el-inputshow-passwordstyle="width: 200px"v-model="password"placeholder="请输入密码"></el-input><el-inputstyle="width: 200px"v-model="value2"placeholder="请输入用户名"prefix-icon="el-icon-user"></el-input><el-inputclearablestyle="width: 200px"v-model="value3"placeholder="请输入内容"suffix-icon="el-icon-search"></el-input></el-col></el-row><!--带搜索建议的输入框--><el-row><el-col><el-autocompletestyle="width: 300px"placeholder="我是带建议的搜索框":fetch-suggestions="querySearch":trigger-on-focus="false"v-model="value4"></el-autocomplete></el-col></el-row><!--下拉框--><el-row><el-selectv-model="select"@change="changeSelect"multiple><!--下拉框value值改变时触发changeSelect函数--><!--multiple多选 会将select变为数组--><el-optionvalue="香蕉"></el-option><el-optionvalue="苹果"></el-option><el-optionvalue="梨"></el-option></el-select><el-selectv-model="fruit"@change="changeFruits"><!--下拉框value值改变时触发changeSelect函数--><el-optionv-for="item in fruits":key="item.id":label="item.name":value="item.name"></el-option><!--v-for通常搭配:key绑定唯一标识--></el-select><el-selectv-model="user"@change="changeUser"><!--界面显示label后台传入value--><el-optionv-for="item in users":key="item.card":label="item.name":value="item.card"></el-option><!--v-for通常搭配:key绑定唯一标识--></el-select><!-- filterable 下拉框可搜索属性--><el-selectv-model="option"filterableplaceholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-row><!--单选框--><el-row><el-radio-groupv-model="radio"@change="selectRadio"><el-radiolabel="男"></el-radio><el-radiolabel="女"></el-radio></el-radio-group></el-row><!--多选框--><el-row><el-checkbox-groupv-model="checkList"@change="selectCheckBox"><el-checkboxlabel="复选框 A"></el-checkbox><el-checkboxlabel="复选框 B"></el-checkbox></el-checkbox-group></el-row><!--日期时间选择器--><el-row><!--value-format初始化格式 年月日 时分秒--><el-date-pickerv-model="date"type="date"placeholder="选择日期"value-format="yyyy-MM-dd"@change="changeDate"></el-date-picker><el-date-pickerv-model="datetime"type="datetime"placeholder="选择日期时间"value-format="yyyy-MM-dd HH:mm:ss"@change="changeDatetime"></el-date-picker><el-date-pickerv-model="daterange"type="daterange"start-placeholder="开始日期"end-placeholder="结束日期"value-format="yyyy-MM-dd"@change="changeDateRange"></el-date-picker></el-row><!--表格--><el-rowstyle="margin: 20px 0"><el-table:data="tableData"border:header-cell-style="{backgroundColor:'aliceblue',fontSize:'16px'}"><el-table-columnlabel="序号"prop="id"></el-table-column><el-table-columnlabel="姓名"prop="name"></el-table-column><el-table-columnlabel="地址"prop="address"></el-table-column><el-table-columnlabel="年龄"prop="age"></el-table-column><el-table-columnlabel="操作"><templatev-slot="scope"><el-buttontype="primary"@click="edit(scope.row)">编辑</el-button></template></el-table-column></el-table></el-row></div></template><script>exportdefault{name:'Element',data(){return{value:'',value1:'',value2:'',value3:'',value4:'',password:'',coffees:[{value:'1星巴克咖啡'},{value:'1栖巢咖啡'},{value:'2瑞幸咖啡'},{value:'3库迪咖啡'}],//autocomplete中value是必填值select:'',fruit:'',fruits:[{name:'香蕉',id:1},{name:'苹果',id:2},{name:'梨',id:3},{name:'Vue',id:4}],user:'',users:[{name:'张三',card:10010},{name:'李四',card:10086},{name:'王五',card:10011}],option:'',options:[{value:'选项1',label:'黄金糕'},{value:'选项2',label:'双皮奶'},{value:'选项3',label:'蚵仔煎'},{value:'选项4',label:'龙须面'},{value:'选项5',label:'北京烤鸭'}],radio:'',checkList:[],date:'',datetime:'',daterange:'',tableData:[{name:'张三',address:'北京天安门',id:1,age:'31'},{name:'李四',address:'珠海',id:2,age:'22'},{name:'王五',address:'黄山',id:3,age:'23'}]}},methods:{querySearch(query, cb){// callbacklet result =  query ?this.coffees.filter(v=> v.value.includes(query)):this.coffees
                console.log(result)cb(result);},changeSelect(){
                console.log(this.select)},changeFruits(){
                console.log(this.fruit)},changeUser(){
                console.log(this.user)},selectRadio(){alert(this.radio)},selectCheckBox(){
                console.log(this.checkList)},changeDate(){
                console.log(this.date)},changeDatetime(){
                console.log(this.datetime)},changeDateRange(){
                console.log(this.daterange)},edit(row){// alert(row.name)// this.$message.success(row.name)     //上弹窗// this.$message.warning(row.name)// this.$notify.success(row.name)   //右弹窗// this.$message.warning(row.name)this.$confirm('这是一个弹窗','提示',{type:'warning'}).then(res=>{this.$message.success("我点了确认")}).catch(()=>{this.$message.warning("我点了取消")})}}}</script>