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

Love The Way You Lie 2023-10-03 14:17 33阅读 0赞

>     <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返回的数据 我也要转为 数组 这样就能正常回显了

![20210822174428703.png][]

如果里面加上

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

![20210822093440582.png][]

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

![20210823091003901.png][]

>     <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>

![20210822093100627.png][]

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

之前老爱忘！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NxTDUyMGxU_size_16_color_FFFFFF_t_70][]

**另一种 限制方式****`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>

[20210822174428703.png]: https://img-blog.csdnimg.cn/20210822174428703.png
[20210822093440582.png]: https://img-blog.csdnimg.cn/20210822093440582.png
[20210823091003901.png]: https://img-blog.csdnimg.cn/20210823091003901.png
[20210822093100627.png]: https://img-blog.csdnimg.cn/20210822093100627.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NxTDUyMGxU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210823091143339.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NxTDUyMGxU,size_16,color_FFFFFF,t_70