zoukankan      html  css  js  c++  java
  • Vue + Element 实现多选框选项上限提示与限定

    上图先,看效果!!!

    //vue文件夹内
    <
    el-form :model="form" class="form-inline"> <!-- :style="selectNum >= 8 || selectNum <=1 ? 'pointer-events: none;' : ''" 实现了但最后一个时与超过8哥时不能再进行选择,但不能退选与继续进行多选 在还没8个跟一个时则能继续反复选择--> <el-form-item label="基础指标:"> <el-checkbox-group v-model="form.saleIndex"> <el-checkbox label="累计会员数" name="saleIndex" checked></el-checkbox> <el-checkbox label="累计会员占比" name="saleIndex" checked></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="成交指标:"> <!-- :style="selectNum >= 8 ? 'pointer-events: none;' : ''" 设置不能点击,但已经选择的不能退选了? --> <el-checkbox-group v-model="form.serviceIndex"> <el-checkbox label="成交会员数" name="saleIndex" checked></el-checkbox> <el-checkbox label="成交会员占比" name="saleIndex" checked></el-checkbox> <el-checkbox label="支付订单数" name="saleIndex" checked></el-checkbox> <el-checkbox label="客单价" name="saleIndex"></el-checkbox> <el-checkbox label="支付金额" name="saleIndex"></el-checkbox> <el-checkbox label="支付金额占比" name="saleIndex"></el-checkbox> <el-checkbox label="人均消费频次" name="saleIndex"></el-checkbox> </el-checkbox-group> </el-form-item> <span id="maxSelectSpan">最多选择8项</span> <span class="form-inline-select">已选择 {{selectNum}}/8 个指标</span> </el-form>

    <script>
    export default {
      data () {
        return {
        form: {
            saleIndex: [], // 销售指标
            serviceIndex: [] // 服务指标
          },
          selectNum: 0, // 选择指标的数量
          sumData: [],
        }
      }
    watch: {
        // 第五部分的最多项多选款监听
        'form.saleIndex' () {
          this.selectNum = this.form.saleIndex.length + this.form.serviceIndex.length
          // console.log(this.customIndexForm.prodSurvey)
          // sumData是用来存放点击选中的文本框信息
          this.sumData = []
          this.sumData = this.sumData.concat(this.form.saleIndex).concat(this.form.serviceIndex)
          // console.log(this.sumData)
          var checks = document.getElementsByName('saleIndex')
          var span = document.getElementById('maxSelectSpan')
          checks.forEach(i => {
            if (this.selectNum >= 8) {
              this.textShare(span, 'red')
              if (!i.checked) {
                i.setAttribute('disabled', 'true')
              }
            }
            if (this.selectNum < 8) {
              if (!i.checked) {
                i.setAttribute('disabled', 'true')
              }
            }
          })
          if (this.selectNum < 8) {
            this.textShare(span, 'grey  ')
            checks.forEach(i => {
              i.removeAttribute('disabled')
            })
          }
        },
        'form.serviceIndex' () {
          this.selectNum = this.form.saleIndex.length + this.form.serviceIndex.length
          this.sumData = []
          this.sumData = this.sumData.concat(this.form.saleIndex).concat(this.form.serviceIndex)
          console.log(this.sumData)
          var checks = document.getElementsByName('saleIndex')
          var span = document.getElementById('maxSelectSpan')
          checks.forEach(i => {
            if (this.selectNum >= 8) {
              this.textShare(span, 'red')
              if (!i.checked) {
                i.setAttribute('disabled', 'true')
              }
            }
          })
          if (this.selectNum < 8) {
            this.textShare(span, 'grey')
            checks.forEach(i => {
              i.removeAttribute('disabled')
            })
          }
        }
        // 将存放的选择框数据调用函数来执行数据响应展示操作
        // 'sumData' () {
        //   this.getRealTimechartData()
        // }
      },
      /**
         * 文字效果
         */
        textShare (div, color) {
          // 文字跳动
          div.style.color = color
        }
    }
    </script>
     
    样式省略。。。
  • 相关阅读:
    Python Revisited Day 13 (正则表达式)
    Python Revisited Day 06 (面向对象程序设计)
    Python Revisited (变量)
    Python Revisited Day 05(模块)
    Python Revisited Day 04 (控制结构与函数)
    Python Revisited Day 03 (组合数据类型)
    Numpy
    Python Revisited Day 01
    Python3使用openpyxl读写Excel文件
    Python3操作YAML文件
  • 原文地址:https://www.cnblogs.com/yoona-lin/p/13398150.html
Copyright © 2011-2022 走看看