Vue前端篇(二)引进ElementUI

13 篇文章 1 订阅

首先在IDEA中安装Vue插件:打开Settings...

选择Plugins,输入Vue,点击install下载

打开命令端(使用Yarn命令):输入yarn add element-ui

main.js引入ElementUI

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
  // components: { App },
  // template: '<App/>'
})

测试一下:在component下的HelloWorld中添加个<el-button>按钮

访问http://localhost:8081/#/

 

Vue前端分页功能可以通过Element UI来实现。Element UI是一套基于Vue.js的桌面端组件库,提供了丰富的组件和工具,包括分页组件。 首先,在Vue项目中使用npm安装Element UI: npm install element-ui 然后,在项目的入口文件main.js中引入Element UI的样式和组件: import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 现在,你可以在需要分页的组件中使用Element UI的分页组件了。以下是一个示例: <template> <div> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </template> <script> export default { data() { return { currentPage: 1, // 当前页码 pageSize: 10, // 每页显示的条数 total: 100, // 总记录数 } }, methods: { handleSizeChange(val) { this.pageSize = val this.currentPage = 1 // 当改变每页显示的条数时,重置当前页码为1 // 并重新获取数据 this.getData() }, handleCurrentChange(val) { this.currentPage = val // 当改变当前页码时,重新获取数据 this.getData() }, getData() { // 根据当前页码和每页显示的条数,发送请求获取数据 }, }, } </script> 通过监听分页组件的size-change事件和current-change事件,我们可以获取到用户改变每页显示的条数和当前页码的操作。 当用户改变每页显示的条数时,我们可以将当前页码重置为1,并重新发送请求获取数据。 当用户改变当前页码时,我们重新发送请求获取数据。 在getData方法中,可以根据当前页码和每页显示的条数,发送请求获取相应的数据。最后,将获取到的数据渲染到页面中。 这样,通过使用Element UI的分页组件,我们就可以实现Vue前端的分页功能了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值