Vue-Element-UI简单项目完善动态树+数据表格+分页
一、动态菜单实现
我相信经过上次做的东西,我想大家都很熟练了。还是老样子,先启动项目,前端的项目进入到你自己的路径再cmd npm run dev
先跑起来,后端的项目也跑起来。注意:端口号要不一样哦。
1.首先测试后端数据是否能拿到
- 启动我们后端项目
- 然后找到对应的接口复制到浏览器上面
- OK,我们已经拿到了后台接口的数据
为啥我的json这么好看,下载一个插件叫json formatter,具体咋下,魔法。
2.修改前端的代码
- 首先把我们之前测试前端动态数据的mockjs注释掉,不然访问不了后台
我们先点击登录看一下返回的是什么数据,然后根据数据名修改我们的Login.vue
-修改Login.vue
现在去登录试试,已经成功跳转
现在我们需要将左侧的导航改为动态的导航,修改LeftNav.vue代码
复制一份代码过来,并注释掉之前的
<el-submenu index="" key="">
<template slot="title">
<i class=""></i>
<span></span>
</template>
<el-menu-item index="" key="">
<i class=""></i>
<span></span>
</el-menu-item>
</el-submenu>
配置一下后台的接口到action.js
回到LeftNav.vue这个文件
修改Left.vue的代码
最终效果,这样,我们导航栏的动态加载基本完成。
3.vue+element的el-menu组件实现路由跳转及当前项的设置
注1:要实现路由跳转,先要在el-menu
标签上添加router属性,然后只要在每个el-menu-item
标签内的index属性设置一下url即可实现点击el-menu-item
实现路由跳转。
注2:导航当前项,在el-menu
标签中绑定 :default-active="
r
o
u
t
e
.
p
a
t
h
"
,注意是绑定属性,不要忘了加“
:
”,当
route.path",注意是绑定属性,不要忘了加“:”,当
route.path",注意是绑定属性,不要忘了加“:”,当route.path等于el-menu-item
标签中的index属性值时则该item为当前项。
注3:el-submenu标签中的url属性不能为空,且不能相同,否则会导致多个节点收缩/折叠效果相同的问题。
router :default-active="$route.path"
新建一个book文件夹,在book文件夹中创建两个组件,一个BookList.vue,另一个为AddBook.vue
配置路由
ps:别忘了让他们显示出来啊
最终效果,点击哪个切换哪个
二、书籍表格展示
修改BookList.vue方法
<template>
<div style="padding: 20px;">
<!-- 搜索栏 -->
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="书籍名称">
<el-input v-model="bookname" placeholder="书籍名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="id" label="编号" width="180">
</el-table-column>
<el-table-column prop="bookname" label="书籍名称" width="180">
</el-table-column>
<el-table-column prop="price" label="价格">
</el-table-column>
<el-table-column prop="booktype" label="书籍类别">
</el-table-column>
</el-table>
<!-- 分页条 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
:page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
bookname: '',
tableData: [],
page: 1,
rows: 10,
total: 0
}
},
methods: {
query(params){
//通用查询方法
let url = this.axios.urls.BOOK_LIST;
this.axios.get(url, {
params: params
}).then(resp => {
console.log(resp);
this.tableData = resp.data.rows;
this.total = resp.data.total;
}).catch(err => {
})
},
onSubmit() {
//搜索方法
let params = {
bookname: this.bookname
}
this.query(params);
},
handleSizeChange(r) {
console.log("当前展示的记录数为" + r + "条")
let params = {
bookname: this.bookname,
rows:r,
page:this.page
}
this.query(params)
},
handleCurrentChange(p) {
console.log("当前展示的页码是第" + p + "页")
let params = {
bookname: this.bookname,
page:p,
rows:this.rows
}
this.query(params)
}
}
}
</script>
<style>
</style>
这样今天的基本功能完成了。