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

一.左侧动态树

原界面

效果界面

首先我们要将左侧的假数据变为后台数据库传过来的数据

得到后台返回的数据并定义一个数组进行接收
定义的数组

data() {
			return {
				collapsed: false,
				//接收左侧数据的数组
				menus: []
			}
		},

获取后台数据

let url = this.axios.urls.SYSTEM_MENU_TREE;
			this.axios.post(url, {}).then((resp) => {
				this.menus = resp.data.result;
			});

将数组便利给左侧

<template>
<!-- router :default-active="$route.path"路径跳转和index一起使用 -->
	<el-menu default-active="2" 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>
		//key代表唯一每个都不同
		//v-for循环 循环便利数组
		//treeNodeName后台传过来的值
		//<i :class="m.icon"></i>图标
		//icom后台传过来的图标
		//index 代表跳转路径
		//url后台传过来的路径
		<el-submenu :key="'id_'+m.treeNodeId" v-for="m in menus">
			<template slot="title"><i :class="m.icon"></i>
				<span>{{m.treeNodeName}}</span></template>
			<el-menu-item :index="m1.url" :key="'id_'+m1.treeNodeId" v-for="m1 in m.children"><i :class="m1.icon"></i>
				<span>{{m1.treeNodeName}}</span></el-menu-item>
		</el-submenu>
	</el-menu>
</template>

新建一个界面和后台传的路径相同

并配置路由

即可实现页面跳转

数据表格

先到Element api官网中找到一个表格复制随便找一个就行

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>```
**将表格修改成自己所需要的
tableData是后台传回来的数据
要在下方定义
id  title  body是后台传回来数据对应的值**

```html
<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="id" label="文章id" width="180">
				</el-table-column>
				<el-table-column prop="title" label="文章标题" width="180">
				</el-table-column>
				<el-table-column prop="body" label="文章内容" >
				</el-table-column>
			</el-table>

写一个获得后端数据方法

search(params) {
				let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
				//箭头函数解决了指针污染的问题>=
				this.axios.post(url, params).then((resp) => {
				//将后台传回来的值给自己定义的数组
					this.tableData = resp.data.result;
				});
			},

created() {
this.search({})
}

分页

先到Element api官网中找到一个分页（我找的是完整功能的）

<span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>

此例是一个完整的用例，使用了size-change和current-change事件来处理页码大小和当前页变动时候触发的事件。page-sizes接受一个整型数组，数组元素为展示的选择每页显示个数的选项，[100, 200, 300, 400]表示四个选项，每页显示 100 个，200 个，300 个或者 400 个
我的
total总数据条数
handleSizeChange(自己写的方法)
页码大小变动
handleCurrentChange(自己写的方法)
本页页变动

<div class="block" style="text-align: center;">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="formInline.page"
				 :page-sizes="[10, 20, 30, 40]"  layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>

定义变量

data() {
			return {
				tableData: [],
				formInline: {
					page: 1,
					rows: 10,
					title: ''
				},
				total: 1
			}
		}

获取后台数据代码在获取数据表格时就已经获取到条数了
所以只用加上一条

this.total = resp.data.pageBean.total

页面变动方法

handleSizeChange(rows) {
				this.formInline.page = 1;
				this.formInline.rows = rows;
				this.dosearch();
			},
			handleCurrentChange(page) {
				this.formInline.page = page;
				this.dosearch();
			},
			dosearch() {
				this.search(this.formInline)
			}

查询

再来一个搜索框
把查询所调的方法变为刚刚写的就可以了

<el-form :inline="true" :model="formInline" class="demo-form-inline" style="text-align: center;">
				<el-form-item label="文章标题" >
					<el-input v-model="formInline.title" placeholder="文章标题"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="dosearch">查询</el-button>
				</el-form-item>
			</el-form>

效果：