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;
    },

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值