标签：vue elementui question 复选框 createTable 单选 truncateTable row

虽然可以换个思路直接用单选框实现，但是有时候非要用复选框实现单选效果，可能是因为需要复选框的样式或者别的原因
这里是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
  }
}

标签：vue,elementui,question,复选框,createTable,单选,truncateTable,row
来源： https://www.cnblogs.com/javaupup/p/14844469.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。