1. Introducción
1. Introducción
En el desarrollo de software moderno, los árboles dinámicos, las tablas de datos y los efectos de paginación se han convertido en requisitos básicos para muchas aplicaciones . A medida que aumentan la escala y la complejidad del negocio, a menudo necesitamos mostrar una gran cantidad de datos de estructura jerárquica e implementar operaciones altamente interactivas y eficientes.
Los árboles dinámicos proporcionan una visualización claramente organizada y escalable que permite a los usuarios ver y manipular fácilmente los nodos del árbol. Las tablas de datos presentan datos en forma tabular, en las que los usuarios pueden ordenar, filtrar, editar y realizar otras operaciones.
El efecto de paginación puede dividir una gran cantidad de datos en una página o páginas de contenido que son fáciles de administrar y explorar. La combinación de estas tres funciones no solo nos permite manejar mejor grandes colecciones de datos, sino que también permite a los usuarios localizar rápidamente la información requerida.
Este artículo presentará cómo utilizar la tecnología front-end moderna para lograr árboles dinámicos, tablas de datos y efectos de paginación, brindando así una mejor experiencia de usuario a su aplicación.
2.Proposito
Los objetivos principales de utilizar Element UI para lograr árboles dinámicos, tablas de datos y efectos de paginación son los siguientes:
- Proporcione una interfaz de usuario hermosa y fácil de usar : Element UI es un conjunto de bibliotecas de componentes basadas en Vue.js que proporciona un rico conjunto de componentes y estilos de UI, que pueden ayudar a los desarrolladores a crear rápidamente una interfaz hermosa y fácil de usar. interfaces de usuario. Al utilizar Element UI, podemos proporcionar una apariencia unificada y consistente y una experiencia interactiva para funciones como árboles dinámicos, tablas de datos y paginación, haciendo que los usuarios se sientan cómodos y felices.
- Capacidades de personalización y desarrollo rápido : Element UI proporciona una rica variedad de componentes y estilos predefinidos, de modo que los desarrolladores no necesitan crear estas funciones desde cero, sino que pueden usar directamente los componentes existentes para lograr árboles dinámicos, tablas de datos y efectos de paginación. Además, Element UI también admite opciones de personalización flexibles y configuraciones de temas, y puede realizar modificaciones personalizadas de diseño y estilo de acuerdo con las necesidades específicas del proyecto, ahorrando tiempo y costos de desarrollo.
- Altamente escalable y mantenible : la biblioteca de componentes de Element UI ha sido verificada por una gran cantidad de proyectos reales. Tiene una arquitectura estable y una excelente calidad de código, y es fácil de mantener y expandir. Al utilizar Element UI, podemos utilizar componentes y API predefinidos, combinados con lógica empresarial personalizada, para crear árboles dinámicos complejos, tablas de datos y funciones de paginación. Al mismo tiempo, Element UI también proporciona documentación rica y recursos comunitarios para facilitar que los desarrolladores encuentren problemas y compartan experiencias.
2. árbol dinámico
Crear un efecto de árbol dinámico que queramos en función de los datos de nuestra base de datos.
1. Definición de la interfaz de datos de backend
Debajo del sql de los datos, es decir, en el archivo sqlxml del menú de árbol
<resultMap id="BaseResultMap" type="com.zking.ssm.model.Module" > <id column="id" jdbcType="INTEGER" property="id" /> <result column="pid" jdbcType="INTEGER" property="pid" /> <result column="text" jdbcType="VARCHAR" property="text" /> <result column="icon" jdbcType="VARCHAR" property="icon" /> <result column="url" jdbcType="VARCHAR" property="url" /> <result column="sort" jdbcType="INTEGER" property="sort" /> <collection property="modules" ofType="com.zking.ssm.model.Module" column="id" select="queryChildNodeByPid"/> </resultMap> <sql id="Base_Column_List" > id, pid, text, icon, url, sort </sql> <!--先根据id查询菜单根级目录，再利用上次查询结果collection中column的值id作为递归查询条件，查出所有子菜单，返回结果必须为resultMap，并且值为上面构建的resultMap的id值--> <select id="queryChildNodeByPid" resultMap="BaseResultMap" parameterType="int"> select <include refid="Base_Column_List"/> from t_module_vue where pid=#{value} </select>
capa controladora
@RequestMapping("/queryRootNode")
@ResponseBody
public JsonResponseBody<List<Module>> queryRootNode(){
try {
List<Module> modules = moduleService.queryRootNode(-1);
return new JsonResponseBody<>("OK",true,0,modules);
} catch (Exception e) {
e.printStackTrace();
return new JsonResponseBody<>("初始化首页菜单错误",false,0,null);
}
}2. Enlace del menú de navegación frontal
2.1 Diseño de página
Estructura del menú
<!-- 添加动态路由：router :default-active="$route.path"-->
<el-menu router :default-active="$route.path" default-active="2" 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 v-for="m in menus" :index="'index_'+m.id" :key="'key_'+m.id">
<template slot="title">
<i :class="m.icon"></i>
<span>{
{ m.text }}</span>
</template>
<el-menu-item v-for="m2 in m.modules" :index="m2.url" :key="'key_'+m2.id">
<i :class="m2.icon"></i>
<span>{
{ m2.text }}</span>
</el-menu-item>
</el-submenu>
</el-menu>El atributo clave en el nodo de primer nivel el-submenu es único, el atributo de índice es único y el atributo de índice se usa para controlar el plegado del menú; el atributo clave en
el nodo de segundo nivel el-menu-item es único, el el atributo de índice es único y el atributo de índice se utiliza para controlar el salto de página;
El componente el-menu de vue+element implementa el salto de enrutamiento y la configuración del elemento actual
router :default-active="$route.path"
- Para implementar el salto de ruta, primero agregue el atributo del enrutador a la etiqueta el-menu y luego simplemente configure la URL en el atributo de índice de cada etiqueta el-menu-item para hacer clic en el-menu-item para implementar el salto de ruta.
- Para navegar por el elemento actual, vincule : default-active="$route.path" en la etiqueta el-menu . Tenga en cuenta que es un atributo vinculante. No olvide agregar " : " cuando $route.path sea igual a la etiqueta el-menu-item . Cuando el valor del atributo de índice está en, el elemento es el elemento actual.
- El atributo url en la etiqueta el-submenu no puede estar vacío y no puede ser el mismo; de lo contrario, causará el problema de que varios nodos tengan el mismo efecto de reducción/colapso.
2.2 Vinculación de datos
created() {
this.$root.Bus.$on('sjm', v => {
this.collapsed = v;
});
//树形菜单
//后台访问地址
let url = this.axios.urls.SYSTEM_MENUS;
this.axios.get(url, {}).then(r => {
//利用数组接受后台的数据
this.menus = r.data.rows;
}).catch(error => {
})
}2.3 Escribir la página de enlace de enrutamiento
Enlace de ruta
Escritura de página de salto
Hazlo según tus propias necesidades.
Efecto
3. Tablas de datos y paginación.
1. Definición de la interfaz de datos de backend
package com.zking.ssm.controller;
import com.zking.ssm.model.Book;
import com.zking.ssm.service.IBookService;
import com.zking.ssm.util.JsonResponseBody;
import com.zking.ssm.util.PageBean;
import com.zking.ssm.vo.BookFileVo;
import org.apache.commons.io.IOUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.URLEncoder;
import java.util.List;
import java.util.Map;
@Controller
@RequestMapping("/book")
public class BookController {
@Autowired
private IBookService bookService;
@RequestMapping("/queryBookPager")
@ResponseBody
public JsonResponseBody<List<Book>> queryBookPager(Book book, HttpServletRequest req){
try {
PageBean pageBean=new PageBean();
pageBean.setRequest(req);
List<Book> books = bookService.queryBookPager(book, pageBean);
return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
} catch (Exception e) {
e.printStackTrace();
return new JsonResponseBody<>("分页查询书本失败",false,0,null);
}
}
}
2. Interfaz
El atributo de propiedad en la tabla debe tener el mismo nombre de atributo que la clase de entidad de back-end; de lo contrario, los datos no se mostrarán.
<template>
<div class="Book" style="padding: 30px;">
<!-- 输入框搜索 -->
<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" plain @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!-- 书籍的书籍表格 -->
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="书籍ID"></el-table-column>
<el-table-column prop="bookname" label="书籍名称"></el-table-column>
<el-table-column prop="price" label="书籍价格"></el-table-column>
<el-table-column prop="booktype" label="书籍类型"></el-table-column>
</el-table>
<!-- 分页 -->
<div class="block" style="padding: 20px;">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
background :page-sizes="[10, 20, 30, 40]" :page-size="rows"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
bookname: '',
tableData: [],
rows: 10,
total: 0,
page: 1
}
},
methods: {
handleSizeChange(r) {
//当页大小发生变化
let params = {
bookname: this.bookname,
rows: r,
page: this.page
}
this.query(params);
},
handleCurrentChange(p) {
//当前页码大小发生变化
let params = {
bookname: this.bookname,
rows: this.rows,
// 分页
page: p
}
// console.log(params)
this.query(params);
},
query(params) {
//获取后台请求书籍数据的地址
let url = this.axios.urls.SYSTEM_BOOKLIST;
this.axios.get(url, {
params: params
}).then(d => {
this.tableData = d.data.rows;
this.total = d.data.total;
}).catch(e => {
});
},
onSubmit() {
let params = {
bookname: this.bookname
}
console.log(params)
this.query(params);
this.bookname = ''
}
},
created() {
this.query({})
}
}
</script>
<style>
</style>
Efecto
