欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ElementUI的使用

程序员文章站 2022-06-07 22:46:25
...

使用Vue搭建项目的时候,我们会用到一些组件,当然呢一个小的项目的开发不必去浪费太多时间在封装组件上,我们可以去使用现成的组件,去使用已经造好的*

这里推荐一个组件库Element,一套基于vue2.0开发的为程序开发者准备的组件库

1 安装

推荐使用npm安装,这样可以很好的配合webpack打包工具使用

npm i element-ui -S

2 引入

在项目的main.js 文件里加入

import ElementUI from 'element-ui'

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

import App from './App'

Vue.**use**(ElementUI)

new **Vue**({

 el: '#app',

 router,

 store,

 **render**: **h** => **h**(App)

})

3 简单上手使用

以获取后台数据为例,以表格的形式展现,这里已经将Element下载好,并且引入

<tempate>    
<div class="content">    
<el-table :data="tableData" style="width: 100%"> 
<el-table-column
    type="index"
    width="55"
    label="序号">
</el-table-column>     
<el-table-column        
    prop="id"        
    label="栏目编号"        
    width="180">      
</el-table-column>    
<el-table-column        
    prop="name"        
    label="名称"        
    width="180">      
</el-table-column> 
</div>
</tempate>
<script> 
<!--导入-->     
import request from"@/request" 
<!--使用get方法获取数据-->     
exprot default 
    {     
        data(){         
            return{             
                params:
                    {                 
                        page:1,                 
                        pageSize:5             
                    },             
                    tableData:{}         
                  }     
              },     
        methods:{         
            pageQueryfindAll(){             
                request.get('/findAll/pageQuery',{                 
                params: this.params;             
                }).then((res) => {                 
                    this.tableData = res.data             
                    })         
                }         
            },      
        created(){          
            this.pageQueryfindAll(); //查询所有      
            }   
    }
</script>

最终显示:

ElementUI的使用

 当然呢表格里的参数,具体需要传递什么样的,什么类型的参数可以去Element官方文档里去查找,当然样式也有多种,根据需要可以选择不同类型的组件,按需要去选择

官方文档:https://element.eleme.io/#/zh-CN/component/quickstart