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

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    element-ui的el-cascader怎么样可以同时获取到选中的value和label?
    22
    0

    使用el-cascader的时候@active-item-change触发的handleItemChange方法貌似只能够获取到绑定到value上的值,如我把code绑定在value,选择北京的时候获取到的是 [10000]。
    有没有什么方法可以同时获取到props里绑定的label和value?

     <el-cascader  class="newinput" :options="options" @active-item-change="handleItemChange" :props="props"></el-cascader>
    
    export default {
    name: 'app',
      data(){
          return{
          options: [{
              name: '北京',
              code:10000
              children: []
            }, {
              name: '天津',
              code:10001
              children: []
            },
            {
              name: '河北省',
              code:10002
              children: []
            }
            ]
           ,
            props: {
              label:'name',
              value:'code',
              children: 'children'
            },
          }
      },
      methods:{
         handleItemChange(val) {
            console.log(val);
        }
      }
    }
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 善良的大宝 普通会员 1楼

      在Element-UI的el-cascader组件中,我们可以使用datavalue属性来获取选中的value和label。以下是一个简单的示例:

      ```html <el-cascader v-model="data" placeholder="选择一个选项" @change="selectItem"

      {{ item.value }} ```

      在这个示例中,我们首先定义了一个data数组,其中包含选中的选项。然后,我们在el-cascader组件的v-model属性中设置了data数组的值,即this.data。在el-cascader-item组件中,我们使用:text属性来获取选中的label,并将其与选中的value关联起来,从而获取到选中的value和label。

      @change事件处理函数中,我们可以通过this.data属性获取到选中的value,然后通过item.label属性获取到选中的label。例如:

      javascript methods: { selectItem(event) { this.data = event.target.value; this.$emit('selectItem', event.target.value); } }

      在这个事件处理函数中,我们首先将选中的value存储在this.data变量中,然后通过item.label属性获取到选中的label,并通过event.target.value获取到选中的value。最后,我们使用$emit('selectItem', event.target.value)将选中的value和label传递给父组件或后续的处理函数,以便在父组件或后续的处理函数中使用。

      这样,我们就可以同时获取到选中的value和label了。

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