好资源导航 » 文章资讯 » vue.js实现的全选与全不选功能示例【基于elementui】

vue.js实现的全选与全不选功能示例【基于elementui】

2023-09-05 01:03:04 66

本文实例讲述了vue.js实现的全选与全不选功能。分享给大家供大家参考，具体如下：

elementui是有checkbox组件，不过问题在于checkbox组件内只能嵌套简单的字符串，如果要嵌入标签怎么办?

首先渲染页面：

全选





订单号：{{item.orderNumber}}
商户单号：{{item.shopNumber}}

查看详情-备注-加星

商品来源：{{item.from}}

{{item.number}} {{item.price}} - {{item.company}}

({{item.phone}})

(运费：{{item.postCost}})

初始化data数据：

checkAll:false,
checkedAllShops:[],
checkItemData:[],
orderData:[
{
checkModel:false,
orderNumber:'2017081618322542542',
shopNumber:'2017081618322542542',
orderPic:'../../../../static/images/realtimeprofile01.png',
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',
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.orderData.map((item,i)=>{
item.checkModel=val;
})
},
handleCheckItemChange(val){
for(leti=0,l=this.orderData.length;i
css代码就不贴出来了，不好看，哈哈
感兴趣的朋友还可以使用本站如下在线工具测试运行效果：
在线HTML/CSS/JavaScript前端代码调试运行工具：

http://tools.jb51.net/code/WebCodeRun
在线HTML/CSS/JavaScript代码运行工具：

http://tools.jb51.net/code/HtmlJsRun
希望本文所述对大家vue.js程序设计有所帮助。

返回顶部
514930285
czq8825@qq.com

vue.js实现的全选与全不选功能示例【基于elementui】

热门推荐

随机推荐