精华内容
下载资源
问答
  • vue多选框选中多个
    2022-08-11 16:30:39

    vue实现多选框全选功能。如下,勾选时表示事情已处理完。

    html部分

    <div>
        <ul>
          <li v-for="(todo, index) in todoList" :key="index">
            <input type="checkbox" v-model="todo.done">
            {{todo.title}}
          </li>
        </ul>
         全选<input type="checkbox" v-model="allDone">
      </div>
    

    可以直接用计算属性computed来实现

    data() {
        return {
          todoList: [
            { title: "吃饭", done: false },
            { title: "睡觉", done: true },
          ],
        };
      },
    computed: {
        allDone:{
          get: function() {
            return this.active === 0;
          },
          set: function(val) {
            return this.todoList.forEach(todo => {
                todo.done = val;
            });
          }
        }
      },
    
    更多相关内容
  • 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 = []
    			}
    		},
    	}
    

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

    展开全文
  • vue实现多选框(复选框)

    千次阅读 2022-04-17 20:22:35
    { let idIndex = this.clsAll.indexOf(id) if (idIndex >= 0) { // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态) this.clsAll.splice(idIndex, 1) } else { // 选中该checkbox this.clsAll.push(id) }...
    <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多选 多选框

    千次阅读 2019-09-26 17:27:28
    vue多选 多选框

    vue多选 多选框

    展开全文
  • 例如:点击一即所有的多选框选中了,出现的情况有以下几种; 第一种情况:v-model 绑定的值应该是数组的形式,结果写成了字符串的形式。 第二种情况:没有写label值 ...
  • vue点击一个多选框导致所有多选框选中
  • vue的实际开发过程中,我们如何将以选中的值直接渲染到页面中,这次主要说的是多选框和下拉列表的实现: 测试多选渲染: <input type=checkbox name=hobby :value=item.id :checked=loopsss.indexOf(item...
  • 验证可行
  • 点击选中和取消选中--最多仅可选中 (1)标签:默认状态 (2)展开状态 (3)确认状态 二、代码部分 //templete 内容领域 //未选择标签时展示 //已有选择标签展示 {{item.labelName}} //弹出的选择 ...
  • 大大们用vue怎么做。复选框选中,就是点击四其中一,只有一变,其他的不变。无语啊,必须三十
  • vue选框选中全选中了 在业务开发中,使用了checkbox-group组件,发现点击其中的一选项后,所有数据都被选中了,取消也是全部取消了。 原因:绑定数据的时候,定义的是字符串,修改为数组即可。 ...
  • 1. vue+elementUI 动态生成多个可以全选的CheckBox多选框 2. indeterminate 状态 3. 实现全选的复选框 多选框
  • 添加多选框
  • 1、在data中创建 selectArr : [ ] 数组 “selectColor”是选中后的文字样式 <li v-for="(item,index) in reasons" :key="index"> <div @click="selectReason(item,index)" :class="sele...
  • 实际应用,在实际的开发里面,我们还需要将选中的多选框的值传给后台,那么vue 怎么将Checkbox 多选框选中的值提交?比如说以字符串数组的形式提交给后端。 <template> <div> <el-checkbox-group v...
  • 有N多个模板,选中多个选项,并且改变样式; HTML模板区域: <template> <h3>请选择模板</h3> <ul class="templates-style"> <li class="filter-nav" v-for="(item, index) in ...
  • Vue实现复选框的多选与全选

    千次阅读 2022-01-25 16:35:04
    Vue实现复选框的多选与全选
  • vue多选框

    千次阅读 2021-09-17 18:35:26
    单选是u-checkbox,这一组外边用u-checkbox-group包裹起来 <u-checkbox-group @change="checkboxGroupChange" :size="size" :width="width" :wrap="wrap" :max="max" :activeColor="activeColor...
  • vue实现多种复选框,含搜索
  • Angular/Vue多选框勾选问题

    千次阅读 2021-01-16 09:32:09
    功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交发请求。先查看效果:可以看到初始页面的此用户被赋予的角色只有一“核算经办”,如图1...
  • <template> <div> <!-- 多选,反选取消 --> <button @click="handleBtn(i)" v-for="(item,i) in list" :key="i" :class="checkList.indexOf(i) === -1 ? '' : 'active'">...sc.
  • <el-form-item label="Business Unit"> <el-select v-model="UserForm.BusinessUnitIds" placeholder="" multiple style="width:100%" @change="change()" > <el-option v-for="item in ...
  • 【代码】Vue如何选中同时禁用其它复选框
  • 今天小编就为大家分享一篇vue实现点击选中,其他的不选中方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue选框选中的值的问题

    千次阅读 2018-04-09 17:53:17
    因此,可以使用v-bind:true-value='x'、v-bind:false-value='x'的方法,直接让复选框选中的时候,对象中的值直接是我们想要的数值, 需要注意的是,经常再设置未选中的时候是空值,如果直接v-bind:false-value=''...
  • 说好的学习计划来了,用十天的时间,深入了解一下饿了么的组件,简单的记录一下,首先上文档: 资料相关 ...Github 地址:https://github.com/PanJiaChen/vue-element-admin Demo体验:https://panjia...
  • vue + elementUI 表格多选框选中 回显

    万次阅读 2019-07-24 19:22:51
    那么想要实现table的多选框回显,前提得有多选框,而实现回显也主要有依赖多选框自带的几事件,当表格存在多选框时这几事件便可以生效: <el-table ref="multipleTable" :data="carData" :empty-t...
  • 最近在重构一选框组件,原型是select2这jQuery插件, 有兴趣的可以去搜下,封装的很好,但是并不能满足业务所有需求,最要命的是jquery插件这种以dom驱动数据的库,并不能和vue和angular这种数据驱动dom的框架...
  • 1、在data中创建 selectArr : [ ] 数组 “selectColor”是选中后的文字样式 <li v-for="(item,index) in reasons" :key="index"> <div @click="selectReason(item,index)" :class="se...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,647
精华内容 3,058
关键字:

vue多选框选中多个