＜el-select＞在下拉选项框中添加一个按钮，实现子选项的添加

最新推荐文章于 2025-04-02 14:32:36 发布

tyjlearning

最新推荐文章于 2025-04-02 14:32:36 发布

阅读量2.3k

点赞数 2

文章标签： vue.js elementui javascript

原文链接：https://blog.youkuaiyun.com/fangqi20170515/article/details/129819474

版权

该文章展示了如何在Vue.js应用中使用el-select组件，监听visible-change事件来动态添加元素，并通过传递方法到子组件来控制弹窗的显示和关闭。同时，文章还涉及到自定义元素样式和事件绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

父组件

<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"
        />
      </el-dialog>

<script>
import childrenVue from "子组件路径";
  export default {
  components: { childrenVue  },
    data() {
      return {
        openOff:false,
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
    methods:{
// 关闭弹窗（传递给子组件处理弹窗关闭）
    closeHandle() {
      this.openOff = false;
    },
    // 弹出添加子选项弹窗(value未传递的参数)
    categoriesClick(value) {   
      this.openOff = true;
    },
    // 在下拉框处显示添加按钮
    visibleChange(visible, refName, onClick, addname) {
      if (visible) {
        const ref = this.$refs[refName];
        let popper = ref[0].$refs.popper;
        if (popper.$el) popper = popper.$el;
        if (
          !Array.from(popper.children).some(
            (v) => v.className === "el-cascader-menu__list"
          )
        ) {
          const el = document.createElement("ul");
          el.className = "el-cascader-menu__list";
          el.style =
            "border-top: solid 1px #E4E7ED; padding:0; color: #606266;";
          el.innerHTML =
            `<li class="el-cascader-node text-center" style="height:50px;line-height: 50px">
                <span class="el-cascader-node__label"><i class="font-blue el-icon-plus"></i>` +
            addname +
            `</span>
                </li>`;
          popper.appendChild(el);
          el.onclick = () => {
            // 底部按钮的点击事件 点击后想触发的逻辑也可以直接写在这
            onClick && onClick();

            // 以下代码实现点击后弹层隐藏 不需要可以删掉
            if (ref[0].toggleDropDownVisible) {
              ref[0].toggleDropDownVisible(false);
            } else {
              ref[0].visible = false;
            }
          };
        }
      }
    },
	}
  }
</script>