最近项目中用到了Vue+ElementUI,就试着写了一些基本功能，坑真多。废话不多说了，直接上代码1、Vue+ElementUI+el-table实现复选框的多选和取消选择html代码：注意这里在使用el-table的时候，选择的事件使用select,因为这个事件我们可以传递一个名为row的参数，该参数就是你选择的这一行的数据对象，我们就可以获取该对象中的任意一个属性的值（当然了，我们这里只要i
转载
2024-03-05 04:03:30
1349阅读
<template>
<el-table :data="renderDynamic" ref="product" border row-key="id" :row-class-name="rowClassNameFun"
:header-row-class-name="headerRowClassName" size="mini" max-height
前端这一块最方便的莫过于是element已经提供好了 接口，三个最关键的接口这里首先解决第一个，总数。//总记录数
totalCount:100,我直接在data中将其先初始化为100，之后直接在响应中设置，这是从后端查询到的值，不需要任何参数。其次来解决当前页以及页面大小的问题，这里要做的主要工作是：将定位数据给后端，后端将值传到前端来，传到前端来用什么来展示呢？直接展示到表单里面去
转载
2024-07-13 12:36:34
85阅读
1、Vue是什么Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。易用已经会了 HTML、CSS、JavaScrip
转载
2024-10-18 09:48:38
39阅读
日期选择器日期范围选择器设置默认时间值注意事项value-format=“yyyy-MM-dd hh:mm:ss” 格式化日期选择器 value值格式:default-time="[‘00:00:00’, ‘23:59:59’]"实例：<el-date-picker v-model="searchForm.date" value-format="yyyy-MM-dd hh:mm:ss" @c
转载
2024-05-12 08:06:54
90阅读
最近做一个项目，需要一个带有多选框功能的下拉菜单，还是老规矩，自己封装一个吧。很简单 写完以后打开页面测试，发现已经选中了，但是输入框并没有显示选择的值打开vue开发工具，发现选中的值并没有放入value1中。所以当选中的时候要借助checkbox的change事件，把选中的值手动传入value1中。所以要加一个change事件。点击多选框之后，先判断数组value1中是否存在当前选中数
转载
2024-03-01 14:00:59
183阅读
Element-UI 的 Table 组件很强大，但是我们的需求更强大...简单粗暴的来一发效果图：一、数据驱动传统的拖动效果，都是基于通过 mousedown、mousemove、mouseup 事件来修改删减 dom 节点但 Vue 是一个数据驱动的前端框架，开发时应尽量避免操作 dom而且 Element-UI 的 Table 组件封装得很严谨，直接操
转载
2024-06-14 17:42:42
1308阅读
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、整体思路？二、使用步骤1.标签结构2.初始化数据3.js部分3.1全选时3.2单独选择某一条数据时3.3获取分页数据时总结 前言最近做公司vue项目，有一个需求是实现多选表格跨分页记录选中数据，完成功能后将此记录下来，以便学习 一、整体思路？使用el-table组件封装的select-all和select事件实现
转载
2024-04-02 13:02:45
1121阅读
1、级联选择器（el-cascader）先看一下效果吧，这个是选择的效果，支持多选，根节点禁选这个是回显的效果接下来说一下怎么实现吧~//其中platList为数据源,codeList是绑定选中的值，props为配置选项，clearable可清空（选完之后后面带一个删除的按钮）,handleToChange是选中值后触发的，可以在这个方法中绑定值
<el-cascader :options=
转载
2024-03-26 16:18:43
2555阅读
前言最近一直在跟表格里的多选框做斗争，一开始觉得el-table本身的多选框不满足我的需求，想要自定义el-checkbox来实现，结果发现很多坑，还没解决（主要是数据绑定不同步更新的问题），感觉蛮花时间的，又回头看看el-table有没有方法能完善一下，结果成功了，虽然具体实现过程还是很。。。低级，希望可以借鉴这个寻找更好的解决方案，故此记录页面元素：单选框、输入框、带多选框的表格需求针对页面元
转载
2024-10-08 01:51:33
1878阅读
点赞
目的：实现进入页面显示默认的选中项，在用户重新选择后，将选择的和取消选择的数据提交给后台；这里涉及到一个分页的问题，表格是可分页的表格，所以要存储用户的选项1.element-ui的table表格的多选框默认选中data(){
return{
tableData:[],//table数据
}
},
watch:{
tableData(val){
this.$nextTi
转载
2024-05-01 23:10:37
131阅读
前言最近在开发一款使用了 element-ui 的低代码设计器，在开发的过程当中碰到了一些关于 element-ui 组件本身不合理的地方，并且在百度的基础上自己去阅读了一下 element-ui 的源码，也找出了这些问题的一个解决方案，下面就来看一下问题所在以及解决方法。多选框的min设定为超过1就无法选中第一项问题组件本身存在一点问题，一旦min的值大于当前选中的选项超过2的时候，比方说，预选
转载
2024-04-27 18:55:56
1697阅读
前言：主要是 table 表格框选功能实现功能如下：表格框选功能右键操作功能（删除、查看、编辑）分页功能表头分类筛选功能回显功能（显示默认选中数据）排序功能行禁用不可选功能不说废话，直接上代码，简单粗暴。。。1、组件/*
* @auhor : 开发部-前端组-李鑫超
* @property { tableData : {Array} 表格数据 add v-1.0.0 }
* @property
转载
2024-06-18 08:45:50
141阅读
button按钮button<el-button>Defalut</el-button>type="primary|success|info|warning|danger"<el-button plain>Plain</el-button>type="primary|success|info|warning|danger"<el-button
级联组件-cascader_element-ui 目录 文章目录1、常用属性2、事件3、全加载和懒加载3.1、全加载3.2、懒加载3.3、对比3.3、数据回显问题与解决方案4、应用场景4.1、全加载4.2、懒加载5、美化***后记*** ：内容 已很常用的省市县3级地区数据显示为例，图示：1、常用属性名称类型取值默认值描述value/v-model---级联框选中的数据optionsarray-
转载
2024-10-11 15:31:50
270阅读
elementui复选框组使用与遇到的问题1、复选框组使用2、默认值的设置3、遇到的问题3.1、导致问题的写法3.2、正常可以使用的写法4、事件冒泡的问题 今天有个弹出窗编辑的时候elementui的复选框出了问题，控制台也没有报错，但就是死活选不中，解决后决定写一遍文章描述一下复选框的用法，以及这个问题是怎么导致的。1、复选框组使用// deviceDialogFormData.config默
转载
2024-05-03 13:47:00
877阅读
问题 : 最初做多选功能时发现，当多选的题数超过一个时，选择一个选项那么所有题的该选项都会被选中，这是因为用v-for遍历的时候都绑定了同一个事件。 解决 : 给每一题设置不同的名字，那么他们的选项就不会发生联动了。js 参考博文链接地址：软件：vscode技术：vue + Elementui + 事件绑定需求：多组选择，每组之间互不影响。每组均可多选，第一次单击选中且改变颜色，第二次单击不选中且
转载
2024-03-05 07:12:48
88阅读
1、效果图2、一些思路+碰到的报错（1）row：表格的行数据，选中/取消选中哪行，就是哪行的数据注意：row只能是表格的data属性指定的数组中的数据，放其它数组中数据是无效的（2）selected：true-选中；false-取消选中this.$refs.table.toggleRowSelection(row, selected)（3）在打开弹窗时，需要先让弹窗的visible变为true，再
转载
2024-07-25 08:06:56
2480阅读
在ElmentUI的Table表格组件中，也许你会使用type为selection值的多选框功能，但是此时设置的label属性不生效，不能设置标题名称；有时候我们的需求就是要添加标题名称，那该如何处理呢？当然你可以对其样式做特殊处理，也可以自定义标题，本文将描述如何利用自定义标题来添加多选框和标题名称，特别是在该过程的踩过的雷和填补过的坑。 （一）需求：在Table表格中新增一列用于批量操作
转载
2024-03-29 22:38:12
826阅读
1、需求：1.一个带选择框的具有分页功能的表格
2.根据后端返回的数据回显已勾选的数据
3.已勾选的数据不会因为分页而丢失
4.收集勾选中的数据向后端发送请求2、效果展示3、html代码部分<el-table
:data="tableData"
ref="product"
style="width: 100%"
stripe
转载
2024-03-28 10:01:30
1561阅读
