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份，效果如下
（2）自定义效果
给每行加上margin: 20px;
第二行加上属性gutter: 20，会自动给该行加padding-left和padding-right各10px
3、好处：响应式，根据网页的大小自动调整容器大小
四、布局容器
1、常见排布：头部、侧边、中间栏、底部
Header Aside Main Footer 2、调整样式
实现正好头部，中间，底部充满一个窗口
Header Aside Main Footer 
五、按钮
1、简单引用
Header Aside 默认按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 Footer 
2、改变样式
除去圆形，换掉图标
3、加载中效果
加载中 methods:{btnClick(){this.isClick = truesetTimeout(()=>{this.isClick = false},2000)}},
六、表格
1、简单使用
Header Aside Main{{ scope.row.date }} 姓名: {{ scope.row.name }}
住址: {{ scope.row.address }}
{{ scope.row.name }} 编辑删除 Footer 
2、样式修改
给表格加上斑马纹、纵向边框、数字列
Header Aside Main {{ scope.row.date }} 姓名: {{ scope.row.name }}
住址: {{ scope.row.address }}
{{ scope.row.name }} 编辑删除 Footer 
七、对话框
1、简单使用
点击表格编辑，弹出对话框
Header Aside Main {{ scope.row.date }} 姓名: {{ scope.row.name }}
住址: {{ scope.row.address }}
{{ scope.row.name }} 编辑删除 提交重置 Footer 
2、添加自定义内容
添加单选框到对话框中，注意标签需要添加的属性及变量存储要放在对话框中
男 女
numberValidateForm: {age: "",radio: "",//属性值绑定到对话框中
},
3、认识不同写法的区别
姓名: {{ scope.row.name }}
住址: {{ scope.row.address }}
{{ scope.row.name }} 
（1）popover弹出框
（2）template上的属性slot-scope="scope"是作用域插槽，关于作用域插槽详细学习，小伙伴们可以参考小编下面这篇文章Vue基础语法（五）_申小兮IU的博客-CSDN博客插槽的基础使用，具名插槽，作用域插槽，子组件向父组件通信总结https://blog.csdn.net/qq_51478745/article/details/127650324