业务需求：
①按钮在总分超过预计值时禁用
②在试题生成成功时禁用
③在打开dialog时，试题已存在时禁用
出现的问题
总分超过预计值时，按钮不能禁用
问题代码：
这种情况只能控制需求①，②③控制不了
这种情况只能控制②③，①控制不了
解决方法：
通过 || 关系，来控制判断条件
具体代码：
<el-form-item label="考试题型：" v-model="bindQuestionList">
<div v-for="(item, index) in bindQuestionList" :key="index">
<el-checkbox v-show="item.questionTitle == '单选题'" v-model="item.choose"
@click="changeQuestionTitle('1', item)" label="单选" style="margin-right:30px" />
<el-checkbox v-show="item.questionTitle == '判断题'" v-model="item.choose"
@click="changeQuestionTitle('2', item)" label="判断" style="margin-right:30px" />
<el-checkbox v-show="item.questionTitle == '多选题'" v-model="item.choose"
@click="changeQuestionTitle('3', item)" label="多选" style="margin-right:30px" />
数量：
<el-input-number v-model="item.questionCount" :min="0" :max="100" controls-position="right"
size="small" @change="handleChange" style="margin-right:20px" />
每题分数：
<el-input-number v-model="item.score" :min="1" :max="10" controls-position="right" size="small"
@change="handleChange" style="margin-right:20px" />
小计：
<span>{
{ item.choose ? item.questionCount * item.score : 0 }}</span>
</div>
</el-form-item>
<el-form-item label="总分数：">
{
{ showScore }}
<span style="color:red;padding-left: 15px;" v-show="totalScoreOver">提示：试题总分超过预计值</span>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmitExam" :disabled="totalScoreOver || isDisabled">试题生成</el-button>
<el-button type="primary" @click="CloseWin()">退出</el-button>
<el-button type="primary" @click="openExamWin">试卷预览</el-button>
</el-form-item>export default {
data() {
return {
bindQuestionList: [ //编辑题型数据
{
choose: false, //是否选择
questionTitle: '单选题', //题目类型
examSubjectCode: '', //编码
questionCount: 0, //题目数量
score: 0 //每题分值
},
{
choose: false,
questionTitle: '判断题',
examSubjectCode: '',
questionCount: 0,
score: 0
},
{
choose: false,
questionTitle: '多选题',
examSubjectCode: '',
questionCount: 0,
score: 0
},
],
}
}，
computed: {
// 累计分数
showScore() {
let score = 0;
let items = this.bindQuestionList.filter(item => { return item.choose });
items.forEach(a => score += a.questionCount * a.score);
return score;
},
/**
* 判断试题总分是否超过试卷预设值
*/
totalScoreOver() {
let score = 0;
let items = this.bindQuestionList.filter(item => { return item.choose });
items.forEach(a => score += a.questionCount * a.score);
return score > this.addForm.totalScore;
}
},
methods: {
// 修改questionTitle flag:1-单选 2-判断 3-多选 item:当前遍历的数据
changeQuestionTitle(flag, item) {
if (flag == 1) {
item.questionTitle = '单选题'
}
if (flag == 2) {
item.questionTitle = '判断题'
}
if (flag == 3) {
item.questionTitle = '多选题'
}
},
handleChange(value) {
},
/**
* 试题生成（编辑页面）
*/
onSubmitExam() {
// 根据choose过滤出已经选中的数据作为参数传给接口
let data = this.bindQuestionList.filter(item => { return item.choose });
// 遍历bindQuestionList，把里面的examSubjectCode换成editForm里的examSubjectCode
this.bindQuestionList.forEach(item => {
item.examSubjectCode = this.addForm.examSubjectCode
})
// 如果没有选中的则提示（即data为空数组，或者data为null或者undefined时给予提示）
if (!data || data.length <= 0) {
ElMessage('请选择题型')
return
}
Req.BindExamQuestion(data).then((res) => {
if(res.message){
ElMessage({
message: '该类型没有考试题目，需要添加考题',
type: 'error',
})
}else if(res.status == 200 && res.message ==""){
this.isDisabled = true;
ElMessage({
message: '试题生成成功',
type: 'success',
})
}
})
this.GetTabData();
},
/**
* 打开生产试卷窗口
* @param {*} data
*/
OpenCreateExamPaperWin(data) {
this.addForm = data;
this.createExamPaperWinVisible = true;
this.GetTabData();
// 判断此时这个窗口的examSubjectCode下有没有试题，有的话禁止生成试题
Req.GetExamQuestionListType({ "examSubjectCode": data.examSubjectCode }).then((res) => {
if((res.data || []).length >0){
ElMessage({
message: '考题已生成，请勿重复生成！',
type: 'warning',
})
this.isDisabled = true;
}
})
},
CloseWin(formRule) {
this.isDisabled = false;
},
handleClose(done) {
done();
this.isDisabled = false;
},
}
}ps:在点击生成试题后设置成false了，然后关闭对话框后要重置这个值
也就是 this.isDisabled = false;
最终的效果：（试题生成按钮变灰成为禁用按钮）