<td width="7%" v-if="index!==0">
<input type="checkbox" v-model='checkList' :value="list.id">
</td>
<td width="43%">{{list.product_inf}}</td>
<td width="10%" v-if="index===0">{{list.product_price}}</td>
<td width="10%" v-if="index!==0">¥{{list.product_price}}</td>
<td width="10%">{{list.product_quantity}}</td>
<td width="10%">{{list.total_amount}}</td>
<td width="20%" v-if="index===0">编辑</td>
<td width="20%" v-if="index!==0">
<a href="#" rel="external nofollow" rel="external nofollow" class="update">修改</a>
<a href="#" rel="external nofollow" rel="external nofollow" class="delete">删除</a>
</td>
</tr>
</template>
</tbody>
</table>
<div class="price_total_bottom">
<div class="price_total_ms">
<label>合计：{{allProductTotal}}</label>
<router-link to="/userAddress">结账</router-link>
</div>
</div>
</div>
</template>
<script>
import userAddress from './address'
export default {
components: {
userAddress
},
data() {
return {
table_list: [{
'id': 0,
'product_inf': '商品信息',
'product_price': '商品金额',
'product_quantity': '商品数量',
'total_amount': '总金额'
}, {
'id': '1',
'product_inf': '女士银手链',
'product_price': 120,
'product_quantity': 200,
'total_amount': 24000
}, {
'id': '2',
'product_inf': '女士银手镯',
'product_price': 380,
'product_quantity': 200,
'total_amount': 72000
}, {
'id': '3',
'product_inf': '女士银耳环',
'product_price': 100,
'product_quantity': 200,
'total_amount': 20000
}],
checked: false,
allProductTotal: null,
checkList: ['1', '3'] }
},
methods: {
checkedAll: function() {
var _this = this;
console.log(_this.checkList);
if (_this.checked) { //实现反选
_this.checkList = [];
} else { //实现全选
_this.checkList = [];
_this.table_list.forEach(function(item, index) {
if (index > 0) {
_this.checkList.push(item.id);
}
});
}
}
},
watch: { //深度 watcher
'checkList': {
handler: function(val, oldVal) {
if (val.length === this.table_list.length - 1) {
this.checked = true;
} else {
this.checked = false;
}
},
deep: true
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
