element select 自定义option(可自定义选择，可自定义输入)

最新推荐文章于 2024-07-26 10:31:01 发布

八分钟de温暖

最新推荐文章于 2024-07-26 10:31:01 发布

阅读量5.6k

点赞数 1

文章标签： vue element

本文链接：https://blog.csdn.net/weixin_40466351/article/details/122999232

版权

一、效果

请添加图片描述

二、所遇问题与思路解决

1、怎样让有些字段能点击，有些字段点击不收缩，并且能够自定义呢？

解决办法：把自定义字段disabled 设置为true ，使其点击不收缩；
自定义
2、点击选择框里面的选择框，不收缩外面的选择框？
解决办法：设置select 属性 popperAppendToBody 为false

3、样式问题，修改页面样式
4、重新赋值

三、主要代码

<div class="mr10" style="width: 150px">
        <el-select
          v-model="form.timeType"
          placeholder="请选择日期范围"
          ref="timeType"
          clearable
          popperClass="avue-input-tree-monitor time-type"
          :popperAppendToBody="false"
        >
          <el-option
            v-for="item in timeTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          >
            <span>{{ item.label }}</span>
            <div v-if="item.disabled" class="flex-space-around">
              <div style="width: 60px">
                <avue-select
                  :clearable="false"
                  v-model="customForm.timeFormat"
                  popperClass="avue-input-tree-monitor time-format"
                  @change="changeCustomType"
                  :dic="customTypeList"
                  :popperAppendToBody="false"
                ></avue-select>
              </div>
              <div style="width: 60px">
                <avue-select
                  :clearable="false"
                  v-model="customForm.timeLength"
                  popperClass="avue-input-tree-monitor time-length"
                  :dic="timeLengthList"
                  :popperAppendToBody="false"
                ></avue-select>
              </div>
              <div>
                <el-button type="plain" @click="sureCustom">确定 </el-button>
              </div>
            </div>
          </el-option>
        </el-select>
      </div>

 sureCustom() {
      this.form.timeType = "custom";
      let text =
        this.customForm.timeLength +
        (this.customForm.timeFormat == "day" ? "天" : "月");
      let timeType = this.$refs.timeType;
      timeType.visible = false;
      setTimeout(() => {
        timeType.selectedLabel = text;
      });
    },