体检项管理页面(view):<template> <div id="box"> <!-- 页面抬头 --> <div style=" font-size: 16px; margin: 0 0 10px 0; background-color: white; height
转载 2024-09-22 20:56:36
194阅读
整体效果 springboot、shiro、vue、elementUI CDN模式前后端分离的权限管理demo 源码下载地址https://github.com/Aizhuxueliang/springboot_shiro.git前提你电脑的安装好这些工具:jdk8、idea、maven、git、mysql;shiro的主要概念Shiro是一个强大的简单易用的Java安全框架,主要用来更便捷
穿梭组件是前端框架中常见的一种数据选择方式,可以动态可视化的展示数据的归属。 示例 准备Axure 8(或Axure 9)软件已安装。掌握基本的软件使用。熟悉中继器。本教程知识点选项组:选中效果互斥。中继器函数。详细教程 本教程源文件提供了通过全局变量传参和局部变量传参的两种方式实现。 本文以局部变量传参进行实现(相对简单易懂,且方便后期成为
el-transfer作为element重要的组件之一,可以完美实现在两个列表之间移动元素。但有时我们可能需要它实现单选效果,就比如给某个部门设置部门负责人。部门负责人只能有一个,因此右侧窗口只能保留一个选项,而左侧窗口中的选项需要实现单选。并且,当我们把左侧选项填充到右侧栏中时,右侧原有的记录应该被更新。 就如同下面图片展示出来的效果一样: 当然,可以不使用el-transfer而改
<template> <div class="myTable"> <div class="searchNav"> <el-button class="newAdd" type="primary" @click="showAddPermissionPage">新增</el-button>
(持续更新)点击某个盒子之外的部分触发函数假设此盒子的class为:item-operationhideOperation(event) { // 隐藏加减号图标 var op = document.getElementsByClassName('item-operation'); if (op) { for (let i = 0; i <
  npm install el-tree-transfer --save<template> <div> <tree-transfer :title="title" :from_data="fromData" :to_data="toData" :defaultProps="{ labe
序言在后台管理项目开发中表格是使用频率最高的组件之一,为了提高开发效率和简化代码,对 Element UI 的 el-table 组件进行二次封装。通过抽象常用的配置项和操作,并提供简洁易用的接口,使用自定义 el-table 组件时只需专注业务逻辑,无需重复编写相同的代码。这样能够减少重复工作,提高可维护性和扩展性,使项目开发更高效便捷。实现效果图通过传入表头配置tablecolumn 或chi
1.需求说明:,而不是跳到第一页3.这时候我们先使用生命周期,当组件更新的时候把跳转的到第几页的数值存起来updated() {  se
转载 2月前
447阅读
vue+iview 自定义实现穿梭因业务需求iview穿梭不满足业务需求自己写了个穿梭。因本人是后端,请各位大佬看到了也可帮忙优化下。只实现了基本功能表格及模态代码<Modal v-model="applyModel" closable title="发起申请" width="1260px" @on-cancel="cancelAppModel" > <For
转载 2024-10-29 10:52:39
128阅读
element 穿梭性能优化背景穿梭处理大数据量时,由于渲染的 DOM 节点过多,造成页面卡顿的问题。 在尽量不改变组件原有逻辑的前提下,进行优化。解决思路懒加载 - InfiniteScroll 组件先从 packages/transfer 中将原组件拷出(或者改源码重新打包维护私有库使用)将v-infinite-scroll="pageDown" :infinite-scroll-imme
转载 2024-03-23 11:10:24
448阅读
使用elementUI的树形组件 tree组件功能需求: 1、左侧的子节点移动到右侧的表格中 2、右侧选中的内容移动到左侧树中,单一移动和全部移动 3、点击右侧节点实现上下移动首先会遇到的问题可能是如何实现左侧只让子节点显示checkbox,我这边是根据后端返回了一个参数来判断是否是父节点(其实只要后端给父节点加一个nocheck=true就可以)// setLeftAgency :封装好的请求接
转载 2024-04-18 08:51:46
2633阅读
需求:更改elementui中el-transfer样式, 实现单击左侧选项即加入右边选框,单击右侧选项即可回到左侧选框,中间左右来回按钮更改为左侧全选右侧全选,最终修改后效果图如下本以为自己能够不看elementui源码实现这需求,在折腾了一天还没实现后,还是回归到其源码进行研究,自己通过纯vue实现主要遇到了以下问题:若是不需要进行模糊查询可通过index进行增删改查实现穿梭功能,但是若是加
EasyDSS 高性能流媒体服务器前端架构概述EasyDSS 高性能流媒体服务器前端部分最初采用的是 AdminLTE + 各方 jQuery 插件的开发方式, 也就是网络上通常讲的 bootstrap + jquery plugins 的方式. 有经验的前端开发者想必都了解这种架构下开发前端页面的痛点. 当一个页面上 UI 组件多起来的时候, 代码组织就容易变得混乱, 各种 $(document
转载 6月前
34阅读
场景: 选择商品展示效果可直观化——穿梭形式 效果<!--活动设置-满减活动列表-新增页面reduce_settings--> <template> <div id="reduce_settings"> <div style="font-size: 12px;"> <el-breadcrumb separator-cl
一、使用原生js实现拖拽<html lang="en"> <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> .drag { background-color: skybl
转载 2024-05-06 16:42:55
213阅读
文章目录工作任务说明一、穿梭组件前端js代码1、这里的`data`的格式要求json格式2、`value`属性的值二、树状下拉前端js代码1、这里写一下tree格式数据的生成2、tree中被选中的集合注意事项 今天的日期不错,比较特别。 工作任务说明工作任务,是为项目的首页增加一个快捷访问的标签卡,同时增加一个添加快捷访问的添加功能。就比如一些app首页,添加“常用”的功能。 前端首页的H
 开发中,经常有穿梭的需求,但常见的灵活性较低,不支持左右树形,因此在项目开发过程中,摸索了treeTransfer库,是基于element组件库的。如下图所示 树形穿梭  treeTransfer安装 安装elementUi后,npm i el-tree-transfer在页面使用引入,import treeTransfer from 'el
element-ui自带的穿梭两边都是列表的格式,想要更多样式就自己造吧~思想是:点击“添加”数据从左边列表删除,插入到右边列表中,由于没有添加后台,刷新之后数据就恢复了,实际使用的时候得访问后台接口才行~完整代码在最后面。效果图:左边是一排按钮组成的列表,也可以用ul li实现,右边是el-table表格。1.布局:添加对话,将对话的body从左到右分成三部分<el-dialog t
转载 2023-12-19 22:30:31
179阅读
页面url访问到后台程序是从一个url开始的,怎么根据url找到对应的处理程序,这个就要从RequestMapping原理理解。RequestMapping 原理spring-webmvc-4.3.7.RELEASESpringMVC 启动的时候,会加载 加了注解 @Controller 的 Bean.栗子:@Controller@RequestMapping("/test")public cla
  • 1
  • 2
  • 3
  • 4
  • 5