SPA项目开发之动态树+数据表格+分页

课程目标

1.动态树的功能

2.右侧文章的分页查询功能

一.动态树

1.数据库表

左侧树形菜单数据

 2.在create方法中通过Ajax进行数据读取

created() {
            let url = this.axios.urls.SYSTEM_MENU_TREE;
            //箭头函数解决了This指针污染问题
            //stringify将对象转换成字符串
            this.axios.post(url, {}).then((resp) => {
                console.log(resp);
            }).catch(function(error) {
                console.log(error);
            });
            }

3.遍历menus数组，将数据渲染到页面中

<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 :key="'id_'+m.treeNodeId" v-for="m in menus">
			<template slot="title">
				 <i :class="m.icon"></i>
                <span>{{m.treeNodeName}}</span>
			</template>
			<!--index里面填写的是路由跳转路径-->
			<el-menu-item :key="'id_'+m2.treeNodeId" :index="m2.url" v-for="m2 in m.children">
				 <i :class="m2.icon"></i>
                <span>{{m2.treeNodeName}}</span>
			</el-menu-item>
		</el-submenu>
	</el-menu>
</template>
<script>
	export default {
		data() {
			return {
				collapsed: false,
				//这里面存放所有的一级菜单
				menus:[]
			}
		},
		created() {
			let url = this.axios.urls.SYSTEM_MENU_TREE;
			//箭头函数解决了This指针污染问题
			//stringify将对象转换成字符串
			this.axios.post(url, {}).then((resp) => {
				console.log(resp);
				this.menus=resp.data.result;
			}).catch(function(error) {
				console.log(error);
			});
			}
	}
</script>

结果展示

 

5.定义跳转控件

 5.1 引入element代码

router :default-active="$route.path"

5.2 在view目录下建立sys目录，然后建立Articles控件

 5.3AppMain.js中定义锚点

 5.4 在index.js中配置组件

import Articles from '@/views/sys/Articles'

{
            path: '/sys/Articles',
            name: 'Articles',
            component: Articles
        }

二、数据表格

1.表格框架

<template>
  <el-table size="small" :data="result" border element-loading-text="拼命加载中" style="width: 100%;">
    <el-table-column align="center" type="selection" min-width="1">
    </el-table-column>
    <el-table-column sortable prop="id" label="文章id" min-width="1">
    </el-table-column>
    <el-table-column sortable prop="title" label="文章标题" min-width="3">
    </el-table-column>
    <el-table-column sortable prop="body" label="文章内容" min-width="5">
    </el-table-column>
    <!--     <el-table-column align="center" label="操作" min-width="300">
       <template slot-scope="scope">
         <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
         <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
       </template>
     </el-table-column> -->
  </el-table>
 
</template>

2.数据读取

  export default {
    name: 'Articles',
    data() {
      return {
        result: [],
 
 
      }
    },
    created() {
      let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
      this.axios.post(url, this.ruleForm).then((resp) => {
        console.log(resp);
        this.result = resp.data.result;
      }).catch(function(error) {
        console.log(error);
      });
    }
  }

3.结果展示

 三、分页和查询

1.分页条

<!-- 分页条 -->
        <el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
         :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
         :total="formInline.total">
        </el-pagination>

 2.定义组件中的数据和方法

<script>
	export default {
		name: 'Articles',
		data() {
			return {
				listData: [],
				formInline: {
					page: 1,
					rows: 10,
					total: 0,
					title:''
				}
			}
		},
		methods: {
			handleSizeChange(rows) {
				console.log("当前页查询数据量" + rows)
				this.formInline.page = 1;
				this.formInline.rows = rows;
				this.search();
			},
			handleCurrentChange(page) {
				console.log("当前页为" + page)
				this.formInline.page = page;
				this.search();
			},
			doSearch(param) {
				let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
				this.axios.post(url, param).then((resp) => {
					console.log(resp);
					this.listData = resp.data.result;
					this.formInline.total = resp.data.pageBean.total;
				}).catch(function(error) {
					console.log(error);
				});
				//箭头函数解决了This指针污染问题
				this.$root.Bus.$on("collapsed-aside", (v) => {
					this.collapsed = v;
				});
		},
		search(){
			this.doSearch(this.formInline);
		}
	},
	created() {
		this.doSearch({});
	}
	}
</script>

修改total值

 this.formInline.total=resp.data.pageBean.total;

handleSizeChange方法表示 每页多少条数据

handleCurrentChange 方法表示当前 第几页

查询 

<!-- 搜索筛选 -->
		<el-form :inline="true" :model="formInline" class="user-search">
			<el-form-item label="搜索：">
				<el-input size="small" v-model="formInline.title" placeholder="文章标题"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
			</el-form-item>
		</el-form>

定义doSearch方法

doSearch(param) {
				let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
				this.axios.post(url, param).then((resp) => {
					console.log(resp);
					this.listData = resp.data.result;
					this.formInline.total = resp.data.pageBean.total;
				}).catch(function(error) {
					console.log(error);
				});
				//箭头函数解决了This指针污染问题
				this.$root.Bus.$on("collapsed-aside", (v) => {
					this.collapsed = v;
				});
		}

为了方便的处理传参和不传参问题，将create中的代码挪到doSearch中，成为公共方法

让create调用doSearch方法，这里不需要传参

里面传一个空的

created() {
        this.doSearch({});
    }

定义search方法，这里需要将关键字传进来进行查询

search(){
            this.doSearch(this.formInline);
        }

方便我们在查看下一页的时候，查询带的关键字不会丢失

 下一页

 

可以看出关键字还在