写一个el-form的评分表单 存在1分项和2分项 可以增减分数 并默认显示为1分 选择后实时更新总分数在底部
时间: 2024-03-15 21:45:25 浏览: 21
好的,我理解了你的要求。以下是一个基于 Element UI 的评分表单示例代码:
```vue
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="1分项">
<el-button @click="addOnePoint">+</el-button>
<el-button @click="removeOnePoint">-</el-button>
<span>{{ form.onePoint }}</span>
</el-form-item>
<el-form-item label="2分项">
<el-button @click="addTwoPoints">+</el-button>
<el-button @click="removeTwoPoints">-</el-button>
<span>{{ form.twoPoints }}</span>
</el-form-item>
</el-form>
<div>Total Score: {{ totalScore }}</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
onePoint: 1,
twoPoints: 1
}
}
},
computed: {
totalScore() {
return this.form.onePoint + this.form.twoPoints * 2
}
},
methods: {
addOnePoint() {
this.form.onePoint++
},
removeOnePoint() {
if (this.form.onePoint > 0) {
this.form.onePoint--
}
},
addTwoPoints() {
this.form.twoPoints++
},
removeTwoPoints() {
if (this.form.twoPoints > 0) {
this.form.twoPoints--
}
}
}
}
</script>
```
这个表单包含了两个评分项,一个是 1 分项,一个是 2 分项。用户可以通过点击“+”和“-”按钮来增加或减少每个项的分数,同时总分数会实时更新并显示在底部。默认情况下,每个项的分数都是 1 分。