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

一、效果

二、所遇问题与思路解决

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

 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;
      });
    },
1
2
3
4
5
6
7
8
9
10
11