html：
<div id="box"> <table border="1" cellspacing="0" cellpadding="20"> <thead> <tr> <th>名称</th> <th>价格</th> <th>数量</th> <th>操作</th> </tr> </thead> <tbody id="tbody"> <tr v-for="(item,index) in list" :key="item.id" :style="{'background-color':item.quantity>0?'#c4c4c4' : ''}"> <td>{{item.name}}</td> <td>{{item.number}}</td> <td> <button @click="item.quantity--" v-show="item.quantity>0">-</button> <span>{{item.quantity}}</span> <button @click="item.quantity++">+</button> </td> <td> <button @click="edit(item,index)">编辑</button> <button @click="deletes(list,index)">删除</button> <!-- 删除头部，但只能删除头部 --> </td> </tr> </tbody> <tfoot> <tr> <th></th> <th>总价：￥{{all_price()}}</th> <th>总数：{{all_num()}}</th> <th></th> </tr> </tfoot> </table> <button @click="hi()">添加商品</button> <div v-show="add"> <input type="text" v-model="product_name" placeholder="请输入商品名称"> <input type="text" v-model.number="commodity_prices" placeholder="请输入商品价格"> <input type="text" v-model.number="quantity_of_commodity" placeholder="请输入商品数量"> <button @click="edit_save(list,product_name,commodity_prices,quantity_of_commodity)">确定</button> <button @click="hide()">取消</button> </div> <div v-show="add_s"> <input type="text" v-model="edit_data.name" placeholder="请输入商品名称"> <input type="text" v-model.number="edit_data.number" placeholder="请输入商品价格"> <input type="text" v-model.number="edit_data.quantity" placeholder="请输入商品数量"> <button @click="edit_savesss(item,index)">确定</button> <button @click="hidess()">取消</button> </div> </div>
vue：
<script> const { createApp, ref, reactive } = Vue; createApp({ setup() { let add = ref(false) let add_all = ref(false) // 商品全部为false const list = ref([{ id: 1, name: "衣服", quantity: 0, number: "120", }, { id: 2, name: "鞋子", quantity: 0, number: "80", }, { id: 3, name: "wa6子", quantity: 0, number: "860", }, ]) // 创建一个数组 const edit_data = reactive({ id: 1, name: "", quantity: 0, number: 0, }) // 商品总数 let all_num = () => { let quantity = 0; list.value.forEach(item => { quantity += item.quantity }) return quantity; } // 定义下标 const edit_index = ref('0') // 总价 let all_price = () => { // console.log(JSON.parse(JSON.stringify(list.value))); // return JSON.parse(JSON.stringify(list.value)).reduce((a, b) => a + (b.quantity * b.number), 0); return list.value.reduce((a, b) => a + (b.quantity * b.number), 0); } // let all_price = () => { // return list.value.reduce((a, b) =>a.quantity * a.number + b.quantity * b.number); // } // 点击添加商品显示输入框 let commodities = () => { add.value = true; } // 点击添加商品 const product_name = ref('') console.log(product_name); // 获取商品名称 const commodity_prices = ref('') console.log(commodity_prices); // 获取商品价格 const quantity_of_commodity = ref('') console.log(quantity_of_commodity); // 获取商品数量 let edit = (item, index) => { add_all.value = true Object.assign(edit_data, item) // add.value = true; edit_index.value = index; } // 编辑确定 let ensure = () => { list.value[edit_index.value] = edit_data; add_all.value = false; } // 编辑取消关闭 let abolish = () => { add_all.value = false; } // 新增取消关闭 let hide = () => { add.value = false console.log(add); } // 新增确认 const edit_save = (list, product_name, commodity_prices, quantity_of_commodity) => { let ojj = { name: product_name, quantity: commodity_prices, number: quantity_of_commodity, } list.push(ojj) add.value = true; // counts() deletes() } // 删除 function deletes(list, i) { list.splice(i, 1); } return { hide, product_name, commodity_prices, quantity_of_commodity, list, add, commodities, deletes, all_num, all_price, edit, edit_data, edit_index, edit_save, add_all, ensure, abolish } } }).mount('#box') </script>
