vue antd自定义下拉列表

      <div
          @mousedown="
            (e) => {
              e.preventDefault();
              this.selectOpen = true;
            }
          "
        >
          <a-select
            style="width: 190px"
            :open="selectOpen"
            @select="handleSelect"
            v-model="realvalue"
            placeholder="请选择分别率"
          >
            <div slot="dropdownRender" slot-scope="menu">
              <v-nodes :vnodes="menu" />
              <a-divider style="margin: 4px 0" />

              <div>
                自定义
                <div style="margin-top: 15px; margin-left: 10px">
                  宽:
                  <a-input
                    style="width: 100px"
                    v-model="widthvalue"
                    cancelable="false"
                  />
                </div>
                <div style="margin-left: 10px">
                  高:
                  <a-input
                    style="width: 100px; margin-top: 15px"
                    v-model="heightvalue"
                    cancelable="false"
                  />
                </div>
              </div>
              <!-- <a-button></a-button> -->
              <a-button
                type="primary"
                ghost
                style="
                  margin-top: 10px;
                  cursor: pointer;
                  margin-left: 55px;
                  margin-bottom: 10px;
                "
                @click="addItem"
              >
                确定
              </a-button>
            </div>
            <a-select-option v-for="item in itemsdata" :key="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </div>
           //选择后在关闭下拉列表
    handleSelect(value) {
      if (value) {
        this.selectOpen = false;
      }
    },
    addItem() {
      this.realvalue = this.widthvalue + "*" + this.heightvalue;
      this.selectOpen = false;
    },

vue antd自定义下拉列表_第1张图片

你可能感兴趣的:(javascript,开发语言,vue)