Element ui 下拉选择框数据回显以及单选多选框默认选中

月__
3,336 阅读2分钟

前言

国庆七天假期过后，来到公司，看到自己写的代码，我是谁？我在哪儿？我要干嘛( ⊙o⊙?)？这代码真的是我写的？感觉要不是自己写的参数，封装的接口，各个功能模块都写得有备注，我觉得我可以直接放弃治疗了。。。

下拉框数据回显

今天遇到了这个下拉框的数据回显，我感觉自己写的没问题，但是就是只显示拿到的id，而没有显示选项名，看了好久都没发现问题，最后只好拉出来element ui溜溜。。。。

image.png

只显示了id，而没有显示对应的选项名

Element ui 选择框

打开 Element ui选择框，可以看到Element ui选择框的数据格式是这样的：

image.png

它的value值加了引号"",同时在下面同样是这样进行注册的

image.png

而后端返回的数据格式与需要的格式不同

后端返回的数据格式

后端返回的数据格式没有加引号"",与需要的数据格式不同

image.png

因而需要对后端返回的数据进行处理，才可以正常的进行回显

  1. 进行页面跳转，同时携带需要回显数据的id

image.png

2.进行参数的注册

image.png

  1. 在需要的页面接收传递过来的数据

image.png

4.在下拉框进行v-model数据绑定，同时进行数据处理

image.png

  1. 也就是说v-model绑定值的数据格式必须与value值的数据格式相同，才可以进行回显，不然只会显示id值

image.png

单选框/多选框默认选中

在实际的开发中，单选框和多选框，大多数的时候，都是使用v-for进行数据遍历来渲染后端返回的数据，而不是像element ui那样，采用多个单选标签来实现，此时的默认选中就需要通过v-model来实现

image.png 默认选中7日内

image.png

此时就需要对v-model绑定的参数添加一个默认值（一般为后端返回的数据的默认值，注意后端返回数据的格式）

image.png

即可实现单选框的默认值，多选框同理。。。。

avatar
文章
阅读
粉丝