虽然可以换个思路直接用单选框实现,但是有时候非要用复选框实现单选效果,可能是因为需要复选框的样式或者别的原因
这里是kettle中SQLFileOutput组件的两个选项,要实现单选
<el-form :model="row">
<el-col :span="24">
<el-form-item label="增加 创建表 语句">
<el-checkbox v-model="row.createTable" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="增加 清空表 语句">
<el-checkbox v-model="row.truncateTable" />
</el-form-item>
</el-col>
</el-form>
在vue中可以通过侦听器watch
来实现单选
watch: {
'row.createTable'() { // 因为数据在表单中,所以需要加上表单名和单引号
this.row.truncateTable = !this.row.createTable
},
'row.truncateTable'() {
this.row.createTable = !this.row.truncateTable
}
},
官方文档中的例子如下
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 `question` 发生改变,这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
},
但是,这时候产生一个问题就是,第一次选择之后,后面就会取消不掉,复选框变成必须二选一,可是我们有时候两个都不想选择。
所以,在监听过程中加上判断,更改之后的代码如下
'row.createTable'() {
if (this.row.createTable === true) {
this.row.truncateTable = !this.row.createTable
}
},
'row.truncateTable'() {
if (this.row.truncateTable === true) {
this.row.createTable = !this.row.truncateTable
}
}