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>
最终显示:
当然呢表格里的参数,具体需要传递什么样的,什么类型的参数可以去Element官方文档里去查找,当然样式也有多种,根据需要可以选择不同类型的组件,按需要去选择
上一篇: Optional联合Stream使用——集合判空或取值
下一篇: Photoshop 制作水裙效果