elementui plus怎么在级联选中后关闭弹层

简介: 相信大家平时在敲代码的时候,经常都会用到 elementui 组件库,那么就有一个问题,elementui plus怎么在级联选中后关闭弹层呢?
<el-cascader
  v-model="form.productCategoryId"
  @change="classifyChange"
  :options="classify"
  :props="{ 
    checkStrictly: true, 
    value: 'categoryId', 
    label: 'categoryName', 
    expandTrigger: 'hover',
    emitPath: false,
  }"
  clearable
  :show-all-levels='false'
  ref='classifyRef'
>
</el-cascader>

定义一个ref
const classifyRef = ref()

setup里面

const classifyChange = () => {
  console.log(classifyRef.value)
  // 调用实例的方法手动关闭
  classifyRef.value.togglePopperVisible()
}

即可轻松解决。

如果你想开发小程序或者了解更多关于小程序的内容,可以通过第三方专业开发公司,来帮助你实现开发需求:厦门在乎科技-专注小程序开发、厦门app定制开发、网站开发

相关文章
|
3月前
|
JavaScript
vue 计算属性,实现复选框的全选和反选 【小案例】
本文通过一个Vue.js小案例,展示了如何使用计算属性实现复选框的全选和反选功能。计算属性的完整写法包括get和set两部分,分别用于获取值和设置值。在全选和反选的场景中,计算属性的get方法用于判断所有复选框是否都已选中,从而控制全选复选框的状态;计算属性的set方法则用于根据全选复选框的状态,批量更新每个复选框的选中状态。通过示例代码和效果图,文章清晰地说明了计算属性在实现这一功能中的作用和效果。
vue 计算属性,实现复选框的全选和反选 【小案例】
|
2月前
element组件库笔记一:element 框架中table表格复选框选中后,切换下一页之前选中复选框和数据消失的问题
这篇文章介绍了在Element UI框架中,如何解决表格组件复选框在分页时选中状态丢失的问题。
114 0
|
5月前
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
509 0
|
JavaScript
Vue实现以按钮弹框动态控制Table列展示
点击设置弹出列数,并根据选择列进行展示:
203 0
|
7月前
基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行
基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行
|
JavaScript
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
1719 0
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
|
JavaScript 前端开发
JS实现分页功能(单选按钮、全选按钮、跳转页面)
JS实现分页功能(单选按钮、全选按钮、跳转页面)
113 0
|
开发者
jeDate日期控件的使用以及选中后点确定按钮关闭功能
jeDate日期控件的使用以及选中后点确定按钮关闭功能
162 0
|
前端开发
uniapp checkbox样式失效,选中框选中按钮不显示
uniapp checkbox样式失效,选中框选中按钮不显示
321 0

热门文章

最新文章