vueComponent / ant-design-vue

🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
https://antdv.com/
Other
20.08k stars 3.78k forks source link

select 组件隐藏已选择的数据 #7666

Closed Dylan-lijl closed 1 week ago

Dylan-lijl commented 3 months ago

What problem does this feature solve?

由于下拉数据太多,已选中的数据隐藏对应的下拉选项(多个下拉选使用同一个下拉列表数据),达到可选项减少能优化操作; 该功能需求源于之前的错误bug---->https://github.com/vueComponent/ant-design-vue/issues/7657

What does the proposed API look like?

select提供一个隐藏数组或者根据option的display来控制

Aaron-zon commented 2 months ago

image

Dylan-lijl commented 2 months ago

image

不一样,你这个示例没有label属性,大部分场景显示label而不是value,当只有value值label就会失效,这又回到之前说的bug

Aaron-zon commented 2 months ago

哦哦,我懂了,那这个看起来确实不行。

hdtopku commented 2 months ago

确实是个 bug


const selectedRoleIds = ref<string[]>([]);
let roleList = ref([{"1":"超级管理员"},{"2":"开发者"}])
const filteredOptions = computed(() => {
return roleList.value.filter((item:any) => !selectedRoleIds.value.includes(item.id)).map(item => ({
    value: item.id,
    label: item.roleName
  }))
})
 <a-select key="id" allow-clear v-model:value="selectedRoleIds" mode="multiple"
                  :options="filteredOptions" placeholder="请选择角色">
          <template #tagRender="{ value: val, label, closable, onClose, option }">
            <a-tag :closable="closable" style="margin-right: 3px" @close="onClose">
              {{ label }}/{{ val }}
            </a-tag>
          </template>
        </a-select>

选择前

image

选择后

image

template的 label 的值被设置为了value的值

github-actions[bot] commented 2 weeks ago

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days