element-ui的下拉选择框选中内容无效果,删除无效果

在使用element-ui的下拉选择框时,在选择选项时,是有效果,

但是,当选中点击某一项时,无效果

【这是正常效果】

 【选中后无效果】

 

 

原理:其实都有生效的,只是页面没有刷新,展现不出来,我们则可通过强制刷新即可,具体代码如下:

<el-select style="width: 95px;" v-model="xxx.xxxx" clearable placeholder="请选择" @change="handleChange">
    <el-option v-for="item in list" :key="item.index" :label="item.name" :value="item.name"></el-option>
</el-select>

handleChange(val) {
    this.$forceUpdate() // 强制刷新
    if (val) {
        this.$set(this.UrgeTaskListPage, this.UrgeTaskListPage.accountPeriod, val)
    } else {
        this.$set(this.UrgeTaskListPage, this.UrgeTaskListPage.accountPeriod, '')
    }
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
element-ui是一套基于Vue.jsUI组件库,提供了丰富的组件和工具,方便开发者进行项目开发。其下拉多选树状图是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快速实现下拉多选树状图。使用这个组件,可以方便地展示具有层级关系的数据,并让用户灵活选择多个选项。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值