antdesign+vue select多选自定义实现

最新推荐文章于 2025-03-27 14:50:58 发布

原创最新推荐文章于 2025-03-27 14:50:58 发布 · 2.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

这篇博客探讨了如何在Ant Design Vue中使用`<a-form-model-item>`和`<a-select>`组件创建一个支持多选、带有悬浮内容实时监测的下拉框。通过`v-model`、`max-tag-count`和`@change`等属性，实现了对选择角色的展示限制和变化监听。同时，利用`computed`属性`roleNameCon`来动态生成悬浮显示的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//容器
 <a-form-model-item v-if="isAdd" label="角色" prop="roleIds">
              <a-popover :content="roleNameCon"
                ><a-select
                  v-model="form.roleIds"
                  mode="multiple"
                  :max-tag-text-length="1"
                  :max-tag-count="2"
                  :max-tag-placeholder="
                    () => {
                      return '...'
                    }
                  "
                  placeholder="选择角色"
                  show-overflow
                  show-search
                  show-overflow-tooltip
                  option-filter-prop="label"
                  style="width: 100%;height:100%"
                  @change="rolePlacehoder"
                >
                  <a-select-option
                    v-for="item in roleDataOptions"
                    :key="item.id"
                    :value="item.id"
                    :label="item.roleName"
                    :title="item.roleName"
                    >{{ item.roleName }}
                  </a-select-option>
                </a-select></a-popover
              >
            </a-form-model-item>

//钩子函数：悬浮效果实时监测 
computed: {
    roleNameCon() {
      let Arr = []
      if (this.form.roleIds) {
        this.roleDataOptions.forEach(ele => {
          this.form.roleIds.forEach(res => {
            if (ele.id === res) {
              if (
                this.form.roleIds.length - 1 >=
                this.form.roleIds.indexOf(res)
              ) {
                Arr.push(ele.roleName + '|')
              } else {
                Arr.push(ele.roleName)
              }
            }
          })
        })
      }
      return Arr
    }
  },