精华内容
下载资源
问答
  • 2021-04-06 23:49:33

    表单内:输入,选择框.对应的值类型

      <div>
        <p>输入框:{
      {name}}</p>
        <!-- 去除空格-->
        <input style="border
    更多相关内容
  • 下面小编就为大家分享一篇基于vue v-for 循环复选-默认勾选第一个的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue实现复选默认勾选功能案例

    千次阅读 2020-08-11 12:33:38
    通过菜鸟教程中单选、复选渲染的代码测试之后,自己也写了一下代码来实现复选如何默认勾选的功能; 二、案例介绍 实现思路 定义一个对象数组来存储id值、和中文名称,除此之外,再定义一个对象,对象里面...

    一、概述

    1. 最近在学习vue相关知识。通过菜鸟教程中单选框、复选框渲染的代码测试之后,自己也写了一下代码来实现复选框如何默认勾选的功能;

    二、案例介绍

    1. 实现思路
      定义一个对象数组来存储id值、和中文名称,除此之外,再定义一个对象,对象里面放置一个数组来存储想要被勾选的id集合。
    2. 代码实现
    <template>
        <div id="computed_props" class="cls2">
             <label v-for="post in postIdList" :key="post">
                 <input type="checkbox" :value="post.postId" v-model="user.postIdList" >{{post.postName}}
             </label>
    </div>
    </template>
    <script>
    export default {
      name: 'ComputedProp',
      data () {
        return {
          postIdList: [{'postId': 0, 'postName': '董事长'}, {'postId': 1, 'postName': '董事长秘书'}],
          user: {
            'name': '测试管理者',
            postIdList: [1, 2]
          }
        }
      },
      methods: {
      },
      computed: {
      },
      watch: {
    }
    </script>
    <style>
    </style>
    
    1. 页面效果
      在这里插入图片描述
    2. 代码分析
      主要是通过 :value和v-model双向绑定完成复选框的默认勾选。首先通过label标签中的v-for循环遍历postIdList对象数组,:value来绑定循环过程中每次取出的对象id,进而与user对象中postIdList数组中id值进行匹配,如果含有,就默认勾选;不含有,就不勾选;
    展开全文
  • 1、el-table如果我们想新增一个勾选框,在 .vue文件中 <el-table-column type="selection" width="55" align="center" /> 如果不需要加这个勾选框,直接不写上面那行代码即可 <template> <div ...

    1、el-table如果我们想新增一个勾选框,在  .vue文件中

    <el-table-column type="selection" width="55" align="center" />

    如果不需要加这个勾选框,直接不写上面那行代码即可 

    <template>
      <div class="app-container">
    
        <!--@selection-change="handleSelectionChange"> table的选择项改变触发事件 -->
        <el-table v-loading="loading" :data="userList"> <!--@selection-change="handleSelectionChange">-->
          //勾选框
          <!--<el-table-column type="selection" width="55" align="center" />-->
    
          <el-table-column label="用户名" align="center" prop="user.userNameCn" />
    
          <el-table-column label="时间" align="center" prop="begintime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.begintime, '{y}-{m}-{d} {HH}:{mm}:{ss}') }}</span>
            </template>
          </el-table-column>
    
      </div>
    </template>

    2、设置勾选框默认勾选、禁用

     <el-table 
       ref="table"
       :data="tableData"
       stripe
       border
       @select="selectSingle"           <!--单独勾选某行数据的勾选框-->
       @select-all="selectAll"          <!--勾选头部勾选框,进行全选或者全不选-->
     >
      <el-table-column
        type="selection"
        fixed
        width="50"
        align="center"
        :selectable="selectable"         <!--设置禁用或非禁用状态-->
      >
    </el-table>

    单选,全选事件响应

    methods:{
           //一、获取列表数据
           storageList(){
             serviceApi.storageList({}).then(res => {
               if(res.data.successFlg && res.data.data){
                 //1、获取列表数据,存入tableData
                 this.tableData = res.data.data ? res.data.data : [];
                 //2、筛选出remark为“1”的数据,该数据勾选状态需要设置为勾选且禁用
                 if(this.tableData.length > 0){
                   let checkedData = this.tableData.filter((item) => {
                     return item.remark === '1';
                   });
                   let $this = this;
                   //3、一定要使用this.$nextTick(),等数据都渲染到表格中再设置勾选状态,否则直接使用$this.$refs.table.toggleRowSelection(item);没有效果
                   this.$nextTick(() => {
                     if(checkedData.length > 0){
                       checkedData.forEach((item) => {
                        //toggleRowSelection(row, selected)方法接受两个参数,row传递被勾选行的数据,selected设置是否选中
                         $this.$refs.table.toggleRowSelection(item,true);
                       });
                     }
                   });
                 }
               }
             }).catch(err => {
               console.error(err);
             });
           },
           
           //二、单独勾选表格中某条数据所对应的勾选框
           selectSingle(selection,row){
             let data = {
               remark:'1',
               id:row.id
             };
             serviceApi.saveMediaStorageSpace(data).then(res => {
               if(res.data.successFlg && res.data.data){
                 this.$message.success('成功');
                 this.storageList();//列表数据刷新
               }else{
                 this.$message.error('失败');
               }
             }).catch(err => {
               console.error(err);
             });
           },
           //三、勾选头部的勾选框,进行全选
           selectAll(selection){
             if(selection.length > 0){//length>0表示全选,length=0为全不选
               selection.forEach((item) => {
                 let data = {
                   remark:1,
                   id:item.id
                 };
                 serviceApi.saveMediaStorageSpace(data).then(res => {
                   if(res.data.successFlg && res.data.data){
                     this.$message.success('成功');
                     this.storageList();//列表数据刷新
                   }else{
                     this.$message.error('失败');
                   }
                 }).catch(err => {
                   console.error(err);
                 });
               });
             }
           },
           //四、设置表格中勾选框是否是禁用状态
           selectable(row,index){
             if(row.remark === '1'){
               return false;//禁用状态
             }else{
               return true;//非禁用状态
             }
           },
        }

    1、如果是表格中一开始没有数据,需要通过请求接口获取数据或者从其他途径获取数据的话,
    那么一定要记得再获取完数据之后使用this.nextTick( ) , 在 this.nextTick(),在this.nextTick(),在this.nextTick()的回调中使用el-table的toggleRowSlection()方法来设置勾选框的勾选状态
    2、如果是静态数据的话,则可以直接使用el-table的toggleRowSlection()方法来设置勾选框的勾选状态,如下:

    export default {
        name:'app',
        data(){
          return {
            tableData:[
              {
                name:'c',
                romTotal:22
              },
              {
                name:'d',
                romTotal:11
              },
              {
                name:'f',
                romTotal:33
              }       
            ],//  表格数据
            tableHeader:[ //表格头部
              {
                label: '表头1',
                width: '150',
              },
              {
                label: '表头2',
                width: '150',
              }
            ],
          }
        },
        mounted(){
          this.$refs.table.toggleRowSelection(tableData[0],true);
        }
    }
    

    展开全文
  • vue中单选框的默认选中不同于传统方式设置checked,是通过在data中设置vulue来实现的 html部分是通过v-for取的后台的数据 (value,i) key=value.id> <input class=radio type=radio name=radios :value=i v-...
  • 之间设计的界面中使用的是复选控件,但是经过对官网了一些了解,使我们更加倾向于使用一些官网已经封装好的事件,就比如Table组件的Select勾选和取消勾选的这样一个事件。 勾选 首先我们需要说一下这个需求,如下...
  • 使用VUE对复选进行选择

    千次阅读 2021-08-17 18:43:56
    实现的功能就是,选中几个复选,能够返回这几个复选所在行的管理员用户名。点击全选能够全选,能够返回复选所在行的管理员用户名。 先来看一下HTML <tbody> <tr v-for='(item,i) in ...

    实现的功能就是,选中几个复选框,能够返回这几个复选框所在行的管理员用户名。点击全选能够全选,能够返回复选框所在行的管理员用户名。 

    先来看一下HTML

     <tbody>
                        <tr v-for='(item,i) in adminMessageList'>
                            <td class="tablecheckbox_td">
                                <!-- :checked=ture     进行布尔判断,来改变当前复选框的状态   checkedList[i].status    @change 监听复选框改变   如果改变执行checkchange  -->
                                <input class="tablecheckbox" type="checkbox" :checked=checkedList[i].status       @change="checkchange(event,i)">  
                            </td>
                            
                            <td >{{item.ainNickname}}</td> 
                            <td >{{item.ainCreateTime}}</td>  
                            <td >{{item.ainId}}</td> 
                            <td>
                                <button id="online" class="btn btn-success btn-xs" type="button" @click="addadmin()">查看</button>
                                <button id="online" class="btn btn-danger btn-xs" type="button">修改</button>
                                <button id="online" class="btn btn-danger btn-xs" type="button" @click="deleteSingle(i)">删除</button>
                            </td>
            
                        </tr>
                    </tbody>

    关键在于下框内的这一行

     我们去@change="checkchange(event,i)中看一下

     //用来同步checkedList   
            checkchange(event,i){
            //可以理解为checkedList 就是复选框自己本身的副本 是有很多个复选框的集合 !!!!!由于 checkedList是自定义 当页面的复选框发生改变的时候,对它本身没有任何直接关系和影响
              this.checkedList[i].status = ! this.checkedList[i].status
    
              //更新已选择列表
              this.updateChooes();
            },
    
    
    

    这里面用了一个方法如下

    
            //刷新/更新 choose 
            updateChooes(){
    
                this.chooseLis = [];//清零
                //循环检查判断哪些是已选择的
                for (let i = 0; i < this.checkedList.length; i++) {
                    if (this.checkedList[i].status) 
                    {
         
                     this.chooseLis.push(this.adminMessageList[i].ainNickname)
                    }  
                   }
                   console.log("ChooseList:-" +this.chooseLis)
         
            }

    然后再来看一下我们完整的JS

    
    var vue = new Vue({
        el: '.App',
        data: {
            adminMessageList: [{ ainNickname: 1, ainCreateTime: "高级效果图", number: 1 }, { ainNickname: 2, ainCreateTime: "中级效果图", number: 1 }, { ainNickname: 3, ainCreateTime: "一般效果图", number: 1 }],
    
    
            //映射页面上的复选框 被v-for绑定
            checkedList:[
                {id:1,status:0},
                {id:1,status:0},
                {id:1,status:0},
                {id:1,status:0},
                {id:1,status:0},
            ],
            //已经选择的项
            chooseLis:[],
    
    
    
            ddelAdminList:[],
            pager:[
                {id:1},
                {id:2},
                {id:3},
                {id:4},
                {id:5},
                {id:6},
            ],
            a:"",
        }
        ,
        created: function () {
            this.adminMessageList = this.getAdminMessage();
        },
        
        methods: {
            getAdminMessage() {
                var AdminMessageResult;
                $.ajax({
                    type: "get",
                    async: false, // 同步 一定会等数据返回
                    data: {
                        currentPage:"1",
                        pageSize:"5"
                    },
                    url: "http://127.0.0.1:8088/admin/getAdminMessage",
                    success(res) {
                 
    
                        AdminMessageResult = res;
           
                    },
                    error(res) {
                    }
    
                })
                return AdminMessageResult;
            },
            deleteSingle(i){
                let that = this;
               $.ajax({
                type: "get",
                async: true, // 同步 一定会等数据返回
                data: {
                    ainNickname:this.adminMessageList[i].ainNickname,
                },
                url: "http://127.0.0.1:8088/admin/delete",
                success(res) {
      
                    that.adminMessageList = res;
                  
    
    
    
                },
                error(res) {
                }
    
            })
    
            },
            addadmin(){
                var admin = [{"ainAdminIdCd":"2021-08-16 16:33:15","ainId":2,"ainNickname":"admin","ainPhone":"18173350047","ainEmail":"1349578685@qq.com","ainCreateTime":"2021-08-16 16:33:15"}]
                this.adminMessageList.push(admin)
    
            },
            toPager(i){
                let that = this;
              
               // this.pager[i].status  = true;
               $.ajax({
                type: "get",
                async: true, // 同步 一定会等数据返回
                data: {
                     currentPage:(i+1),
                        pageSize:"5"
                },
                url: "http://127.0.0.1:8088/admin/getAdminMessage",
                success(res) {
                    that.adminMessageList = res;
                    for (let i = 0; i < res.length; i++) {
                        var check = {id:i,status:false}
                        that.checkedList.push(check)
                    }
                  
                },
                error(res) {
                }
    
            })
    
            },
            toLast(){
                let that = this;
               $.ajax({
                type: "get",
                async: true, // 同步 一定会等数据返回
                data: {
                     currentPage:this.pager.length,
                        pageSize:"5"
                },
                url: "http://127.0.0.1:8088/admin/getAdminMessage",
                success(res) {
                    that.adminMessageList = res;
                },
                error(res) {
                }
            })
            },
    
            toFirst(){
                let that = this;
               $.ajax({
                type: "get",
                async: true, // 同步 一定会等数据返回
                data: {
                     currentPage:1,
                        pageSize:"5"
                },
                url: "http://127.0.0.1:8088/admin/getAdminMessage",
                success(res) {
                    that.adminMessageList = res;
                },
                error(res) {
                }
                })
            },
    
    
    
    
            //用来同步checkedList   
            checkchange(event,i){
            //可以理解为checkedList 就是复选框自己本身的副本 是有很多个复选框的集合 !!!!!由于 checkedList是自定义 当页面的复选框发生改变的时候,对它本身没有任何直接关系和影响
              this.checkedList[i].status = ! this.checkedList[i].status
    
              //更新已选择列表
              this.updateChooes();
            },
    
    
    
    
            selectAll(){
                let that = this;
                for (let i = 0; i <   that.checkedList.length; i++) {
                    that.checkedList[i].status = !that.checkedList[i].status
                }
             
                //刷新choose
                this.updateChooes()
            },
    
    
    
    
            //刷新/更新 choose 
            updateChooes(){
    
                this.chooseLis = [];//清零
                //循环检查判断哪些是已选择的
                for (let i = 0; i < this.checkedList.length; i++) {
                    if (this.checkedList[i].status) 
                    {
         
                     this.chooseLis.push(this.adminMessageList[i].ainNickname)
                    }  
                   }
                   console.log("ChooseList:-" +this.chooseLis)
         
            }
            
    
    }
    }
    )
    

    重点关注截图红框

     

    展开全文
  • vue 复选 ,单选

    千次阅读 2018-07-12 10:48:58
    复选v-model 绑定一个数组,当选中当前项时,改项的value会自动进入数组中,未选中时会自动从数组中删除&lt;div id='example-3'&gt; &lt;input type="checkbox" id="jack" value...
  • 2、勾选框全选、反选,勾选样式,判断全选,未全选。 1.HTML 全选 <div class="select-contanier"> <el-col v-if="showSubmits" :span="24" style="padding-right: 10px; display: flex; justify-...
  • Vue实现复选的多选与全选
  • Vue Element-ui table隐藏表头勾选框,多选框改单选框
  • 功能效果为:页面初始化效果为要有所有角色的复选,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交发请求。先查看效果:可以看到初始页面的此用户被赋予的角色只有一个“核算经办”,如图1...
  • 这是我们HTML区域通过遍历去拿到数据和id 接下来我们看js部分, 这里是通过vue写的 我们在data中去定义一下,这里吧选中的id存放在这个数组中 接下来看我们methods中 这也就可以实现想要的效果了 这也就搞定了
  • Vue + element 实现列表复选并保存已选id集合1.引用element组件多选组,checkList为提交后台数据得数组,tableData为数据源2.初始化tableData集合3.循环遍历需要显示得值4.在多选组上添加chang事件tableData: ...
  • 在 ant design vue 中,表格的第一列是联动的选择 截一张官方文档图,图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: ...
  • vue用div实现复选

    2021-11-24 12:12:38
    vue使用div 实现复选 上图(点击一个的效果) 点击全选后的效果 点击全不选后的效果 废话不多说,上菜 <template> <view class="title"> <u-button type="primary" size="mini" @click=...
  • 最近遇到一个需求,点击添加出现弹框,其中内容是table表格,勾选确定后将勾选的数据显示在页面上。 由于我直接就用两个数组相等的原因,当我再一次点开弹框点击确定后,原来添加的两条数据瞬间被刷新成我后面新...
  • //建议包装成方法这样扩展性更强 }) break case '1111': showMessage('warning', 'zzzzz') break } }) }, //双向绑定table选择 toggle (arr) { ..... //逻辑代码 arr.forEach(item => { if(...) { //这里可以放置...
  • vue移动端项目搭建实现点击勾选
  • 页面区别: 代码: // 标签页的切换 ...//查询该项目组已配置特效(后端配置token拦截)并对表格进行默认勾选 getEffectByProjectId() { getEffectByToken(this.selectProjectId).then((res) => { .
  • 目录vue之ele中的table组件(复选的回显和重置)DSupplementTable.vue组件使用该组件 vue之ele中的table组件(复选的回显和重置) 就是勾选了所有,或者勾选了某一行之后,切换下一页也记录之前的勾选的数据 + ...
  • vue+element-ui复选框勾选失败 使用vue.set()方法或他的别名this.$set()方法解决 问题现象 复选框勾选后无效果,但是数据已经更改。 //错误代码 <template slot-scope="scope"> <el-checkbox v-model=...
  • .native是给组件绑定原生事件采用的方法 vue - @click 用到的修饰符 1.vue提供的方法 .stop .prevent .capture .self .once .passive ... ... ... 2.键盘监听 .enter .tab .delete (捕获 “删除” 和 “退格” 键) ...
  • 1.审核人按钮 <el-checkbox v-model="showReviewer" style="margin-left:15px;" @change="tableKey=tableKey+1" class="filter-item"> 审核人 </el-checkbox> 2.data-return中定义 ....
  • Vue中的输入框相关事件、事件参数、双向数据绑定(重点)——输入、单选、多选等、动态样式相关
  • 最近vue项目需要用到三级CheckBox复选,需要实现全选反选不确定三种状态。但是element-ui table只支持多选行,并不能支持三级及以上的多选,下面通过本文给大家讲解实现方法。 效果图预览: 首先是页面布局,...
  • 勾选/取消勾选某个产品 调接口,请求方式为get,参数为产品id和勾选状态,返回的data为null 复选框勾选状态改变事件的处理: 7.删除选中商品 可以通过context.dispatch调用同级的action函数。 遍历getter数据,为...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,391
精华内容 2,556
关键字:

vue勾选框