三期复盘总结

el-checkbox

遇到好几次不同需求,处理的方式都不同. 如果采用 v-for 循环的话 可以直接免对数据项做处理,否则就要自己处理 checkbox 的数据.

// 1. 自己操作
  <el-form-item label="接入方式："  class="radio-form-item" v-if="ruleForm.gameTypeSelect === 0">
    <el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
      <el-checkbox  @click.native.prevent="clickItem('supportNetGame')" label="supportNetGame">网游 sdk</el-checkbox>
      <el-checkbox @click.native.prevent="clickItem('supportSingleGame')" label="supportSingleGame">单机 sdk</el-checkbox>
    </el-checkbox-group>
  </el-form-item>

clickItem(e) {
  // 获取到 e ,如果有 arr 里面有 e 则去掉
  let arr = this.checkList;
  const arr2 = ['supportNetGame', 'supportSingleGame'];

  if (arr.includes(e)) {
      arr = arr2.filter(i => i !== e);
      this.checkList = [...arr]
  } else {
    // 不存在
    this.checkList.push(e)
  }

// 2. 无需操作
<el-form-item label="接入方式："  class="radio-form-item" v-if="ruleForm.appType == '1'">
  <el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="item in accessTypeList" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
  </el-checkbox-group>
</el-form-item>

handleCheckedCitiesChange(e) {
  console.log('e: ', e);
},

时间戳处理

默认情况下得到的是时间戳, 我们可以将其 xxxx-xx-xx,在统一进行比较.

formatTime(val) {
  const date = new Date(val * 1000);
  const Y = date.getFullYear();
  const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
  const D = date.getDate() + ' ';
  return Y + M + D
}

表单验证

针对层级嵌套比较深 Form 表单采用单个 input 框处理,在提交的时候可以在进行一次验证

  @keyup.native="validateEventHandle(dynamicProportion)"

    validateEventHandle(val) {
      console.log('val: ', val);
      if (val.proportion > 50) {
        this.$message.error('返回比例不能大于 50');
        val.proportion = '';
      }
      if (val.proportion < 0) {
        this.$message.error('返回比例不能小于 0');
        val.proportion = '';
      }
    },

    if (data[i].payMax < data[i].payMin) {
      this.$message.error('最大和最小充值金额设置比例错误');
      return
    }

el-radio-group

label 放入的数字 对应为 string 类型, :label 则为 number 类型.在做校验的时候可能会报错.所以我们要转换一下

  <el-form-item label="游戏类型选择：" prop="gameTypeSelect" class="radio-form-item">
      <el-radio-group v-model="ruleForm.gameTypeSelect">
          <el-radio :label="0">按接入方式</el-radio>
          <el-radio :label="1">自定义</el-radio>
      </el-radio-group>
  </el-form-item>

form 表单 时间戳,做空判断

  const startTime = Number(createTime[0]) / 1000 || '';
  const endTime = Number(createTime[1]) / 1000 || '';