element-ui在下拉选项框中添加一个按钮，实现子选项的添加

学习前端的渣渣

已于 2023-03-29 09:28:14 修改

阅读量1.7k

点赞数

分类专栏： vue # elementUI 文章标签： javascript 开发语言 ecmascript

于 2023-03-28 16:59:40 首次发布

本文链接：https://blog.csdn.net/fangqi20170515/article/details/129819474

版权

该文章展示了在Vue.js中如何使用父子组件通信，通过`@visible-change`事件处理下拉选择框的显示，并在下拉菜单底部添加自定义按钮。当点击按钮时，会打开一个弹窗，该弹窗由子组件处理关闭并通过`$emit`发送信号给父组件。

摘要由CSDN通过智能技术生成

在这里插入图片描述

父组件

<el-select
                    v-model="value"
                    placeholder="请选择"
                    ref="add"
                    @visible-change="
                      (v) =>
                        visibleChange(
                          v,
                          'add',
                          //() => {
   
                           // categoriesClick(temp);//需要传递参数
                         // },
                         categoriesClick,//无需参数
                          '添加设备'
                        )
                    "
                  >
                    <el-option
                      v-for="itemin options"
                      :key="item.value"
      				  :label="item.label"
    			 	  :value="item.value"
                    />
                  </el-select>


<el-dialog
        title="添加子选项"
        :visible.sync="openOff"
        width="70%"
        append-to-body
      >
        <childrenVue 
          @closeHandle="closeHandle"
        />