今天有空整理了之前项目中用到的树形结构外加多选框,并实现一定的逻辑,比如全选,单选,全选和单选之间的联动之前也在网上搜到过有关此功能的实现,于是我也就参考着写了一个,放在了自己的博客里,就当是给自己做了一个笔记,嘿嘿嘿~~~下面我直接贴代码下面是menu.vue的代码<template>
<div style="width: 600px;">
<Tree
一、多选框单选>
@select-all="onSelectAll" 全选是触发的事件
@selection-change="selectItem" 单个去勾选时触发的事件(勾选有变化时触发)
@row-click="onSelectOp" 点击那一行数据触发的事件
ref="multipleTable"
ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对
转载
2024-06-09 19:33:30
1168阅读
在用vue开发项目过程中,我们总是避免不了的会使用到elementUI,它里面提供的一些组件都为我们的开发带来了很大的便利,但是,当有时候我们需要使用这些组件的同时又要修改下组件的UI样式的话,我们该怎么去做呢?接下来我们来看下。 如上图所示,elementUI的多选框是方框的,那么如果我们需要一个圆形的选择框的话,怎么办呢,这个时候我们第一时间想到的应该就是border-radius:
转载
2024-03-28 08:01:40
148阅读
问题 : 最初做多选功能时发现,当多选的题数超过一个时,选择一个选项那么所有题的该选项都会被选中,这是因为用v-for遍历的时候都绑定了同一个事件。 解决 : 给每一题设置不同的名字,那么他们的选项就不会发生联动了。js 参考博文链接地址:软件:vscode技术:vue + Elementui + 事件绑定需求:多组选择,每组之间互不影响。每组均可多选,第一次单击选中且改变颜色,第二次单击不选中且
转载
2024-03-05 07:12:48
88阅读
Element UI 提供 checkbox 默认实现多选或者全选全不选择,RadioButton 实现单项选择功能,但是如果是一个列表的情况下,使用checkbox 的样式进行单选的情况还是很多的,像 el-table 中,checkbox 可以设置为单选或者多选的任何形式,因此记录一下checkbox 改造成单选的实现思路和方法。我想多研究研究再写,因为中间遇到了很多问题,最后用了
转载
2024-03-26 08:23:47
381阅读
应用场景:当用户在众多条数据中仅需要选择一部分数据进行操作的时候前端需要做的支持 需求背景:客户需要选择若干条数据进行存储,但由于数据众多进行了分页处理因此需要切换分页的时候保存之前已选的数据并进行回显,可以在任意一页点击(全选/取消全选)按钮,此时所有其他页面也相应全选或者非全选,默认所有数据全选状态。大致思路:所有页面首先想到需求其次应该想到前后端交互,因为有全选状态,因此传递参数 id 组成
转载
2024-05-30 13:31:09
2026阅读
目的:实现进入页面显示默认的选中项,在用户重新选择后,将选择的和取消选择的数据提交给后台;这里涉及到一个分页的问题,表格是可分页的表格,所以要存储用户的选项1.element-ui的table表格的多选框默认选中data(){
return{
tableData:[],//table数据
}
},
watch:{
tableData(val){
this.$nextTi
转载
2024-05-01 23:10:37
131阅读
这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除。实现效果:el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性,所有明显不支持。解决思路(从el-select 的角度来考虑,其他组件组合的情况暂不考虑)想要实现某些选项是不删除,1、需要tag 不可删除,2、options 不可选择option
转载
2024-04-07 08:25:19
392阅读
一、要做上面这种效果,首先要了解全选框中indeterminate 状态和v-model的变量的关系 参考 -Dayer-:<el-checkbox :indeterminate="isIndeterminate" v-model="selected" @change="handleCheckAllChange($event, 'hd')">华东</el-checkbox>
转载
2024-03-01 14:07:19
218阅读
在公司实际开发中,会经常遇到复选框全选、多选、统计选中个数的情况,所以总结研究了一些大神的帖子,汇总学习一下!1.统计被选中复选框的个数 2.点击复选框,执行对应函数 3.获取复选框的状态 4.全选、取消全选动作1.利用原生JS代码1)统计被选中复选框的个数checkbox要是属于同一组的,在复选框的属性内name=”mm”属性要写一致;这样可以通过下面代码获得同一组复选框var names
转载
2024-01-16 01:24:49
108阅读
最近做一个项目,需要一个带有多选框功能的下拉菜单,还是老规矩,自己封装一个吧。很简单 写完以后打开页面测试,发现已经选中了,但是输入框并没有显示选择的值打开vue开发工具,发现选中的值并没有放入value1中。所以当选中的时候要借助checkbox的change事件,把选中的值手动传入value1中。所以要加一个change事件。点击多选框之后,先判断数组value1中是否存在当前选中数
转载
2024-03-01 14:00:59
183阅读
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阅读
一、多选框基础 多选框(Checkbox)由 选择点 和 提示文字 两部分组成 XML中定义组件:ohos:marked:true表示选中,false表示未被选中ohos:check_element:传数据是图片,表示设置多选框的样式<?xml version="1.0" encoding="utf-8"?>
<Dir
转载
2023-06-19 15:51:32
88阅读
问题今天发现了一个elment el-table toggleRowSelection事件无法默认选中的情况, 我的需求可能需要对内容进行一部分修改,比如:我默认选中的内容必须得通过接口或者其他方式来获取,然后再默认选中解决方式:// 这里通过循环选中列表multipleSelection,然后从所有列表tableData中找到需要选中的项来帮助选中,直接使用选中列表来设置可能会出错
toggle
转载
2024-03-03 15:26:41
1937阅读
最近在开发工业品超市的后台系统,遇到一个需求,就是实现在一个table表格中多选数据,由于table表格中的数据较多,所以要分页获取,因此现在的需求变为:如果在跨页的table表格中跨页选择数据我一直以为elementUi中的table是不能实现此功能的,结果百度后发现,竟然是支持的。效果图: 表格第一页选中2条数据: 表格第二页选中1条数据 这样返回到第一页的时候,第一页选中的两条数据还是勾选的
转载
2024-04-17 08:56:58
2734阅读
<template> <div class="demo"> <div> <ul> <li v-for="(item, index) in questionList" :key="index" style="margin-top: 20px; padding: 20px; border: 1px solid #666">
原创
2022-05-27 00:06:19
1256阅读
需求描述:做项目的时候遇到一个需求,表格中带多选框,表格所选的数据行可以显示(本人用的tag显示),并且显示的后的数据如果取消则表格也会对应的取消掉。PS:如果不是必要用表格并且不带分页的话很好实现,element-ui自带了穿梭框组件可以实现。解决思路:我用了一个map集合来存储目前所选的数据(因为要分页并且需要回显)map的键用来保存当前页,值用来保存当前页已选的数据。当选择表格中某一行时,触
转载
2024-02-20 17:03:17
896阅读
最近在做项目的时候遇到一个问题,使用的是table组件中的多选,需求要求的是,列表数据除了状态为待审核的可选之外,其他状态前的复
原创
2021-12-04 15:04:17
3316阅读
select 元素可创建单选或多选菜单。当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 <select> 表单数据提交给服务器时包括 name 属性。一、基本用法:<select>
<option value ="volvo">Volvo</op
一、使用场景首先我们要知道为什么封装一个有el-dialog、el-table、el-select的组件 大家在开发后台管理项目中,肯定会遇到这样的一种情况比如:我们项目中存在用户管理和角色管理两个功能模块 我们在去添加用户的时候需要去绑定角色,且绑定的角色是可以多选的 如下图:大多数我们是不是会去这样写 那么这样写有问题吗,当然是莫得问题了。可是如果在选择角色的时候,我想看这个角色的描述、或者是
转载
2024-11-01 08:56:09
1701阅读