根据以下代码: <el-form-item label="菜品信息"> <!-- <el-input v-model="form.materielCode" autocomplete="off" :disabled="true"></el-input>--> <el-select v-model="form.dishCode" clearable placeholder="请选择菜品信息"> <el-option v-for="item in dishData" :key="item.id" :label="`${item.id}--${item.dishName}-${item.dishPrice}`" :value="item.id"> <!-- :label="`${item.id}--${item.dishName}--${item.dishPrice}`"--> </el-option> </el-select> </el-form-item> <el-form-item label="销售数量"> <el-input v-model="form.orderlistAmount" style="width: 210px" autocomplete="off"></el-input> </el-form-item> 销售数量*dishPrice怎么写
时间: 2023-12-03 11:43:46 浏览: 114
vue实现表单数据验证的实例代码
可以在代码中添加一个计算属性,来计算销售总金额。具体代码如下:
```
<template>
<div>
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="菜品信息">
<el-select v-model="form.dishCode" clearable placeholder="请选择菜品信息">
<el-option
v-for="item in dishData"
:key="item.id"
:label="`${item.id}--${item.dishName}-${item.dishPrice}`"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="销售数量">
<el-input v-model="form.orderlistAmount" style="width: 210px" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="销售总金额">
<span>{{ totalAmount }}</span>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
dishCode: '',
orderlistAmount: ''
},
dishData: [
{ id: 1, dishName: '鱼香肉丝', dishPrice: 20 },
{ id: 2, dishName: '宫保鸡丁', dishPrice: 22 },
{ id: 3, dishName: '回锅肉', dishPrice: 18 }
]
};
},
computed: {
totalAmount() {
const dish = this.dishData.find((item) => item.id === this.form.dishCode);
return dish ? dish.dishPrice * this.form.orderlistAmount : '';
}
}
};
</script>
```
在上述代码中,通过计算属性 `totalAmount` 计算销售总金额,具体计算方式为菜品单价乘以销售数量。
阅读全文