ElementUI学习笔记

目录

一、简单介绍

二、安装

1、下载

2、引入

三、布局

1、简介

2、使用

3、好处

四、布局容器

1、常见排布

2、调整样式

五、按钮

1、简单引用

2、改变样式

 3、加载中效果

六、表格

1、简单使用

 2、样式修改

七、对话框

1、简单使用

2、添加自定义内容

3、认识不同写法的区别

---

一、简单介绍

1、提供各种组件的UI，内容，功能现成代码

2、为了快速开发，适合用于开发管理系统端（学生信息管理系统、社区人口管理系统）UI样式

---

二、安装

1、下载

进入项目终端，输入：

npm i element-ui -S

2、引入

在main.js文件中，引入element-ui

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';    //引入
import 'element-ui/lib/theme-chalk/index.css';    //引入Vue.config.productionTip = falseVue.use(ElementUI);    //使用new Vue({router,store,render: h => h(App)
}).$mount('#app')

---

三、布局

1、简介：通过基础的 24 分栏，迅速简便地创建布局【1行24列】

2、使用

（1）分两个12份，两个8份，效果如下

<template><div class="home"><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-row></div>
</template><script>
// @ is an alias to /srcexport default {name: "HomeView",components: {},
};
</script><style lang="scss" scoped>.grid-content {border-radius: 4px;min-height: 36px;}.bg-purple {background: #d3dce6;}.bg-purple-light {background: #e5e9f2;}
</style>

 （2）自定义效果

给每行加上margin: 20px;

<template><div class="home"><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  :gutter="20"><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></div>
</template><script>
// @ is an alias to /srcexport default {name: "HomeView",components: {},
};
</script><style lang="scss" scoped>
.grid-content {border-radius: 4px;min-height: 36px;
}
.bg-purple {background: #d3dce6;
}
.bg-purple-light {background: #e5e9f2;
}
.el-row {// 注意观察文档，确定好选择器，这里是.el-row而不是el-rowmargin: 20px;
}
</style>

第二行加上属性gutter: 20，会自动给该行加padding-left和padding-right各10px

3、好处：响应式，根据网页的大小自动调整容器大小

 

---

四、布局容器

1、常见排布：头部、侧边、中间栏、底部

<template><div class="about"><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container>
</el-container></div>
</template><style lang="scss" scoped>.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>

2、调整样式

实现正好头部，中间，底部充满一个窗口

<template><div class="about"><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container>
</el-container></div>
</template><style lang="scss" scoped>.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;}.el-container{//选择器包括Main，Aside，Footerheight: calc(100vh - 60px);//calc()自动计算，100vh正好浏览器窗口大小，减去60px头部高度}
</style>

---

五、按钮

1、简单引用

<template><div class="about"><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main><!-- 按钮 --><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 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-buttontype="warning"icon="el-icon-star-off"circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></el-row></el-main><el-footer>Footer</el-footer></el-container></el-container></el-container></div>
</template><style lang="scss" scoped>
.el-header,
.el-footer {background-color: #b3c0d1;color: #333;text-align: center;
}.el-aside {background-color: #d3dce6;color: #333;text-align: center;
}.el-main {background-color: #e9eef3;color: #333;text-align: center;
}
.el-container {height: calc(100vh - 60px);
}
</style>

2、改变样式

除去圆形，换掉图标

<el-button type="success" icon="el-icon-s-promotion"></el-button>

 3、加载中效果

 <el-button type="primary" :loading="isClick" @click="btnClick">加载中</el-button>

methods:{btnClick(){this.isClick = truesetTimeout(()=>{this.isClick = false},2000)}},

---

六、表格

1、简单使用

<template><div class="about"><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main>Main<!-- 表格 --><el-table :data="tableData" style="width: 100%"><el-table-column label="日期" width="180"><template slot-scope="scope"><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.date }}</span></template></el-table-column><el-table-column label="姓名" width="180"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>姓名: {{ scope.row.name }}</p><p>住址: {{ scope.row.address }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">{{ scope.row.name }}</el-tag></div></el-popover></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></el-main><el-footer>Footer</el-footer></el-container></el-container></el-container></div>
</template><script>
export default {name: "AboutView",components: {},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]};},methods: {handleEdit(index, row) {console.log(index, row);},handleDelete(index, row) {console.log(index, row);}},
};
</script><style lang="scss" scoped>
.el-header,
.el-footer {background-color: #b3c0d1;color: #333;text-align: center;
}.el-aside {background-color: #d3dce6;color: #333;text-align: center;
}.el-main {background-color: #e9eef3;color: #333;text-align: center;
}
.el-container {height: calc(100vh - 60px);
}
</style>

 2、样式修改

给表格加上斑马纹、纵向边框、数字列

<template><div class="about"><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main>Main<!-- 表格 --><el-table :data="tableData" style="width: 100%" border stripe> <!-- 纵向边框 斑马纹 --><el-table-column type="index" width="50"> </el-table-column> <!-- 数字列 --><el-table-column label="日期" width="180"><template slot-scope="scope"><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.date }}</span></template></el-table-column><el-table-column label="姓名" width="180"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>姓名: {{ scope.row.name }}</p><p>住址: {{ scope.row.address }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">{{ scope.row.name }}</el-tag></div></el-popover></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></el-main><el-footer>Footer</el-footer></el-container></el-container></el-container></div>
</template><script>
export default {name: "AboutView",components: {},data() {return {tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},],};},methods: {handleEdit(index, row) {console.log(index, row);},handleDelete(index, row) {console.log(index, row);},},
};
</script><style lang="scss" scoped>
.el-header,
.el-footer {background-color: #b3c0d1;color: #333;text-align: center;
}.el-aside {background-color: #d3dce6;color: #333;text-align: center;
}.el-main {background-color: #e9eef3;color: #333;text-align: center;
}
.el-container {height: calc(100vh - 60px);
}
</style>

---

七、对话框

1、简单使用

点击表格编辑，弹出对话框

<template><div class="about"><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main>Main<!-- 表格 --><el-table :data="tableData" style="width: 100%" border stripe><el-table-column type="index" width="50"> </el-table-column><el-table-column label="日期" width="180"><template slot-scope="scope"><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.date }}</span></template></el-table-column><el-table-column label="姓名" width="180"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>姓名: {{ scope.row.name }}</p><p>住址: {{ scope.row.address }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">{{ scope.row.name }}</el-tag></div></el-popover></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table><el-dialog title="修改时间" :visible.sync="dialogFormVisible"><el-form:model="numberValidateForm"ref="numberValidateForm"label-width="100px"class="demo-ruleForm"><el-form-itemlabel="时间"prop="age":rules="[{ required: true, message: '时间不能为空' },{ type: 'number', message: '时间必须为数字值' },]"><el-inputv-model.number="numberValidateForm.age"autocomplete="off"></el-input></el-form-item><el-form-item><el-buttontype="primary"@click="submitForm('numberValidateForm')">提交</el-button><el-button @click="resetForm('numberValidateForm')">重置</el-button></el-form-item></el-form></el-dialog></el-main><el-footer>Footer</el-footer></el-container></el-container></el-container></div>
</template><script>
export default {name: "AboutView",components: {},data() {return {tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},],gridData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},],// 弹窗dialogTableVisible: false,dialogFormVisible: false,form: {name: "",region: "",date1: "",date2: "",delivery: false,type: [],resource: "",desc: "",},formLabelWidth: "120px",numberValidateForm: {age: "",},};},methods: {handleEdit(index, row) {console.log(index, row);this.dialogFormVisible = true;},handleDelete(index, row) {console.log(index, row);},// 表单submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert("submit!");} else {console.log("error submit!!");return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},},
};
</script><style lang="scss" scoped>
.el-header,
.el-footer {background-color: #b3c0d1;color: #333;text-align: center;
}.el-aside {background-color: #d3dce6;color: #333;text-align: center;
}.el-main {background-color: #e9eef3;color: #333;text-align: center;
}
.el-container {height: calc(100vh - 60px);
}
</style>

2、添加自定义内容

添加单选框到对话框中，注意标签需要添加的属性及变量存储要放在对话框中

<el-form-item label="性别" prop="radio" :rules="[{ required: true, message: '性别不能为空' }]"><el-radio v-model="numberValidateForm.radio" label="1">男</el-radio><el-radio v-model="numberValidateForm.radio" label="2">女</el-radio>
</el-form-item>

numberValidateForm: {age: "",radio: "",//属性值绑定到对话框中
},

3、认识不同写法的区别

<el-table-column prop="name" label="姓名" width="180" /><el-table-column label="姓名" width="180"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>姓名: {{ scope.row.name }}</p><p>住址: {{ scope.row.address }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">{{ scope.row.name }}</el-tag></div></el-popover></template>
</el-table-column>

（1）popover弹出框

（2）template上的属性slot-scope="scope"是作用域插槽，关于作用域插槽详细学习，小伙伴们可以参考小编下面这篇文章Vue基础语法（五）_申小兮IU的博客-CSDN博客插槽的基础使用，具名插槽，作用域插槽，子组件向父组件通信总结https://blog.csdn.net/qq_51478745/article/details/127650324