09 动态树+数据表格+分页+增删改

前言
这篇文章是继上一篇文章的增删改查功能的实现

一.动态树

效果图

我们将在上一次课中的LeftAside.vue中完成动态树的实现

主要代码在Element官网 NavMenu 导航菜单中的侧栏

具体代码如下

LeftAside.vue

<template><el-menu router :default-active="$route.path" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff"active-text-color="#ffd04b" :collapse="collapsed"><!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> --><div class="logobox"><img class="logoimg" src="../assets/img/logo.png" alt=""></div><!-- 第一级节点el-submenu中的属性含义:index:用于菜单折叠，唯一key:唯一第二级节点el-menu-item中的属性含义：index:用于页面跳转，唯一key:唯一 --><el-submenu v-for="root in treenode" :index="'index-'+root.id" :key="'key-'+root.id"><template slot="title"><i :class="root.icon"></i><span>{{root.text}}</span></template><!-- this.$router.push --><el-menu-item v-for="node in root.children":index="node.url":key="'key-'+node.id"><i :class="node.icon"></i><span slot="title">{{node.text}}</span></el-menu-item></el-submenu><!-- <el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item> --></el-menu>
</template>
<script>export default {neme: 'LeftAside',props: ['collapsed'],data: function() {return {treenode:[]}},methods: {},created: function() {//定于请求路径let url = this.axios.urls.INIT_MENU;//发送ajax请求(get)this.axios.get(url, {params: {methodName: 'queryTreeNode'}}).then(resp => {let data = resp.data.data;this.treenode=data;console.log(data);}).catch(err => {console.log(err);});}}
</script>
<style>.el-menu-vertical-demo:not(.el-menu--collapse) {width: 240px;min-height: 400px;}.el-menu-vertical-demo:not(.el-menu--collapse) {border: none;text-align: left;}.el-menu-item-group__title {padding: 0px;}.el-menu-bg {background-color: #1f2d3d !important;}.el-menu {border: none;}.logobox {height: 40px;line-height: 40px;color: #9d9d9d;font-size: 20px;text-align: center;padding: 20px 0px;}.logoimg {height: 40px;}
</style>

vue+element的el-menu组件实现路由跳转及当前项的设置

注1：要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。注2：导航当前项，在el-menu标签中绑定  :default-active="$route.path",注意是绑定属性，不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。注3：后台t_tree_node表有几个节点的url为空，则会导致几个节点样式会一致

二.数据表格和分页

数据表格
在src目录下的views目录下创建一个book文件夹，并在里面创建与book相关的组件，所写的每一个vue都要在路由器中配置路由
BookList.vue(表格展示所有数据)

<template><div class="div-main"><!-- 1.面包屑，路径导航 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item>首页</el-breadcrumb-item><el-breadcrumb-item>书本列表</el-breadcrumb-item></el-breadcrumb><!-- 2.搜索栏 --><el-form :inline="true" style="margin-top: 16px;margin-bottom: -15px;"><el-form-item label="书本名称"><el-input v-model="bookname" placeholder="书本名称"></el-input></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" @click="query(1)">搜索</el-button></el-form-item></el-form><!-- 3.数据表格 --><el-table :data="tableData" stripe style="width: 100%"><el-table-column prop="id" label="编号"></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><!-- 4.分页栏 --><el-pagination  background style="margin-top: 15px;"@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 {name: 'BookList',data: function() {return {bookname: '',tableData:[],page:1,rows:10,total:0}},methods: {//每页显示条数的改变事件handleSizeChange:function(r){console.log(r);this.rows=r;//this.page=1;this.query(1);},//当前页码的改变事件handleCurrentChange:function(p){console.log(p);//this.page=p;this.query(p);},query: function(p) {this.page=p;//定义请求路径let url=this.axios.urls.BOOK_MANAGER;//定义请求参数let params={methodName:'queryBookPager',bookname:this.bookname,page:p,rows:this.rows};//发起ajax请求this.axios.post(url,params).then(resp=>{let data=resp.data;console.log(data);this.total=data.data.total;this.tableData=data.data.rows;}).catch(err=>{console.log(err);});}}}
</script><style>.div-main {margin: 15px;}
</style>

查询中的单个查询时组件自带的

三.新增、删除、修改

在写这些功能前记得在后台写方法，且测试接口

作者是在ApiPost中测试接口的（示例测试分页方法）

1.新增

在BookList.vue中写代码(注意看注释)

<template><div class="div-main"><!-- 1.面包屑，路径导航 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item>首页</el-breadcrumb-item><el-breadcrumb-item>书本列表</el-breadcrumb-item></el-breadcrumb><!-- 2.搜索栏 --><el-form :inline="true" style="margin-top: 16px;margin-bottom: -15px;"><el-form-item label="书本名称"><el-input v-model="bookname" placeholder="书本名称"></el-input></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" @click="query(1)">搜索</el-button><el-button type="success" icon="el-icon-plus" @click="open">新增</el-button></el-form-item></el-form><!-- 3.数据表格 --><el-table :data="tableData" stripe style="width: 100%"><el-table-column prop="id" label="编号"></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-column label="操作"><!-- 插槽 --><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table><!-- 4.分页栏 --><el-pagination background style="margin-top: 15px;" @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><!-- 新增弹出框 --><el-dialog :title="title" @close="dialogClose" :visible.sync="dialogFormVisible" :close-on-click-modal="false"><el-form :model="book" :rules="rules" ref="book"><el-form-item label="书本编号" :label-width="formLabelWidth"><el-input readonly="readonly" v-model="book.id" autocomplete="off"></el-input></el-form-item><el-form-item prop="bookname" label="书本名称" :label-width="formLabelWidth"><el-input v-model="book.bookname" autocomplete="off"></el-input></el-form-item><el-form-item prop="price" label="书本价格" :label-width="formLabelWidth"><el-input v-model="book.price" autocomplete="off"></el-input></el-form-item><el-form-item prop="booktype" label="书本类型" :label-width="formLabelWidth"><el-select style="width: 100%;" v-model="book.booktype" placeholder="请选择活动区域"><el-option label="文学" value="文学"></el-option><el-option label="言情" value="文学"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></div></el-dialog></div></template><script>export default {name: 'BookList',data: function() {return {bookname: '',tableData: [],page: 1,rows: 10,total: 0,title: '新增书本',dialogFormVisible: false,//book是对象 对象用花括号book: {id: '',bookname: '',price: '',booktype: ''},formLabelWidth: '100px',rules: {bookname: [{required: true,message: '请输入书本名称',trigger: 'blur'}, ],price: [{required: true,message: '请输入书本价格',trigger: 'blur'},{min: 3,max: 5,message: '长度在 3 到 5 个字符',trigger: 'blur'}],booktype: [{required: true,message: '请选择书本类型',trigger: 'change'}, ],}}},methods: {//书本编辑handleEdit: function(row) {//设置对话框为显示状态this.dialogFormVisible = true;//设置标题为编辑书本this.title = "编辑书本";//赋值表单数据this.book = {id: row.id,bookname: row.bookname,price: row.price,booktype: row.booktype};},//书本删除handleDelete: function(row) {this.$confirm('要删除这本书吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {let url = this.axios.urls.BOOK_MANAGER;let params = {id: row.id,methodName: 'delBook'};this.axios.post(url, params).then(resp => {let data = resp.data;this.$message({message: data.msg,type: data.success == true ? 'success' : 'error'});if (data.success) {//刷新数据列表this.query(this.page);}}).catch(err => {console.log(err);});}).catch(() => {});},//对话框的关闭事件dialogClose: function() {//清空表单数据this.book = {id: '',bookname: '',price: '',booktype: ''};//清空表单验证this.$refs['book'].resetFields();//重置标题this.title = "新增书本";},//对话框的打开事件open: function() {this.dialogFormVisible = true;},//新增或编辑的确认事件save: function() {this.$refs['book'].validate((valid) => {if (valid) {//定义请求路径let url = this.axios.urls.BOOK_MANAGER;let methodName = "addBook";if (this.title == "编辑书本") {methodName = "editBook";}//定义请求参数this.book['methodName'] = methodName;//发起ajax请求this.axios.post(url, this.book).then(resp => {let data = resp.data;this.$message({message: data.msg,type: data.success == true ? 'success' : 'error'});if (data.success) {//关闭对话框this.dialogFormVisible = false;//刷新数据列表this.query(this.page);}}).catch(err => {console.log(err);});} else {console.log('error submit!!');return false;}});},//每页显示条数的改变事件handleSizeChange: function(r) {console.log(r);this.rows = r;//this.page=1;this.query(1);},//当前页码的改变事件handleCurrentChange: function(p) {console.log(p);//this.page=p;this.query(p);},query: function(p) {this.page = p;//定义请求路径let url = this.axios.urls.BOOK_MANAGER;//定义请求参数let params = {methodName: 'queryBookPager',bookname: this.bookname,page: p,rows: this.rows};//发起ajax请求this.axios.post(url, params).then(resp => {let data = resp.data;console.log(data);this.total = data.data.total;this.tableData = data.data.rows;}).catch(err => {console.log(err);});}}}
</script><style>.div-main {margin: 15px;}
</style>

新增的效果图
点击页面中的新增按钮

新增窗口

09 动态树+数据表格+分页+增删改相关推荐

vue09动态树+数据表格+分页模糊查
14天阅读挑战赛努力是为了不平庸~ 目录 1. 准备工作 2. 动态树 2.1 在配置请求路径 2.2 使用动态数据构建导航菜单 2.2.1 通过接口获取数据 2.2.3 通过后台获取的数据构建菜单 ...
动态树+数据表格+分页
目录 1. 后台数据 2. 动态生成NavMenu导航菜单(只支持2级菜单 2.1 结构 2.2 vue+element的el-menu组件实现路由跳转及当前项的设置 2.3 数据表格 ...
SPA项目开发之动态树+数据表格+分页
目录一.树形菜单 1.要确定静态树形菜单节点的样式排版 2.要获取树形节点的数据 3.通过拿到的数据,渲染树形节点二.书籍列表查询一.树形菜单 1.要确定静态树形菜单节点的样式排版 <el ...
python增删改查的框架layui_spring+springMvc+mybatis+layui实现数据表格的增删改查（纯layui实现）...
[实例简介] 项目描述: 这是通过ssm+layui 实现的简单的对数据表格的增删改查,所有页面纯由layui实现. 如果你是新手学习layui,那这个绝对会对你有很大的帮助: 如果你之前已经学过甚至 ...
vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
以下代码可以直接复制使用一.情景: 列表是一个树状表格,可以无限添加下级,以及对列表的某一行进行增删改查(目前查没有写). 原博链接二.本篇是在原博主的代码基础上添加了部分功能. 功能1: 给树状 ...
对表格实现修改查询html,【原生】js实现表格的增删改查
说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...
python对excel增删改查语句_利用python模拟sql语句对员工表格进行增删改查
本文主要给大家介绍了关于python模拟sql语句对员工表格进行增删改查的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 具体需求: 员工信息表程序,实现增删改查操作: 可进行模糊查询, ...
python对excel增删改查_利用python模拟sql语句对员工表格进行增删改查
本文主要给大家介绍了关于python模拟sql语句对员工表格进行增删改查的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 具体需求: 员工信息表程序,实现增删改查操作: 可进行模糊查询, ...
创建vue+iview项目实现分页增删改查功能
iview+vue实现分页增删改查功能一. 后台代码二.前端工具是webstorm,直接上测试相应js接口三.相应的页面四.效果展示上一片文章总结了下如何创建一个vue项目,前端框架使用iv ...