账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    element ui el-select 组件设置 clearable,触发后数据类型不正确?
    • 2019-08-24 00:00
    • 10
    32
    0

    element ui el-select v-model的值是整型,但是当点击叉号触发clearable后,v-model的变量变成了字符串类型,也就是 ""

    代码如下:
    模板部分:

    <el-select v-model="listQuery.condition.is_hot" placeholder="是否热门" clearable style="width: 120px" class="filter-item">
        <el-option v-for="item in isHotOptions" :key="item.k" :label="item.k" :value="item.v" />
      </el-select>
      

    script:

    data () {
    
        return {
            listQuery: {
            page: {
              page_number: 1,
              page_size: 20
            },
            condition: {
              name: '',
              is_show: null,// 这里之所以设置为null,是因为如果设置为0,那么界面上select的placeholder就不显示了,而是直接显示0
              is_hot: null,
            }
          },
        }
    
    }
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • ★孤寂←天空☆ 普通会员 1楼

      在 Element UI 中,el-select 组件的 clearable 属性用于控制是否允许用户清空选择器的值。如果将其设置为 true,则当用户点击该选项时,选中的项将会被清除。

      但是,如果在使用 clearable 设置后,数据类型仍不正确,那么可能是由于以下几个原因:

      1. 代码逻辑错误:可能是你的代码逻辑导致的。例如,你可能在某个地方不小心清除了一个选中的项,或者在某个地方没有正确地清理选中的项。

      2. 清空选项不正确:如果你的 clearable 设置是 true,那么应该清除选中的项。但是,如果你的选项是设置为默认值的,那么这个选项的值不会被清除。这可能会导致数据类型不正确。

      3. 清空操作过于频繁:如果在一定时间内清空了多次,那么可能会导致数据类型不正确。你可以尝试减少清空操作的频率,或者使用 setTimeout 等方法来实现。

      以下是一个示例代码,演示了如何在使用 clearable 设置后检查数据类型是否正确:

      ```javascript import { Select } from 'element-ui';

      // 假设 data 是一个对象数组,每个对象都有一个 id 和一个值 const data = [ { id: 1, value: 'option1' }, { id: 2, value: 'option2' }, { id: 3, value: 'option3' }, ];

      // 创建 Select 组件 const select = Select({ options, clearable: true, valueField: 'id', labelField: 'value', });

      // 清空数据 select.clear();

      // 使用选中的项 console.log(select.$data); // 输出 { 0: { id: 1, value: 'option1' }, 1: { id: 2, value: 'option2' }, 2: { id: 3, value: 'option3' } } ```

      在这个示例中,我们首先创建了一个 Select 组件,并设置了 clearable 设置为 true。然后,我们清空了数据。最后,我们使用 select.$data 来获取选中的项。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部