<template><div class="cart"><div class="group_btn"><el-button type="success" @click="addDialog">添加</el-button></div><el-table:data="tableData"borderstyle="width: 100%"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center"></el-table-column><el-table-column type="index" label="序号" width="180" align="center"></el-table-column><el-table-column prop="name" label="类目" width="180" align="center"></el-table-column><el-table-column prop="price" label="价格" align="center"></el-table-column><el-table-column label="数量" align="center"><template slot-scope="scope"><el-input-number v-model="scope.row.number" :min="1" :max="10" label="描述文字"></el-input-number></template></el-table-column><el-table-column label="操作" align="center"><template slot-scope="scope"><el-button size="mini" @click="editDialog(scope.$index, scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table><div class="total_warpper"><h3>共计：{
{totalPrice}}</h3><h3>总数：{
{totalNumber}}</h3></div><!-- 添加弹窗的内容 --><el-dialog title="添加信息" :visible.sync="addIsDialog" class="addDialog"><el-form :model="formData"><el-form-item label="类目" :label-width="formLabelWidth"><el-input v-model="formData.name" autocomplete="off"></el-input></el-form-item><el-form-item label="价格" :label-width="formLabelWidth"><el-input v-model="formData.price" autocomplete="off"></el-input></el-form-item><el-form-item label="数量" :label-width="formLabelWidth"><el-input v-model="formData.number" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="addIsDialog = false">取 消</el-button><el-button type="primary" @click="addSureBtn">确 定</el-button></div></el-dialog><!-- 添加编辑的内容 --><el-dialog title="添加信息" :visible.sync="editIsDialog" class="addDialog"><el-form :model="editData"><el-form-item label="类目" :label-width="formLabelWidth"><el-input v-model="editData.name" autocomplete="off"></el-input></el-form-item><el-form-item label="价格" :label-width="formLabelWidth"><el-input v-model="editData.price" autocomplete="off"></el-input></el-form-item><el-form-item label="数量" :label-width="formLabelWidth"><el-input v-model="editData.number" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="editIsDialog = false">取 消</el-button><el-button type="primary" @click="editSureBtn">确 定</el-button></div></el-dialog></div>
</template><script src="./car.js"></script><style scoped>
.cart {margin: 50px auto;width: 1000px;
}
.group_btn {margin-bottom: 30px;
}
.addDialog .el-input {width: 90%;
}
.total_warpper {text-align: right;margin-top: 30px;
}
h3 {margin-top: 10px;
}
</style>car.js
export default {name:'car',data() {return {editIsDialog: false, //编辑弹窗addIsDialog: false, //添加弹窗multipleSelection: [], //存放已选择的数据multipleSelection2:[],formData: {name: "",price: "",number: ""},editData: {},formLabelWidth: "200",//表格中的数据tableData: [{name: "苹果",price: 10,number: 1},{name: "香蕉",price: 20,number: 1},{name: "草莓",price: 5,number: 1}]};},methods: {// 点击发生的变化handleSelectionChange(val) {console.log("添加价格点击事件",val)this.multipleSelection = val; //给定义的数组赋值},handleDelete(index,row) {this.tableData.splice(index, 1); //删除表格的数据},// 点击弹出添加弹窗addDialog() {this.addIsDialog = true;},// 点击添加弹窗的确定按钮addSureBtn() {this.addIsDialog = false;this.tableData.push(this.formData);// 初始化添加表单this.formData = {name: "",age: "",sex: ""};},// 点击弹出添加弹窗editDialog(index, row) {this.editIsDialog = true;this.editData = row;},editSureBtn(row, index) {this.editIsDialog = false;}},// 通过computed计算属性及时改变computed: {// 总价totalPrice() {var price_total = 0;console.log("检查数据变化",this.multipleSelection)this.multipleSelection.forEach(item=>{console.log('循环事件111',item);return price_total+=item.price*item.number;})return price_total;},// 总数totalNumber() { var number_total = 0;this.multipleSelection.map(item=>{return number_total+=item.number;})return number_total;}},components: {}
};效果如下：
