由于工作的需要并鉴于网上的vue2.0中vue-cli实现全选、单选方案不合适,自己写了一个简单实用的。就短短的126行代码。
<table>
<tr>
<td><input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" v-model="checkAll">全选({{checkedCount}})</td>
<td>产品<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a></td>
<td>价格</td>
<td><a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a></td>
</tr>
<tr v-for="(item,$index) in lists">
<td><span v-show="checkedCount===lists.length || item.checked===true">我被选中</span><input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" :value="item.id" v-model="checked" @click="currClick(item,$index)"></td>
<td>{{item.productName}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
</tr>
<tr>
总价:{{totalMoney}}
</tr>
</table>
效果:
原文链接:https://www.f2er.com/vue/37778.html