el-select选中但是不显示问题
如图所示,选择分管领导的时候,因为分管领导的数据是根据牵头部门变换的,然而vue无法监听动态新增的属性的变化,所以选择牵头部门后再选择分管领导会出现选中但是不显示的情况<el-form-item label="牵头部门" prop="groupDept"><treeselectclass="inline-input"v-model="addForm.group
·
如图所示,选择分管领导的时候,因为分管领导的数据是根据牵头部门变换的,然而vue无法监听动态新增的属性的变化,所以选择牵头部门后再选择分管领导会出现选中但是不显示的情况
<el-form-item label="牵头部门" prop="groupDept">
<treeselect
class="inline-input"
v-model="addForm.groupDept"
:options="deptOptions"
:normalizer="normalizer"
:show-count="true"
@change="chooseMember" //选择后获取分管领导列表
placeholder="请选择牵头部门"
/>
</el-form-item>
<el-form-item label="分管领导" prop="groupUser">
<el-select
class="inline-select"
v-model="addForm.groupUser" //绑定的数据
@change="pickChange"
placeholder="请选择"
>
<el-option
v-for="item in leaderOptions" //动态获取的分管领导列表
:key="item.value+''"
:label="item.label"
:value="item.value+''"
/>
</el-select>
</el-form-item>
解决方案
- .将绑定的数据addForm.groupUser更换绑定为groupUser,调接口的时候进行单独赋值
- 使用$set进行赋值,即可更改页面显示
pickChange(val){ this.$set(this.addForm,this.addForm.groupUser,val) },
更多推荐
已为社区贡献2条内容
所有评论(0)