elementui是有checkbox组件,不过问题在于checkbox组件内只能嵌套简单的字符串,如果要嵌入标签怎么办?
首先渲染页面:
<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<tbody v-for="item in orderData"> <tr> <td class="order-num" colspan="7"> <
el-checkbox v-model="item.checkModel" @change="handleCheckItemChange" style=
"vertical-align:top;margin-top:20px;"></el-checkbox> <div class="num"> <a href=
"javascript:;">订单号:{{item.orderNumber}}</a> <p>商户单号:{{item.shopNumber}}</p> </
div> </td> <td class="order-action" colspan="2"> <a href="javascript:;">查看详情</a>
-<a href="javascript:;">备注</a>-<a href="javascript:;">加星</a> </td> </tr> <tr> <
td> <div class="pic"> <img :src=item.orderPic alt=""> </div> <div class="info">
<a href="javascript:;">{{item.name}}</a> <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 v-if="item.postCost">(运费:{{
item.postCost}})</span></td> </tr> </tbody>
初始化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代码就不贴出来了,不好看,哈哈

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信