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

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

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

首先渲染页面：

全选

订单号：{{item.orderNumber}}

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

查看详情-备注-加星

{{item.name}}

{{item.size}}

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

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

{{item.address}}

({{item.phone}})

{{item.date}}
{{item.time}}{{item.state}}{{item.pay}} (运费：{{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(let i = 0,l = this.orderData.length;i < l;i ++){

if(this.orderData[i].checkModel !== val){

this.checkAll = false;

return;

}

}

this.checkAll = val;

}

css代码就不贴出来了，不好看，哈哈

感兴趣的朋友还可以使用本站如下在线工具测试运行效果：

希望本文所述对大家vue.js程序设计有所帮助。