Vue组件库 (一)：Element常用组件

Element基于Vue2.0的桌面端组件库

组件：组成网页的部件。例如超链接、图片、按钮等。

一、环境配置

1、下载element

在vscode工程终端下下载。一定要注意：是在工程下安装！

npm install element [email protected]

出现以下问题：

经判断可能为npm版本(9.6.7)太高原因，使用如下命令即可解决

npm install --legacy-peer-deps element-ui --save

在 node_modules文件下会增加element-ui文件，此时安装成功

2、引入ElementUI组件库

在入口文件中引用 main.js中

import Element form 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3、访问官网、复制组件代码，调整

在main.js入口文件引用完成后，在views文件夹下创建文件element用来存放element组件，其中App.vue为根组件。在element文件夹下新建ElementView.vue文件。

在前端服务开启后，默认的展示根组件的内容即App.vue。

在App.vue根组件下引用ElementView.vue文件如下操作：

直接下App.vue根组件下输入，vscode将自动导入elementview.vue的组件

 以下组件的测试均在ElementView.vue中进行

二、Table组件 

直接复制element官网上代码即可

 

 三、分页组件

Pagination分页：当数据量过多时，使用分页分解数据。

• layout组件布局，子组件名用逗号分隔
• background 是否为分页按钮添加背景色

layout可选值：'prev, pager, next, jumper, sizes, total'

 

 

 在标签中添加该两个事件：

 size-change事件函数名为handleSizeChange

 current-change事件函数名为handleCurrentChange

在vue中添加事件：

两个函数之间要用“,”隔开，参数为val，即修改后的值

 methods: {
    handleSizeChange:function(val){
        alert("每页记录数变化"+val);
    },

    handleCurrentChange:function(val){
        alert("页码数变化"+val);

    }   
  }

 改变每页记录10--->20

 改变页码数

 

四、对话框组件

保留当前页面信息，弹出一个对话框。

    
    打开嵌套表格的 Dialog
 
      
        
        
        
      
    

js部分 

在html中：:data="gridData"定义了数据的来源，即来自于vue对象的数据模型，名称为gridData。

visible.sync="dialogTableVisible"，visible.sync该属性用来控制是否对表格展示，其属性值为

dialogTableVisible，当dialogTableVisible = true时显示，否则隐藏。

在vue对象中dialogTableVisible的值默认为隐藏(false)，当被点击后，值变为true。即如下代码：；

 打开嵌套表格的 Dialog

五、表单组件

Form表单：由输入框、选择器、单选框、多选框等控件组成，用于收集、校验、提交数据。

使用对话框形式弹出form表单

1、创建form表单的对话框

默认不显示form表单，只有在点击后才会显示

  
    打开Form的 Dialog

    

2、创建form表单

 
        
          
        
        
          
            
            
          
        
        
          
            
          
          -
          
            
          
        
        
          立即创建
          取消
        
      

 el-form-item创建表单项目，并且属性使用v-model绑定数据--->vue->data->form

3、创建form表单的数据模型，并添加onSumbit方法

当提交表单后，显示输入的内容，注意：此时不能直接打印this.form因为它只是个对象，需将其转换为字符串再输出，即使用JSON.stringify方法。

JSON.stringify(this.form)