这篇文章主要介绍了vue.js实现的全选与全不选功能,结合实例形式分析了vue.js基于elementui实现全选与全不选功能的相关页面渲染、初始化数据及功能函数等相关操作技巧,需要的朋友可以参考下
本文实例讲述了vue.js实现的全选与全不选功能。分享给大家供大家参考，具体如下：
elementui是有checkbox组件，不过问题在于checkbox组件内只能嵌套简单的字符串，如果要嵌入标签怎么办?
首先渲染页面：
全选<tbody> <tr> <td class="order-num" colspan="7"> <div class="num"> 订单号：{{item.orderNumber}}<p>商户单号：{{item.shopNumber}}</p></div></td><td class="order-action" colspan="2"> 查看详情-备注-加星</td></tr><tr> <td> <div class="pic"> </div><div class="info"> {{item.name}}<p>{{item.size}}</p><p>商品来源：{{item.from}}</p></div></td><td>{{item.number}}</td><td>{{item.price}}</td><td>-</td><td>{{item.company}}</td><td> <p>{{item.address}}</p><p>({{item.phone}})</p></td><td>{{item.date}}<br />{{item.time}}</td><td>{{item.state}}</td><td>{{item.pay}}<br /><span>(运费：{{item.postCost}})</span></td></tr></tbody>
初始化data数据：
checkAll:false, checkedAllShops:[], checkItemData:[], orderData:[ { checkModel:false, orderNumber:'2017081618322542542', shopNumber:'2017081618322542542', orderPic:'../../../../static/images/realtimeprofile01.png-600', name:'【商城】贴轻松穴位艾灸贴', size:'5贴*盒', from:'本店商品', number:'10', price:'200.00', company:'蒂花之秀', address:'童话镇', phone:'12345678910', date:'2018-1-12', time:'09:30:00', state:'订单关闭', pay:'400.00', postCost:'10' },{ checkModel:false, orderNumber:'2017081618322542542', shopNumber:'2017081618322542542', orderPic:'../../../../static/images/realtimeprofile01.png-600', name:'【商城】贴轻松穴位艾灸贴', size:'5贴*盒', from:'本店商品', number:'10', price:'200.00', company:'蒂花之秀', address:'童话镇', phone:'12345678910', date:'2018-1-12', time:'09:30:00', state:'订单关闭', pay:'400.00', postCost:'10.00' } ]
相关方法：
handleCheckAllChange(val){ this.<span>本文来源gaodai#ma#com搞*!代#%^码网5</span>orderData.map((item,i)=>{ item.checkModel = val; }) }, handleCheckItemChange(val){ for(let i = 0,l = this.orderData.length;i <l;i ++){ if(this.orderData[i].checkModel !== val){ this.checkAll = false; return; } } this.checkAll = val; }
css代码就不贴出来了，不好看，哈哈
感兴趣的朋友还可以使用本站如下在线工具测试运行
在线HTML/CSS/JavaScript前端代码调试运行工具：
http://tools.gaodaima.com/code/WebCodeRun
在线HTML/CSS/JavaScript代码运行工具：
http://tools.gaodaima.com/code/HtmlJsRun
希望本文所述对大家vue.js程序设计有所帮助。
以上就是vue.js实现的全选与全不选功能示例【基于elementui】的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue.js实现的全选与全不选功能示例【基于elementui】
转载请注明原文链接：vue.js实现的全选与全不选功能示例【基于elementui】
