Vue脚手架-分页(完整版)-后端

最新推荐文章于 2023-12-18 22:20:46 发布

浩瀚无疆~

最新推荐文章于 2023-12-18 22:20:46 发布

阅读量137

点赞数 1

文章标签： javascript java vue spring boot

本文链接：https://blog.csdn.net/m0_73535798/article/details/130165176

版权

本文介绍了如何在Vue项目中结合Element UI实现分页功能，包括Vue的创建、Element UI和Axios的导入，以及分页组件的配置和后端接口对接。在后端，通过Spring Boot处理分页请求，允许跨域访问。详细代码示例展示了分页的完整实现过程。

摘要由CSDN通过智能技术生成

好东西不用你去记，它自会留下很深的印象.

一、Vue的创建

1.前提是已经装好以下软件,我上一篇关于Vue入门中有写

一、Vue的创建

1.前提是已经装好以下软件,我上一篇关于Vue入门中有写

2.完成以下配置

一:
element导入-v3
npm install element-plus --save
element导入-v2
npm i element-ui -S
axios导入
npm install axios

在这里输入,Vue会自动下载

二:
main.js,,完整导入
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app')

包的导入要一一对应

三:用做组件切换
<button v-on:click="componentsName='Table1'">Table1</button>
<button v-on:click="componentsName='Table2'">Table2</button>
<component v-bind:is="componentsName"></component>//一定要绑定componentsName,,才可以动态引入组件
如下:

<template>
  <div id="app">
    <button v-on:click="componentsName='TableOne'">TableOne</button>
    <button v-on:click="componentsName='TableTwo'">TableTwo</button>
    <component v-bind:is="componentsName"></component>
  </div>
</template>

<script>
import TableOne from "@/components/TableOne";
import TableTwo from "@/components/TableTwo";

export default {
  name: 'App',
  components: {
    TableOne,
    TableTwo
  }, data() {
    return {
      componentsName: "TableOne"
    }
  }
}
</script>