<el-select> 在下拉选项框中添加一个按钮,实现子选项的添加

该文章展示了如何在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>
<div v-show="showSearch" class="inner-search"> <div class="inner-search-line">查询表格</div> <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="98px"> <div class="inner-flex"> <el-row class="inner-left"> <el-col :span="6"> <el-form-item label="楼宇编号" prop="buildingLightCode"> <el-input v-model="queryParams.buildingLightCode" placeholder="请输入楼宇编号" clearable @keyup.enter="handleQuery" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="所在区域" prop="region"> <el-select v-model="queryParams.region" placeholder="请选择所在区域" clearable> <el-option v-for="dict in sys_region_category" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="设施状态" prop="equipStatus"> <el-select v-model="queryParams.equipStatus" placeholder="请选择设施状态" clearable> <el-option v-for="dict in sys_status_category" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="道路类型" prop="roadType"> <el-select v-model="queryParams.roadType" placeholder="请选择道路类型" clearable @change="handleRoadTypeChange"> <el-option v-for="dict in sys_road_type" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="道路名称" prop="roadName"> <el-input v-model="queryParams.roadName" placeholder="请选择道路名称" clearable filterable :disabled="!queryParams.roadType" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="楼宇灯类型" prop="buildingLightCategory"> <el-select v-model="queryParams.buildingLightCategory" placeholder="请选择楼宇灯类型" clearable> <el-option v-for="dict in sys_building_light_category" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="光源类型" prop="lightCategory"> <el-select v-model="queryParams.lightCategory" placeholder="请选择光源类型" clearable> <el-option v-for="dict in sys_light_type" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="创建时间"> <el-date-picker style="width: 100%; max-width: 268px" v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picker> </el-form-item> </el-col> </el-row> <div class="inner-right"> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button> </div> </div> </el-form> </div> 分析这段代码的结构,告诉我其中的组件都是怎么用的
最新发布
07-18
<think>好的,我现在需要在Element UI的<el-select>组件中实现当用户选择“其他”选项时,允许输入自定义内容的功能。首先,我得回顾一下Element UI的文档,看看是否有现成的组件或属性可以直接支持这种需求。记得el-select通常用于下选择,而输入文本通常用el-input,所以可能需要结合这两个组件。 根据用户提供的引用内容,引用[2]提到可以在el-select添加禁用的el-option,并通过样式覆盖来实现自定义按钮。虽然这里的情况不同,但或许可以借鉴这种思路,在选项中选择“其他”时显示一个输入框。 可能的步骤: 1.el-select选项添加一个“其他”选项。 2. 当用户选择“其他”时,显示一个el-input组件,让用户输入内容。 3. 将输入的内容绑定到数据模型,可能需要使用v-model来管理选中的值和输入的值。 4. 处理选项切换,比如当用户从其他选项切回正常选项时,隐藏输入框并更新值。 需要注意的是,el-select本身不支持混合选择输入,所以可能需要通过条件渲染来切换el-selectel-input的显示。或者,使用el-select自定义模板(如el-option的定制)来嵌入输入框,但这可能会比较复杂。 另外,要确保在提交表单时,正确处理“其他”选项的值和自定义输入的值。可能需要将这两个值合并存储,或者根据选择的情况动态更新数据模型。 还需要考虑样式问题,确保输入框在下框中的位置正确,或者在下框外部显示输入框。引用[2]中的方法是通过修改禁用选项的样式,或许类似的方法可以用来嵌入输入框,但这可能需要调整CSS样式。 可能的实现方式: - 使用@change事件监听el-select的选择变化,当选择的是“其他”时,显示一个输入框。 - 使用v-if或v-show控制输入框的显示。 - 将输入框的值与el-select的选中值绑定,可能需要一个中间变量来存储自定义输入的内容。 例如,数据模型中有selectedValue和customInput两个变量。当selectedValue是“其他”时,显示输入框,并将最终值设置为customInput的值。否则,直接使用selectedValue。 可能存在的一个问题是如何在下框中直接输入内容,但Element UI的el-select不支持编辑下选项。因此,可能需要在下框外部显示输入框,当用户选择“其他”时,弹出或显示旁边的输入框。 另一种方法是使用el-select的allow-create属性,该属性允许用户创建新条目,但需要设置filterable和multiple,可能不符合需求。或者,使用组合组件,如el-selectel-input结合,通过条件渲染切换。 需要验证这些方法的可行性,并参考Element UI的文档和示例。可能需要查看社区中是否有类似的实现,或者是否有第三方扩展支持这种功能。 总结可能的解决方案: 1. 监听el-select的change事件,当选择“其他”时显示输入框,并将输入的值合并到最终结果中。 2. 使用自定义el-option模板,尝试在下框中嵌入输入框(可能需要样式调整和事件处理)。 3. 结合使用el-selectel-input,通过条件渲染切换显示,根据选择动态更新值。 接下来需要测试这些方法,确保在不同场景下工作正常,比如表单提交、验证,以及用户切换选项时的数据更新。</think>在Element UI的`<el-select>`组件中实现选择“其他”选项时允许输入自定义内容,可通过以下步骤实现: ### 实现方法 1. **添加“其他”选项**:在`el-option`列表中加入“其他”选项,并绑定`v-model`到变量(如`selectedValue`)。 2. **监听选择事件**:通过`@change`事件监听选项变化,当选中“其他”时,显示输入框。 3. **条件渲染输入框**:使用`v-if`控制输入框的显示,并将输入值绑定到另一个变量(如`customInput`)。 4. **数据合并处理**:提交表单时,若选中“其他”,则使用`customInput`的值作为最终结果。 ### 代码示例 ```html <template> <div> <el-select v-model="selectedValue" @change="handleSelectChange"> <el-option label="选项1" value="option1"></el-option> <el-option label="选项2" value="option2"></el-option> <el-option label="其他" value="other"></el-option> </el-select> <el-input v-if="showCustomInput" v-model="customInput" placeholder="请输入内容" style="margin-top: 10px;" ></el-input> </div> </template> <script> export default { data() { return { selectedValue: '', customInput: '', showCustomInput: false }; }, methods: { handleSelectChange(value) { this.showCustomInput = (value === 'other'); // 清除自定义输入内容当切换回普通选项 if (value !== 'other') this.customInput = ''; } } }; </script> ``` ### 关键点说明 - **数据绑定**:`selectedValue`存储选项值,`customInput`存储自定义输入内容。 - **逻辑联动**:选择“其他”时显示输入框,切换选项时自动隐藏并清空输入内容。 - **表单提交**:最终数据需根据`selectedValue`判断,若为`other`则使用`customInput`的值[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值