ASelect下拉框支持对过滤条件进行“全选”和“取消全选”功能

Vue版本3.5,ant-design-vue版本4.2.5;
业务要求“多选下拉框”组件支持对过滤后的下拉项进行“全选”和“取消全选”功能。

截图
<a-select v-model:value="selectValue" mode="multiple" allow-clear showSearch allow-filter-value  option-filter-prop="label" max-tag-count="1" :search-value="searchValue" :auto-clear-search-value="false" @search="(value) => searchSelect(value)" @dropdownVisibleChange="(open) => dropdownVisibleChange(open)">
  <template #dropdownRender="{ menuNode: menu }">
    <v-nodes :vnodes="menu" />
    <a-divider style="margin: 4px 0" />
    <div style="padding: 4px 8px">
      <p-button type="text" @click="selectAll(item)">全选</p-button>
      <p-button type="text" style="margin-left: 10px;" @click="deselectAll(item)">取消全选</p-button>
    </div>
  </template>
  <a-select-option v-for="it in selectOptions" :key="it.value" :value="it.value" :label="it.label">
    {{ it.label }}</a-select-option>
</a-select>
import { ref, defineComponent } from 'vue'
const VNodes = defineComponent({
  props: {
    vnodes: {
      type: Object,
      required: true,
    },
  },
  render() {
    return this.vnodes;
  }
})

const selectOptions = ref([{ label: 'one', value: 'one' },{ label: 'two', value: 'two' }])
const selectValue = ref([])
const searchValue = ref('')
const searchSelect = (value) => {
  searchValue.value = value
}
// 全选/取消全选
const selectAll = (item) => {
  if (searchValue) {
    let filterList = []
    let filterListValue = []
    filterList = selectOptions.value.filter(i => i.label?.includes(searchValue))
    filterListValue = filterList.map(i => i.value)
    selectValue.value = [...selectValue.value, ...filterListValue]
  } else {
    selectValue.value = selectOptions.map(i => i.value)
  }
}
const deselectAll = (item) => {
  if (searchValue) {
    let filterList = selectOptions.value.filter(i => i.label.includes(searchValue))
    const filterListValue = filterList.map(i => i.value)
    selectValue.value = selectValue.value.filter(i => !filterListValue.includes(i))
  } else {
    selectValue.value = []
  }
}
// 隐藏下拉框时清除搜索值
const dropdownVisibleChange = (open, item) => {
  if (open) {
  } else {
    searchValue.value = ''
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容