精华内容
下载资源
问答
  • 提要:项目中之前都是一层checkbox选择,书写比较简单。...图一说明:点击灰色背景区域的父级地址名称,紧邻的下方白色背景的子集订单被选中。点击全选按钮所有checkbox都选中。图2.3说明:图2是双层v-...

    提要:项目中之前都是一层checkbox选择,书写比较简单。这次项目中遇到了多层。虽说逻辑不复杂,但是书写中也遇到问题,并且对watch有新的理解。本文不啰嗦css和布局内容。主要描述双向绑定和数据的获取。

    第一步:看静态页面最终效果图和HTML结构布局。

    图一说明:点击灰色背景区域的父级地址名称,紧邻的下方白色背景的子集订单被选中。点击全选按钮所有checkbox都选中。

    图2.3说明:图2是双层v-for循环。每个子集的input绑定了相同的v-model值。并且绑定了value值。图三绑定了v-modell并且绑定了事件change.

    第二步:数据data声明和重构。

    因为我们的子集v-model值是动态生成的,所以我们再请求到列表数据todolist以后需要对dataModel进行结构重组。可以把每个子集列表绑定的value值对应放入dataModel中。

    重组代码如下:

    var len =this.todolist.length;for (var i = 0; i < len; i ++) {var item1 ={value1: []};

    this.dataModel.push(item1);

    }

    第三步,监听dataModel中双向绑定的数据变化,通过变化去控制父级是否选中,全选是否选中,选中的订单数量总数。

    代码说明:此处的dataModel是数组里面嵌套数组对象,所以我们需要深度监听。深度监听的固定语法结构

    *****:{

    handler(){

    /*需要做的事情巴拉巴拉巴拉*/

    },

    deep:true

    }

    同时需要说明自己当时进入误区的一点,监听的这么多data里面建议只监听子集内容dataModel,,不要监听其他的checkbox 绑定的v-model值,否则容易出现死循环。嘎嘎嘎嘎,我就卡死了。

    watch:{

    dataModel:{

    handler (val) {

    this.allValue = [];

    //控制父级

    for(var i=0;i

    if(!this.todolist[i]){

    return false;

    }

    if(val[i].value1.length == this.todolist[i].TrtplpomainGroupByList.length){

    this.allValue.push(i)

    }

    }

    this.count();

    //控制全选按钮

    if(this.allValue.length == this.todolist.length){

    this.resultSele = true;

    }else{

    this.resultSele = false;

    }

    },

    deep:true

    },

    },

    第四步,点击父级的按钮,触发的事件。和计算总数的方法。其中通过列表index索引号找寻数据

    //计算选中的总数

    count(){

    this.totalNum = 0;

    for(var i=0;i

    this.totalNum += this.dataModel[i].value1.length;

    }

    },

    //父级点击

    changeSele(value,index){

    var check = false;

    for(var i=0;i

    if(this.allValue[i] == index){

    check = true;

    }

    };

    if(check){

    this.dataModel[index].value1 = [];

    for(var i =0;i

    this.dataModel[index].value1.push(value[i]);

    };

    }else{

    this.dataModel[index].value1 = [];

    }

    },

    第五步点击全选按钮的方法。不论是否选择了,先清空dataModel值,然后再根据全选按钮是否选中resultSele的值来重新给dataModel赋值。因为双向绑定,所以dataModel中只要有值,input的就响应选中。

    //点击全选按钮

    resultSeleF(){

    var len = this.todolist.length;

    this.dataModel = [];

    for (var i = 0; i < len; i ++) {

    var item1 = {value1: []};

    this.dataModel.push(item1);

    };

    if(this.resultSele){

    for (var i = 0; i < len; i ++) {

    for(var j=0;j

    var ctx = this.todolist[i].TrtplpomainGroupByList[j];

    this.dataModel[i].value1.push(ctx);

    };

    }

    }

    }

    以上为,多层input选择的vue的书写方式。如果有不对的地方欢迎指正。代码写的不是特别好,哈哈哈哈。一下图片为最终效果gif图。为了个图做了好久。菜鸡的我飘过~~~~~

    展开全文
  • 实现省市区三级多选联动,可任选一个省级、市级、区级,加入已选框,也可以在已选框中删除对应的区域。 选择对应仓库,自动勾选仓库对应的省,取消就反选 选择同样地区,选择省级或市级,若该对象下面的市级或区级...

    博客地址:https://ainyi.com/23

     

    示例

    示例

     

    介绍

    • 实现省市区三级多选联动,可任选一个省级、市级、区级,加入已选框,也可以在已选框中删除对应的区域。
    • 选择对应仓库,自动勾选仓库对应的省,取消就反选
    • 选择同样地区,选择省级或市级,若该对象下面的市级或区级已有选择,就自动合并为一个省级或市级:
    例如:
    已选择:广东省广州市荔湾区
    点击加入:广东省广州市
    最后显示:广东省广州市
    广州市已被选择,对应市级的区将不显示,只显示对应的市
    
    同理:选择广东省,也将下面已选择的所有的市或区合并成一个省级,只显示这个省级

    设计

    • 拆分组件:仓库和省市区框作为父组件
    • 三个区域框和一个已选框相似,复用一个组件 transfer,放在省市区框父组件中。

    省级 transfer、市级 transfer、区级 transfer

    数据展示

    • 父组件从数据中获取省级数据传递到子组件 transfer 展示出来。

    • 当选中的某个省,则传递对应省级 id 到父组件,根据 id 查找对应的市级并过滤,并且使用 ref 控制市级的 transfer 组件的 father 属性,就是在市级 transfer 组件里也有对应的省级对象。

    • 多选情况,只保留最后选择的父级(省级/市级)查找出对应的子级(市级/区级)

    • 市级和省级组件的 father 对象是 {id:"", text:""}

    • 市级组件的 father 保存着省级的 id 和名称。

    • 区级组件的 father 保存着省市的 id 和名称(以-分割,如:{id:"10001-100145815", text:"广东省-河源市"})

    • 省市区都分别设置一个过滤数组,用来过滤已选的区域

    区域搜索

    • 监听搜索框的值,重新获取区域数据,再通过 filter 筛选出搜索的数据

    点击添加进已选:

    • 省级直接点击添加选中的省份,直接传递该省的对象进已选数组。并将选择的省级 id 添加进省级过滤数组。然后判断已选区域中是否有该省级一下的市级,有则删除,合并成一个省级,并在省级过滤数组删除掉这个市级 id。

    • 市级点击添加选中的城市,选中的城市对象数组,遍历拼接上当前的 father 对象,最终保存的形式:{id: "10005-545132025515", text: "广东省-广州市"},也要判断当前市级下是否有对应的区级,有则合并,并在区级过滤数组删除这个区级 id。

    • 区级点击添加选中的区域,拼接上当前的 father 对象,最终的保存的形式:{id:"10004-15613610-25156165156321", text:"广东省-河源市-龙川县"},

    • 子组件 transfer 中区域数据 districtList 需要放在监听器里,当点击省级或市级,自动监听更新市级或区级的列表

    从已选中删除

    • 选中已选区域的数据,传递到父组件,同样的道理,删除过滤数组对应的 id,并刷新对应的区域数据

    监听仓库与区域对应

    • 找出选中仓库的对应省级 id,已选区域有该省则过滤,无则添加,当点击取消勾选的时候,也实时将已选区域中对应的省级删除掉。

     

    相关连接

    转载于:https://www.cnblogs.com/ainyi/p/9335647.html

    展开全文
  • 使用源码地址项目推荐 有这样一个需求 使用iview组件的table时,在第一列添加选择框,进行批量操作 1. 方式 vue部分 <Table stripe ref="tables" :data="tableData" :columns="columns" @on-select...

    有这样一个需求
    使用iview组件的table时,在第一列添加选择框,进行批量操作

    1. 方式

    vue部分

    	<Table
    	   stripe
    	   ref="tables"
    	   :data="tableData"
    	   :columns="columns"
    	   @on-select="handleSelectRow()"
    	 />
    

    js部分----columns
    columns第一列如下:

     columns: [
            {
              type: 'selection',
              width: 60,
              align: 'center'
            }
    	]
    

    js部分----@on-select

    	// 多选
        handleSelectRow () {
          let ids = [];
          this.$refs['tables'].getSelection().map(item => {
            ids.push(item.id)
          })
          // this.selectIds = ids
          console.log(ids)
          return ids
        },
    

    2. 使用

    在需要用的地方直接调用就可以

    	//参数,数组
        var ids = this.handleSelectRow()
    

    源码地址

    传送门
    开源项目,持续不断更新中,喜欢请 Star~

    项目推荐

    IT-CLOUD :IT服务管理平台,集成基础服务,中间件服务,监控告警服务等

    展开全文
  • 最近在做一个项目,项目的后端是地址:...前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶 在项目中使用的是 element ui 组件

    最近在做一个项目,项目的后端是地址:https://github.com/wangyuanjun008/wyj-springboot-security.git
    前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶
    在项目中使用的是 element ui 组件库,在使用select多选下拉框时,编辑页面不知道怎么为其赋值回显数据。
    下拉框的代码如下:

    <el-form-item label="可选角色">
        <el-select v-model="commonForm.roles" multiple placeholder="请选择">
            <el-option v-for="item in rolesItems" :key="item.id" :label="item.text" :value="item.id" ></el-option>
        </el-select> 
    </el-form-item>
    

    猜想:
    多选下拉框是多条数据,将数据放到数组里面,将数据赋值给多选下拉框,就会有效果。

    验证:
    将多选数据以数组的形式从后台返回到前台,后台字段类型是List
    返回结果如下:

    这里写图片描述

    查看页面多选回显数据成功

    参考地址: https://github.com/wangyuanjun008/wyj-vue-security/blob/master/src/view/user/user.vue

    展开全文
  • Vue实现树形下拉框

    万次阅读 热门讨论 2018-11-25 11:15:58
    Vue自身并没有实现树形下拉框的组件,找了很多资料,最后在Github上找了个插件vue-treeselect,功能还是比较全的,模糊搜索、多选、延迟加载、异步搜索、排序,自定义、Vuex支持等等。这些功能在官网上都有详细的...
  • VueTreeselect出现unknown

    千次阅读 2018-09-28 18:30:51
    最近在项目中需要做一个选择框,但是需要的是有层级嵌套的选择框。由于用的是vue + element-ui,在官方文档里并...vue-treeselect是一个多选组件,具有对Vue.js的嵌套选项支持。是一个选择框,但是选项是树形的呦...
  • 在jquery中有很多好用的插件,比如select2, 单选,多选的功能都具备。 本文探讨一下在vue中的实现级联选择器,自己在项目中碰到过以下两种情况的后端数据,查阅资料后也证实了这两种数据的合理性: 预览地址 github...
  • 树形选择器VueTreeselect

    2021-01-20 09:37:45
    官网地址:vue-treeselect 是一个多选组件,具有对 Vue.js嵌套选项支持。 使用方式官网解释的很清楚,无非安装>引入>注册组件>使用组件,并且有HTML与JS两部分可以参考。这里主要对之前自己工作中使用到的...
  • 必选参数,上传的地址 string multiple 是否支持多选文件 boolean show-file-list 是否显示已上传文件列表 boolean true on-remove 文件列表移除文件时的钩子 function(file, fileList) on-success ...
  • vue+elementui上传文件 1.上传文件代码以及解释 <!--上传文件模板 --> <template> <!--action:必传参数,上传的地址,类型为String headers:设置上传头部,类型为Object,一般为 Authorization: ...
  • :action,必选参数,上传的地址,String类型。 :accept 文件上传类型 drag是否启用拖拽, :limit文件或者图片数量限制 multiple 是否支持多选文件 2、常用方法介绍 1、在实现自定义上传的:auto-up...
  • cat-table-select Github 地址 前言 之前自己动手做了个基于Element树选择器 cat-tree-selec ,于是就照着之前的思路又封装了个表格选择器。目前已经实现了单选,多选,分页,自定义列,可搜索等功能。 效果预览 ...
  • 基于VUE的WEB组态-支持拖动

    千次阅读 2019-07-18 16:10:18
    源码:github地址(https://github.com/phynos/WebTopo) 功能列表 面板标尺 拖曳添加组件 位置拖动 拖动位置磁性吸附 控制大小(8个控制锚点) 选中效果 层叠控制 面板比例缩放 CTRL+C/V复制黏贴 CTRL+A...
  • 本文是Vue实战系列的第六篇文章,主要介绍Falcon项目中通用 Table 组件的开发和使用 。Falcon项目地址:https://github.com/thierryxing/Falcon 通用 Table 组件 TableBox 随着业务的发展和功能的增多,我们发现...
  •  Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。目前在github上已经有2600多个Star,...
  • element-ui在vue中el-upload上传组件提交binary的使用 在文档中可得到如下属性 Attribute 参数 说明 类型 可选值 默认值 action 必选参数,上传的地址 string — — headers 设置上传的请求头部 object —...
  • 1.仿照element-ui官网贴出的demo,table表格多选,选择多行数据时使用 Checkbox。但是无法获取this.multipleSelection的值。相关代码如下:男女个人团队电话: {{ scope.row.stel }}邮箱: {{ scope.row.smail }}地址:...
  • vue-treeselect是一个多选组件,功能强大界面美观,支持模糊匹配异步加载等,方便封装。 官网地址:https://www.vue-treeselect.cn/ <template> <TreeSelect ref="tagSelectRef" .
  • vue+elementUI的文件上传和文件下载

    千次阅读 2020-01-16 15:52:49
    项目需求: 一个功能可以导入表格数据,还有模板提供下载参考 ...必选参数,上传的地址 multiple 是否支持多选文件 limit 最大允许上传个数 on-exceed 文件超出个数限制时的钩子 http-request 覆盖...
  • 1-项目介绍.mp4 2-环境配置及目录结构.mp4 3-商品列表页的布局.mp4 4-商品列表套数据.mp4 5-商品页组件.mp4 6-商品加入购物车.mp4 7-购物车商品删除.mp4 8-购物车小球效果.mp4 ...14-收货地址及发票信息.m...
  • 需要出一份在线面试的小系统,找了一圈,好像没有开源实现,基于Vue2写了一个,主要功能:   在线出卷,支持链接分享,小程序码扫描微信直接答题; 自动结算分数; 支持题型:单选,多选,填空和简单题; ...
  • 1、首先图片上传是需要有服务器支持的,这里我们用node在本地起一个服务,模拟服务器接收上传图片并保存,再通过img标签的url链接拿到服务器的图片地址。 2、多文件上传在前端只需要在类型为file的input的属性中...
  • 1.表单中GET和POST两种提交方式的不同? Get:速度快,安全性低 通过浏览器地址栏传值,不支持中文 最多支持2000个字符,浏览器地址栏格式为key=value&...input="checkbox" 多选 input="radio" 单
  • 列表多选效果图 开始废话 开发背景 众所周知,大部分企业的管理后台的开发离不开权限管理,一般来说,我们会分析各种权限把他们量化为资源,然后分配到各个角色/部门中,然后再给用户赋予各种角色或者挂载到各个...
  • 前端用vue+bootstrap,需求是做可多选下拉框。 首先附上该插件的下载地址。 bootstrap-select开源地址:https://github.com/silviomoreto/bootstrap-select 要使用该插件在引入jquery.js和bootstrap.js后还需要...
  • 多选可查询,本来想用elementui树图组件,但是elementui树图搜索父节点却没展示子节点,于是在之前改过elementui组件一波三折后直接自己上手写了个组件,本组件树还是引用了elementui的树图组件,因此请在vue项目...
  •   在使用vue+element开发的时候由于项目需要,需要使用element日期选择器里面的支持多选以及跳选的日期选择器。   就是这货: code: 它可以支持跳选,还是一个比较实用的日期选择器: 问题   在使用过程...
  • CTRL+A多选 完成 鼠标框选 完成 DELETE删除(支持删除多个) 完成 样式配置(文字、大小、位置、边框、颜色、旋转) 完成 组件继承体系 完成 DOM组件(文字、图片) 完成 canvas组件(圆形、三角形、...
  • wl-gantt出现的背景就是笔者在公司的Vue项目中使用B***Gantt插件所受到的巨大伤害:基于extjs(对于17年入行的我来说没听过)、不提供开发文档、没有中文资料、源码加密,开发全靠打印实例找属性。 wl-gantt是一个...

空空如也

空空如也

1 2
收藏数 30
精华内容 12
关键字:

vue地址多选

vue 订阅