美文网首页
Checkbox多选框

Checkbox多选框

作者: 兰夏天 | 来源:发表于2019-11-08 14:35 被阅读0次

1 模板事件中用到$event能 不改变默认返回值

1.1 事件 change 复选框状态改变时触发,且回调返回当前复选框的状态为true还是false

    • 绑定事件的时候 第一个参数写为$event ,第二个在写区分的参数。
      change ,几个复选框用同样的业务逻辑,用第二个参数区分到底选的是哪个个复选框,而又不破会默认返回值。需要在
  • 1.模板中,绑定事件的时候 第一个参数写为$event ,第二个在写区分的参数。
  • 2.在方法中写change事件对应的事件时,添加第二个参数。
    在做质量分析的时候,计算条件 ,复选框与输入框一体 。下下规格目标值,当复选框被勾选时,取值输入框中的值,当不被勾选是不取。这业务逻辑是相同的,只是需要赋值的属性不同。事件用的一个,通过第二个参数区分点击的是上规格,还是下规格,还是目标值。
  <a-col
            :xl="4"
            :lg="6"
            :md="6"
            :sm="24"
            class="btninput-check">
            <a-checkbox
              @change="checkchange ($event, 'ups')"
              defaultChecked>上规格 </a-checkbox>
            <a-input-number
              placeholder="请输入"
              size="small"
              :disabled="!ups"
              v-model="upSpecification"
            />
          </a-col>
          <a-col
            :xl="5"
            :lg="6"
            :md="6"
            :sm="24"
            class="btninput-check textright">
            <a-checkbox
              @change="checkchange ($event, 'tar')"
              defaultChecked>目标值</a-checkbox>
            <a-input-number
              placeholder="请输入"
              size="small"
              :disabled="!tar"
              v-model="targetvalue"
            />
          </a-col>
          <a-col
            :xl="5"
            :lg="6"
            :md="6"
            :sm="24"
            class="btninput-check textright">
            <a-checkbox
              @change="checkchange ($event, 'low')"
              defaultChecked>下规格</a-checkbox>
            <a-input-number
              placeholder="请输入"
              size="small"
              :disabled="!low"
              v-model="lowSpecification"
            />         
          </a-col>
  checkchange (e, para2) {
      var that = this
      switch (para2) {
        case 'ups':
          that.ups = e.target.checked
          that.inputNum.upSpecification = e.target.checked ? that.upSpecification : undefined
          break
        case 'tar':
          that.tar = e.target.checked
          that.inputNum.targetvalue = e.target.checked ? that.targetvalue : undefined
          break
        case 'low':
          that.low = e.target.checked
          that.inputNum.lowSpecification = e.target.checked ? that.lowSpecification : undefined
          break
        default:
      }
    },

相关文章

网友评论

      本文标题:Checkbox多选框

      本文链接:https://www.haomeiwen.com/subject/ysnibctx.html