一、效果图 二、方法第一步，新建一个el-table，进行如下配置，:data=>是用于动态json数据赋值给table，:header-cell-style=>是设置表头的样式，stripe=>是让table具有斑马背景色，便于观看。<el-table :data="tableData"
:header-cell-styl
转载
2024-09-29 19:45:51
190阅读
element-plus的多选表格支持跨页，只需要在el-table设置row-key属性，然后在type="selection"的列设置:reserve-selection="true"即可跨页保存选项。那么，如果想要自己实现，该如何做呢？基本思路：使用es6的map储存已经勾选的变量，当翻页、跳页或者分页规格改变的时候，利用table的toggleRowSelection方法将当前分页下存在于
转载
2024-06-28 13:49:37
1508阅读
图二：选中第一页的六条数据与第二页的六条数据 图三：回到第一页可以看到数据正常回显 图四：点击右侧选中员工移除按钮后效果 图五：点击左侧取消选中后的效果（切换页面回显后也没问题） 图六：左侧取消全选的效果（只取消当前界面六条数据的选择，选中员工中的数据是第二页的数据）实现话不多说上代码html<template>
<div class="content-box">
记录element-ui分页与复选框出现的问题element-ui 分页element-ui 表格复选框主要问题解决问题 element-ui 分页先把官网地址放上来：https://element.eleme.cn/#/zh-CN/component/pagination. 如果是单纯在一个表格使用分页组件的话是没有问题的，element的分页组件使用起来十分简便，可以省很多事情。 代码如下：
转载
2024-05-29 01:46:50
290阅读
<el-pagination :current-page="currentPage" :page-sizes="[10, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="t ...
转载
2021-10-29 17:33:00
361阅读
2评论
前言由于项目需要，我使用到了element-ui，当需要使用到表格分页功能的时候，就遇到了一些问题，但通过努力还是解决了，接下来就让我讲一下我对于element-ui中的分页功能的了解（因为这次讲的是表格的分页，所以接下来的内容会与表格联系在一起）。表格分页官网地址：https://element.eleme.cn/#/zh-CN/component/pagination一、前端分页所谓的前端分页
转载
2024-02-10 20:32:30
2179阅读
首先使用 el-table(表格) 和 el-pagination(分页) 组件需要 npm 下载 Element UI 组件库，下载安装方式参见官网：Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue
转载
2024-05-20 13:32:48
2127阅读
vue拖拽介绍基本使用方法同HTML5w3school方法介绍draggable为了使元素可拖动，设置draggable=“true”默认情况下，图像、链接和被选中的文本是可以拖动的，因为它们的draggable自动设置为true应用于被拖动元素上的事件dragstart在被拖放的元素上触发该方法（按下鼠标拖动开始）drag触发dragstart事件后，随后触发drag事件（在元素拖动期间，持续触
有一段时间没更新文章了，主要是因为自己一直在忙着学习新的东西而忘记分享了，实在惭愧。这不，大半夜发文更一篇文章，分享一个自己编写的一个Vue的小组件，名叫BootPage。不了解Vue.js的童鞋可以移步我的上一篇文章《浅谈Vue.js》了解一下。BootPage组件简介其实也不是啥高大上的组件了，相反确实一个简单的表格分页组件而已，主要是自己最近项目中需要一个表格分页组件，而Vue官方组件库里分
转载
2024-09-12 20:11:49
79阅读
搜索、分页要考虑哪些东西？单独拿出来一个来说，都是比较简单的，但是结合到一起再配合需求，就会出现种种变化，一不留神就会 ‘中招’ ！要把 分页 做成 搜索 ！分两个情况进行说明！注意： 以下情况均以每页10条数据为例。情况一：搜索出来的数据超过10条，即有多页符合条件的数据。1）假设用条件 “已审批的订单” 去搜索，结果一共有21条，共3页，此时是在第一页，他代表的是 “已审批的订单” 的1&nb
转载
2024-04-02 14:44:48
306阅读
分页查询：首先我们要明确什么是分页？为什么要去分页？分页就是将数据以多页去展示，使用分页可以提高客户的感受。分页的分类：1.物理分页：只从数据库中查询当前页的数据优点：不占用很多内存 缺点：效率比价低(相比于逻辑分页)2.逻辑分页：从数据库将所有记录查询出来，存储到内存中，展示当前页，然后数据再直接从内存中获取优点：效率高 &n
<style>
/*树形菜单--分割线内文字*/
.diseasea{
position: relative;
left:180px; /*右*/
color: #005cbf
}
/*表单信息--分割线内文字*/
.unitdivb{
text-align: center;
实现了分类的功能，还有其他的功能 我也会继续写<template>
<div>
<el-table stripe :data="tableData" style="width: 100%; height: 500px">
<el-table-column label="ISBN" prop="ISBN" width="100">
转载
2024-04-07 11:15:48
185阅读
Vue+ElementUI table表格分页分页的两种方式。前端分页，后端分页。两种方式各有个的优缺点吧。前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数据，然后在做分页处理。在数据量多的情况下，加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。后端分页：因为是后端分页，前端在每点击一次分页时，便向
转载
2024-03-22 19:04:35
222阅读
如题，有时候表格需要合并同行<el-table :data="tableData" :span-method="objectSpanMethod" border>...export default {
data() { pretreatmentNum：’‘， pretreatmentArr: [], // 存放需要合并的单元格数据，数组中数字代表需要合并几
转载
2021-05-17 14:28:41
765阅读
2评论
挂载阶段执行顺序为： 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted更新阶段执行顺序为： 父beforeUpdate -> 子beforeUpdate -> 子updat
今天简单的介绍一下element的分页是怎么实现的，先说一下感受，之前一直是使用的jQuery的分页，其实也不全算是，使用的本质还是BootStrapUI的分页，感兴趣的可以翻翻我之前写的文章，有关于这块的，这里就不做任何的赘述，那么说这个原则是用完element的分页以后觉得真的是太简单的，简单的写完甚至没有一点的成就感。不BB，我们看效果和代码！效果：下面我们看一下代码是多简单的：H5：（写到
转载
2024-05-31 05:11:45
225阅读
<template> <div> <template> <el-table :data="tablesdata" border size="mini" style="width: 100%">
转载
2021-02-25 18:18:29
5304阅读
2评论
最近项目要用到echarts画图，踩了个自适应的坑，在这里总结一下，首先看bug图 分析一下：左边的盒子，也就准一等品花颜色得分情况没有出来是因为我最外边的盒子设置的固定宽，如果设置固定宽 echarts是能够自适应的，但是页面会挤在一起，也就是左边 中间 右边的盒子间隔会随着浏览器窗口放大，放大的结果就是浏览器窗口宽度变小了，而盒子固定宽度不变，导致盒子会挤压在一起，布局就不美观了。所以为了自适
转载
2024-10-08 13:12:12
168阅读
第三步获取对应行的数据最后效果图踩坑经历今天搞了一下午可算搞懂了，网上我查了好多资料发现好像有点老了都比如这种的：<a slot=“action” href=“javascript:;” @click=“onUser(record)”>用户<a slot=“action” href=“javascript:;” @click=“onRole(record)”>权限slot、
