前言
- 在线音乐戳我呀！
- 音乐博客源码上线啦！
- 相信在开发中大部分同学都使用 elementtUi 作为搭建项目的首选，今天用到
el-select选择器多选获取数据后下拉选项被勾选但框里没值。 - 下面介绍下我在项目中是如何分析解决该问题
需求
在【音乐博客】中IT知识模块中的修改弹框，想将字段类型单选修改为多选。
问题描述
el-select选择器多选获取数据后下拉选项被勾选但框里没值
问题分析
因为是点击修改按钮弹出弹框，会将值赋给数组，使其弹框下拉框内容可展示。
代码如下：
<el-select
v-model="item.value"
:multiple="item.multiple"
:collapse-tags="item.multiple"
@change="selectChangeForm($event, item)"
>
<el-option
v-for="item in item.options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
-
会不会是Vue无法检测到对象属性的添加或删除，导致el-select选择器的框里没值；于是我使用
$set，发现无效（×） -
会不会是他已经初始化了，然后值才过来；于是我改为
watch来监听，发现无效（×） -
我的数据库
type字段是一个字符串，储存的是已选选项值，每个选项值之间由“,”英文逗号隔开。而el-select下拉框存储的是一个数组，我们把这一个字符串由“,”作为分割点分割再重新组成数组
解决方案
Form.info.type.value=type.split(",");（√）
参考文章
element-ui中select下拉框，选择后赋值成功，但是框上不显示的坑
el-select选择器多选获取数据后下拉选项被勾选但框里没值＜vue+elementUI项目学习笔记＞
以往推荐
vue-typescript-admin-template后台管理系统
