vue加element组件使用总结

尤雨溪开发的vue现在使用的越来越广泛了，归根结底vue是一种轻量级的框架，比angular要这种繁杂的框架要轻小，比jQuery这种框架要有双向绑定即时更新等优点，总的来说vue才是现在的潮流，与vue最为匹配的UI就是element了

element的官网

https://element.eleme.cn/#/zh-CN

element的安装

官网推荐使用npm安装，所以只需在项目命令台上运行命令：npm i element-ui -S即可安装

element的UI组件使用

1. 关于布局，layout布局：官网推荐的是layout布局通过el-row和el-col以及span通过基础的24分栏来进行布局
   但是在项目中，一般不用element官网的组件，而是用bootstrap来进行12列的栅栏 布局

2. 关于布局容器，container布局容器：一般会在初始登录展示的页面用:外层容器：顶部容器、侧边栏容器、、底部容器来进行首页布局展示

3. 关于图表，icon图标：一般是用在登录展示的首页的图标，比如：
   因为展示的菜单menu我们应该是灵活增加的，所以在数据库的菜单表，增加一个icon的字段，通过页面获取来循环对号展示
   

4. 关于按钮，Button按钮：一般将新增、修改、删除等的按钮用不同类型的button按钮来区分，比如用type=“success”类型的按钮来表示增加按钮

5. 关于文字链接，link文字链接：官方用来进行文字链接跳转到href路径上
   但是如果要超链接跳转到方法上，要用标签来实现

6. 关于单选，radio单选：一般用来选择列如男女等单选的选择，用标签来应用，用v-model来绑定数据，用lable来绑定数据

7. 关于多选框，checkbox多选框：一般用来选择列如爱好等多选的选择，用标签来应用，用v-model来绑定数据，用lable来绑定展示名称，一般绑定的v-model都是数组

8. 关于输入框，input输入框：一般用来输入比如说明等的输入数据，用标签来应用，用v-model来绑定数据，
   同jQuery等一样用placeholder来显示默认说明，disable是禁用，readonly表示只读，clearable表示可清除的属性，type=“textarea”和：rows=“2”来表示文本域，如果要限制成数字框只能输入数字可以加上οninput=“value=value.replace(/[^\d]/g,’’)”

9. 关于选择框，select选择框：一般用来选择比如部门等的下拉数据，用和标签来应用，用v-model来绑定数据，v-model的值是的value，用v-for来循环获取集合的数据用来展示和获取值，：key相当于主键标识，：lable是用来显示的值，：value是用来传的值，绑定到v-model上，可以用multiple来表示多选，但是如果多选，v-model绑定的值就得是数组了，clearable是清空选择框
   

10. 关于日历盒，timePicker时间选择器、datePicker日期选择器、dateTimePicker时间日期选择器：一般用来选择比如开始日期和结束日期等日期区间或单个日期选择的，用、标签来应用，用type=“date”或“datetime”来表示要展示的是日期还是日期时间，用：picker-options来显示你想要展示的日期区间，用v-model来绑定数据

11. 关于文件上传，upload文件上传：一般用来上传比如excel文件，用标签来应用，用limit来限制上传文件个数，on-exceed来定义超出限制时的行为，用action来表示上传的地址，multiple来表示多选文件，data表示附带的参数，show-file-list来表示是否显示上传文件列表，drop表示是否拖拽文件上传，on-remove、on-success、on-change表示文件移除、文件上传成功、文件状态改变时调用的方法、disable表示禁用
    如果在前台处理文件的话，可以调用on-change的方法，当然还是不推荐在前台做任何逻辑处理
    这里的this.xlsxJson就是获取的文件的内容了，包含多个sheet，但是我们一般不能在前端处理文件，因为不安全，所以要把文件传到后台处理，可以在后台用poi来进行处理

12. 关于表单，Form表单：一般像jQuery一样，由输入框、选择器、单选框、多选框等控件组成，就是用来进行form表单验证和提交的，一般用、标签来应用，可以用lable-position的top、right、left来表示lable的对齐方式，可以用：rules=“rules”来进行表单验证，表单验证的格式一般为rules：{ name：[{required:true,message:’必填的信息’，trigger：‘blur’}]}，
    但是有的时候我们也需要自定义验证，列如：var validatePass = (rule, value, callback) => {if (value === ‘’) { callback(new Error(‘请输入密码’)); } else { callback(); }}，
    但是有的时候我们也会碰到一些例外情况：比如在一个页面里，点击某个下拉选单，该页面中的某些字段展示，再点击另一个下拉值，这些字段就隐藏，并展示出另外一些数据，而展示的数据就需要必填验证，这时候就需要：：rules=“this.model==true?FormRules.abnormal:[{required:true,message:’必填的信息’，trigger：‘blur’}]”来根据条件控制是否验证了
    
    
    
    

13. 关于表格，table表格：一般用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作，用和标签来应用，：data来接受数据（应该是数组集合），prop来展示数据的字段，可以用来对table表的数据进行操作，比如用过滤器过滤展示，或者向table表格里加上输入框、下拉框等，用：header-cell-style、：cell-style来改变表头或某个单元格背景色，table标签的背景色只能通过方法改变，不能通过css样式，可以通过：span-method来将table单元格相同的字段合并
    
    
    
    
    

14. 关于树形控件，tree树形控件：一般用于展示列如组织的树形结构组织，用清晰的层级结构展示信息，可展开或折叠，
    用标签来应用，：data来接受数据（应该是数组集合），show-checkbox来表示节点是否被选择，default-expand-all来表示是否默认展开所以节点，node-key是整棵树唯一的标识，current-node-key当前选中的节点，default-checked-keys默认勾选的节点的 key 的数组，highlight-current是否高亮当前选中节点，默认值是 false，props是要设置的参数，需要注意的是data数组接受的数据结构最好在后台传来便是树形结构，this.$refs.tree.getCheckedNodes()来接受树形菜单选中的值，可以将值传到父组件或子组件中
    
    
    

15. 关于消息提示，message消息提示：一般用来弹出提示信息，比如新增成功之后，弹出提示信息，一般用this.$message(‘这是一条消息提示’);可以用type=‘success’或‘warning’等来改变弹出信息的类型

16. 关于对话框，Dialog 对话框：在当前页面的基础上再弹出一个对话框，一般用于，点击新增，跳转到新增对话框，可以用路由，也可以对话框，@closed表示点击对话框的叉号所触发的方法

17. 关于卡片，card卡片： 一般用于将某些内容外部添加一圈线来区分标识，就像在卡片上一样，用标签来应用可以用slot的header和body来区分头部和主体部分，用shadow来表示是否加上阴影

vue路由

vue是组件关系，所以vue的跳转需要配置路由来进行跳转

//路由配置
 {
                path: '/app/adminAssessgrade',
                name: 'app.system.adminAssessgrade',
                component: () => import('@/views/system/adminAssessgrade/AdminAssessgradeList'),
            },
 //路由跳转并且携带参数
 this.$router.push({name:"app.system.adminAssessgradeProcess",params:{id:id}})
 //被跳转的页面接受参数
 this.$route.params.id