[Vue 前端] Vue前端联调后台遇见的问题:多选

 <el-input v-model="form.tele" style="width:160px;" maxlength="11" placeholder="请输入账号" type="number"></el-input>

maxlength  使用这个属性 没有生效的原因   忘记加上 冒号 :

<el-form-item label="城市代码"  :label-width="formLabelWidth" prop="cityCode">
  <el-input    v-model="dialogForm.cityCode"    class="input-width" placeholder="请输入城市代码" :maxlength="2"  />
</el-form-item>

   

multiple复选框多选     当使用了 multiple的时候  如果出现  修改页面 下拉框 不回显  是因为数据格式不一样, 后台返回  list的数据  更绑定过后修改的 值不一样 

前面的 

this.dialogForm.txnType 这个是数组格式的  所以后面 list返回的数据 我也要转为 数组 这样就能正常回显了

如果里面加上    

collapse-tags  这个属性 是简化多选格式问题    如下

clearable  这个属性 是下面  输入框里面的  清除标识

 

<el-form-item label="消费类型" :label-width="formLabelWidth" prop="txnType">
  <el-select  v-model="dialogForm.txnType"  multiple   class="input-width" placeholder="选择消费类型" clearable>
    <el-option v-for="item in txnTypeList" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</el-form-item>

在VUE前端 调用自己的方法的时候 别忘了+this   含义是 当前对象下面的  方法：

之前老爱忘！ 

 

 另一种 限制方式oninput   

<el-form-item label="城市代码"  :label-width="formLabelWidth" prop="cityCode">
  <el-input  oninput="if(value.length>4)value=value.slice(0,4)"  v-model="dialogForm.cityCode"    class="input-width" placeholder="请输入城市代码" :maxlength="20"  />
</el-form-item>