element-ui的下拉选择框组件el-select,选择点击事件,不显示数据

6 篇文章 0 订阅

element-ui的下拉选择框组件时,绑定@change点击事件selectSystemChanged,可以打印,但是不显示数据

<el-form-item label="消费方系统" prop="consumeSystem">
                                <el-select @change="selectSystemChanged" v-    
                                model="applyresource.consumeSystem" 
                                clearable placeholder="请选择...">
                                    <el-option
                                        v-for="item in retList"
                                        :key="item.value"
                                        :label="item.resourceName"
                                        :value="item.resourceCode">
                                        </el-option>
                                </el-select>
                            </el-form-item>

可能原因:因为数据层次太多,render函数没有自动更新,需手动强制刷新、强制刷新

//强制刷新
 this.$forceUpdate()

 selectSystemChanged(value){
               console.log('selectSystemChanged',value)
                console.log('retList',this.retList)
                //强制刷新
                this.$forceUpdate()
}

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
element-ui是一套基于Vue.js的UI组件库,提供了丰富的组件和工具,方便开发者进行项目开发。其中,下拉多选树状图是element-ui中的一个常用组件之一。 使用element-ui下拉多选树状图组件,可以实现用户通过下拉选择选择多个选项,并且这些选项还以树状图的形式展示。这在处理包含层级关系的数据时尤其有用。 首先,在Vue组件中引入element-ui下拉多选树状图组件,即el-select组件。然后,在组件中定义一个变量来存储用户选中的值,例如selectedOptions。接着,在挂载到DOM之前设置el-select组件的placeholder属性,如:请选择。 接下来,通过调用element-ui提供的API,将需要展示的选项作为树节点传递给el-select组件。可以使用element-uiel-tree组件来支持树状结构,通过配置tree-props属性来指定树节点的显示字段,例如label和children。在数据源中,可以为每个节点设置一个唯一的key属性。 然后,在el-select组件的v-model属性中绑定selectedOptions变量,以实现选中值的双向绑定。此时,用户可以通过下拉选择多个选项,选中的选项会自动存储在selectedOptions变量中。 最后,在Vue组件的template中使用el-select组件来展示下拉多选树状图。设置el-select的filterable属性为true,可以让用户通过输入关键字来筛选选项。使用el-option组件来表示每一个下拉选项。为el-select组件设置多选属性multiple,并通过el-tree组件的子节点slot来显示树状结构。 通过以上步骤,我们就可以使用element-ui快速实现下拉多选树状图。使用这个组件,可以方便地展示具有层级关系的数据,并让用户灵活选择多个选项。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值