精华内容
下载资源
问答
  • vue多选框
    千次阅读
    2021-08-09 13:58:43
    • 太坑了,太坑了,太坑了,直接上代码
    <template>
      <div>
        <div :style="{ borderBottom: '1px solid #E9E9E9' }">
          <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"> Check all </a-checkbox>
        </div>
        <br />
        <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
        <button @click="sub">提交</button>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          checkedList: [],
          indeterminate: true,
          checkAll: false,
          plainOptions:[
      { label: 'Apple', value: '1' },
      { label: 'Pear', value: '2' },
      { label: 'Orange', value: '3' },
    ],
          noCheck : false,
        };
      },
      methods: {
        onChange(checkedList) {
              if (checkedList.length!==0) {
          this.$set(this, 'noCheck', false);
        }
          this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length;
          this.checkAll = checkedList.length === this.plainOptions.length;
        },
        onCheckAllChange(e) {
              if (e.target.checked) {
            this.$set(this, 'noCheck', false);
            const arr = [];
            this.plainOptions.forEach(res => {
                if (!res.disabled) {
                    // 全选时,将选项中的value值传给 checkedList
                    arr.push(res.value);
                }
            });
            this.$set(this, 'checkedList', arr);
        } else {
            this.$set(this, 'checkedList', []);
    
        }
          Object.assign(this, {
            indeterminate: false,
            checkAll: e.target.checked,
          });
        },
        sub(){
          console.log(this.checkedList);
        }
      },
    };
    </script>
    
    
    更多相关内容
  • vue多选框

    千次阅读 2021-09-17 18:35:26
    1、画出单选组 每个单选是u-checkbox,这一组外边用u-checkbox-group包裹起来 <u-checkbox-group @change="checkboxGroupChange" :size="size" :width="width" :wrap="wrap" :max="max" :...

    一、达到的目的
    在这里插入图片描述
    二、所做的工作
    1、画出单选框组
    每个单选框是u-checkbox,这一组外边用u-checkbox-group包裹起来

    	<u-checkbox-group @change="checkboxGroupChange" :size="size" :width="width"
    				:wrap="wrap" :max="max" 
    				:activeColor="activeColor"
    				>
    			    <u-checkbox @change="checkboxChange"
    				    v-model="item.checked" v-for="(item, index) in bigList" 
    				    :key="index" :name="index"
    				    :shape="shape"
    				    :disabled="item.disabled"
    					>
    					<view class="oneItem" @click="toInformation(index)">
    			        </view>
    			    </u-checkbox>
    				
    			 </u-checkbox-group>
    

    2、全选框
    全选框就是一个单选框

    <u-checkbox @change="testT" v-model="allCheck.checked" >{{allCheck.name}}</u-checkbox>
    

    3、数据结构
    下面这是全选框的数据结构

    allCheck : {
    				name : '全选',
    				value : 'all',
    				checked : false	
    			    },
    

    单选框的数据结构就不用说了,只是在bigList原始数据的item里加个checked

    4、连锁反应
    第一个连锁反应:点击完所有单选框,全选框应该是选中状态;没点完所有单选框,全选框为未选中状态。
    解释一下下边函数的逻辑吧,这个函数单选框组的函数,如果点击长度和bigList单选个数一样长,就设置allCheck的checked属性为true。否则的话设置为false

    checkboxGroupChange(e){
    			this.choseDiKuai=e;
    			console.log(this.choseDiKuai)
    			if(e.length===this.bigList.length){
    				this.$set(this.allCheck,'checked',true);
    				}else{
    				this.$set(this.allCheck,'checked',false);
    				}
    			},
    

    第二个连锁反应:点了全选框,所有单选框都是选择状态,没点单选框,全选框为未选中状态。
    这个函数是全选框的函数,逻辑是这样的,如果取消全选框,就把每个单选框给设置为checked设置为false,并且全选框的checked为false,反之都设为true;

    testT(e){
    			if(!e.value){
    				this.bigList.map(item => this.$set(item, 'checked', false));
    				this.$set(this.allCheck, 'checked', false);
    				this.choseDiKuai=[];
    				}else{
    				    this.bigList.map(item => this.$set(item, 'checked', true));
    				    this.$set(this.allCheck, 'checked', true);
    				    this.choseDiKuai=[];
    				    for(var i=0;i<this.bigList.length;i++){
    				    	this.choseDiKuai[i]=i;
    				    }
    				}
    			},
    

    5、测试一下是否成功
    成功,整个流程没有任何问题。

    展开全文
  • 1.引用element组件多选框组,checkList为提交后台数据得数组,tableData为数据源 2.初始化tableData集合 3.循环遍历需要显示得值 4.在多选框组上添加chang事件 tableData: [{ date: '2016-05-02', name: '王小虎'...
  • vue多选框怎么样关闭后表格的选择也取消呢?怎么样让点击deleteMaterial的时候让element表格多选的也取消选中?
  • vue的实际开发过程中,我们如何将以选中的值直接渲染到页面中,这次主要说的是多选框和下拉列表的实现: 测试多选渲染: <input type=checkbox name=hobby :value=item.id :checked=loopsss.indexOf(item...
  • vue 多选框 实现多选 返回选中的数字值vue 多选框 实现多选 反选 返回选中的数字值 vue 页面代码 <el-col> <el-form-item label="labal名称" > <el-checkbox v-model="checked" @change=...

    vue 多选框 实现多选 返回选中的数字值vue 多选框 实现多选 返回选中的数字值

    vue 页面代码

    <el-col>
              <el-form-item label="labal名称" >
              <el-checkbox  v-model="checked" @change="changeAllChecked()">全选
              </el-checkbox>
                  <div style="float:none">
                    <el-checkbox label="1" v-model="checkedCities">地市级</el-checkbox>
                    <el-checkbox label="2" v-model="checkedCities">分子公司级</el-checkbox>
                    <el-checkbox label="3" v-model="checkedCities">网公司级</el-checkbox>
                  </div>
              <span>选择的值为:{{checkedCities}}</span>
              </el-form-item>
    
    	data() {
    		checked: false,
    		checkedCities:[],
    		checkedArr: ["1", "2", "3"],
    	},
    	methods:{
    		  changeAllChecked: function() {
    			if (this.checked) {
    				this.checkedCities = this.checkedArr
    			} else {
    				this.checkedCities = []
    			}
    		},
    	}
    

    运行效果:
    没有选中效果
    选中个别的效果
    全选效果

    展开全文
  • 问题:elementUI多选框,一维数组,如官网例子那样数组内元素为字符串时正常使用,但在实际情况多选框的元素为对象,为对象时,默认选中不显示,实际上是选中了,但是不显示 ...
  • vue实现多选框(复选框)

    千次阅读 2022-04-17 20:22:35
    <template> <table class="t1"> <tr class="tr1"> <td> <input type='checkbox' :checked="clsAll.length === pojectClsAll.length" @click='checkedAll()'>... .
    <template>
        <table class="t1">
                    <tr class="tr1">
                        <td>
                            <input type='checkbox' :checked="clsAll.length === pojectClsAll.length" @click='checkedAll()'>全选
                        </td>
                        <td v-for="(cls,index) in pojectClsAll" :key="index">
                            <input type='checkbox' :checked="clsAll.indexOf(cls.cid)>=0" @click='checkedOne(cls.cid)'>{{cls.cname}}
                        </td>
                    </tr>
                </table>
    </template>
    data(){
            return{
                clsAll:['0','1','2','3','4','5','6','7','8','9','10','11','12','13'],
                pojectClsAll:"",
                isCheckedAll: false
            }
        },
    methods:{
            checkedOne (id) {
                let idIndex = this.clsAll.indexOf(id)
                if (idIndex >= 0) {
                // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
                this.clsAll.splice(idIndex, 1)
                } else {
                // 选中该checkbox
                this.clsAll.push(id)
                }
                console.log(this.clsAll);
            },
            checkedAll () {
                this.isCheckedAll = !this.isCheckedAll
                if (this.isCheckedAll) {
                    // 全选时
                    this.clsAll = []
                    this.pojectClsAll.forEach(function (fruit) {
                    this.clsAll.push(fruit.cid)
                    }, this)
                } else {
                    this.clsAll = []
                }
                console.log(this.clsAll);
            },
    }

    效果:

     可以通过console.log()来打印数组

    1.多选效果

    全选效果 

    感谢观看,感觉有帮助的感谢大家点赞收藏,不懂的可以私信,大家一起来解决问题!! 

     

     

    展开全文
  • vue 自定义多选框组件

    千次阅读 2022-02-17 16:23:47
    自定义多选框组件 <template> <div class="checkBox"> <input v-model="isInherit" @click="handlerChecked" :style="`width: ${width}px; height: ${height}px;`" type="checkbox" id="inp" />...
  • Vue多选框传值问题

    2022-06-24 10:00:45
    Vue多选框传值问题,怎么样在两个都选的情况下,无传0,有传98到接口呢
  • antd vue Checkbox 多选框

    2022-05-29 16:18:33
    先看官网例子 <template> <div> <div :style="{ borderBottom: '1px solid #E9E9E9' }"> ...a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">...
  • vue实现多选框全选功能。
  • vue-多选框设置为单选框

    千次阅读 2022-04-08 16:24:15
    不要使用@selection-change,会有渲染问题。 table是封装过的。 <t-table @select-all="selectAll" @select="selection" ...selectAll() { // 当做清空来用,单选就没有全选功能 let elTb = this.$refs....
  • vue点击一个多选框导致所有多选框都选中
  • vue这种多选框处理(multiselection)
  • vue、Checkbox多选框、Checkbox属性事件方法、vue Checkbox所有多选框样式、vue Checkbox多选框全部属性事件方法何时使用代码演示基本用法全选不可用受控的checkboxCheckbox组布局API属性Checkbox事件Checkbox Group...
  • Angular/Vue多选框勾选问题

    千次阅读 2021-01-16 09:32:09
    功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交发请求。先查看效果:可以看到初始页面的此用户被赋予的角色只有一个“核算经办”,如图1...
  • vue多选 多选框

    千次阅读 2019-09-26 17:27:28
    vue多选 多选框
  • 导语:Vue中单下拉框开发起来非常简单,直接select包裹一个带v-for的option即可但是当我们想做个带多选的下拉框该怎么办呢?最简方法是什么?比如下面这个图:如果网上搜的话,搜的是一堆带children的 ,那种是遍历tree的...
  • vue多选框搜索

    2021-02-07 11:02:57
    <el-form-item label="行为类型" prop="type" class="checkbox-type"> <el-checkbox-group v-model="queryParams.types" size="medium"> <el-checkbox v-for="item in typeOptions" :key="item....
  • Vue多选框的绑定

    2018-12-10 19:52:00
    vue是通过数据劫持结合发布者-订阅者模式的方式来做数据绑定的,在数据变动时发布消息给订阅者,触发相应的监听回调。model层与view层同步,两者之间任意一个发生变化都会同步更新到另一者。 经常的应用场景就是...
  • Vue单选框多选框输入绑定 此处绑定的是value <div> <form> <input type="radio" value="1" v-model="e" />1 <input type="radio" value="2" v-model="e" />2 </form> {{e}} <...
  • vue选框点击获取值

    千次阅读 2022-03-28 15:29:05
    选框获取值
  • 1-单选框的值绑定 复选框-选择框类似
  • 最近在重构一个复选框组件,原型是select2这个jQuery插件, 有兴趣的可以去搜下,封装的很好,但是并不能满足业务所有需求,最要命的是jquery插件这种以dom驱动数据的库,并不能和vue和angular这种数据驱动dom的框架...
  • vue修改多选框回显

    千次阅读 2020-05-12 20:45:01
    代码 <template>...-- 搜索的界面 --> <el-form :inline="true" :model="searchFormModel"> <el-form-item label="请输入商品名称"> <el-input v-model="searc
  • vue 多选框 全选

    2020-01-06 15:39:10
    <template> <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;"> // 全选按钮的部分 <Checkbox // value来判断是否点亮全选框 :val...
  • 添加多选框
  • 目前我所做的项目中用到了vue的一个组件库----ant-design,是目前比较流行了三大组件库之一在应用到其中的标签时发现了其中的一个bug代码如下:拥有一定js基础的程序员都知道,在原生的js中,多选框的书写方式如下...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,533
精华内容 11,813
关键字:

vue多选框