<template>
<div class="cart">
<div class="group_btn">
<el-button type="success" @click="addDialog">添加</el-button>
</div>
<el-table
:data="tableData"
border
style="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: {}
};
效果如下: