结合elementui Select 选择器（分组） 增加功能（小白有点难）

记得安装 npm install pinyin-pro 和 elementui

<template>
  <div class="hello">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="活动区域" prop="value">
        <el-select v-model="ruleForm.value" placeholder="请选择">
          <el-option-group v-for="group in options" :key="group.label" :label="group.label">
            <el-option
              v-for="item in group.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-option-group>
          <div class="addText">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
            <span @click="addtext">增加</span>
          </div>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { pinyin } from "pinyin-pro";
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      input: "",
      ruleForm: {
        name: "",
        region: "",
        value: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      rules: {
        value: [
          { required: true, message: "请输入活动名称", trigger: "change" }
        ]
      },
      options: [
        {
          label: "热门城市",
          options: [
            {
              value: "Shanghai",
              label: "上海"
            },
            {
              value: "Beijing",
              label: "北京"
            }
          ]
        },
        {
          label: "城市名",
          options: [
            {
              value: "Chengdu",
              label: "成都"
            },
            {
              value: "Shenzhen",
              label: "深圳"
            },
            {
              value: "Guangzhou",
              label: "广州"
            },
            {
              value: "Dalian",
              label: "大连"
            },
            {
              value: "Nanjing",
              label: "南京"
            }
          ]
        }
      ]
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    addtext() {
      const addtext = pinyin(this.input, { toneType: "none" });
      const addTextPingyin =
        addtext.substr(0, 1).toUpperCase() + addtext.substr(1).replace(" ", "");
      // console.log(addTextPingyin);
      const newText = {
        value: addTextPingyin,
        label: this.input
      };
      this.options[0].options.push(newText);
    }
  }
};
</script>

<style scoped lang="less">
.hello {
  width: 300px;
  height: 50px;
}
.el-select-group__wrap:not(:last-of-type) {
  &::after {
    display: none;
  }
}
.el-select-group__wrap {
  // padding-bottom: 10px !important;
}
.el-select-group__wrap:nth-child(2) {
  li:last-child {
    // padding: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
}

.addText {
  // margin-top: 10px !important;
  width: 200px;
  display: flex;
  margin: 0 5px;
  align-items: center;
  span {
    width: 50px;
    margin-left: 5px;
  }
}
.el-select-dropdown__list {
  .el-input {
    // padding-top: 40px !important;
    // border-top: 1px solid #ccc;

    box-sizing: border-box;
  }
  // /deep/.el-input__inner {
  //   padding: 0;
  //   width: 50px !important;
  // }
}
</style>