这个方法是我在这篇文章中学到的=》详细原理讲解
急着用可以先看看我这个简略版的,
在级联选择器@change方法中,监听变化,首先添加一个ref="cascaderHandle",在@change绑定的方法中监听:this.$refs.cascaderHandle.dropDownVisible = false;

    <el-cascader 
    :options="optionData"  
     ref="cascaderHandle" 
     clearable 
     :props="{ expandTrigger: 'hover',checkStrictly :true}" 
     :show-all-levels="false"
      @change="close">
      </el-cascader>

 close(val){
      console.log(val)
      this.$refs.cascaderHandle.dropDownVisible = false; //监听值发生变化就关闭它
    }

级联选择器单选框,只能点击前面的圆形按钮才可以选中,现在想要点击文字也可以直接选中。


加一个插槽,并且绑定一个点击事件,

<span slot-scope="{data}" @click="clickNode">{{ data.label }}</span>

在这里插入图片描述
点击事件里一句话就可以搞定

$event.target.parentElement.parentElement.firstElementChild.click();

在这里插入图片描述

GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:5 个月前 )
c345bb45 9 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 9 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐