✨✨vue3自定义动态不同UI组件筛选框案例✨

已于 2024-12-31 08:17:44 修改
阅读量514 收藏 9
点赞数 4
分类专栏： # elemen-plus 文章标签： vue.js 前端 javascript
于 2024-12-30 13:45:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35940731/article/details/144823951
版权

✨1. 实现功能

  1. 🌟添加条件进行数据筛选
    • 根据筛选数据条件不同，显示不同的UI组件：包含datetime、select、input等
    • 筛选完条件可继续添加与取消条件
    • 当然可以在条件列表中进行直接删除，当删除完所有条件之后，回到添加条件页面
    • 清空搜索条件直接回到添加条件页面

✨2. 效果图

  1. 💖打开筛选条件弹窗💖
    111.gif

  2. 💖💖查看筛选条件不同的UI结构效果预览💖💖
    222.gif

  3. 💖💖💖继续添加和取消筛选条件效果💖💖💖
    3333.gif

  4. 💖💖条件列表中直接删除条件效果💖💖
    444.gif

  5. 💖清空搜索条件效果💖
    555.gif

✨3. 组件代码

🌹1. 组件目录结构

image.png

2. 🍗 🍖添加条件页面
<script setup lang="ts">
import { ref } from 'vue'
import { NavData } from './constant'
import AddedCondition from './components/added-condition/index.vue'

defineOptions({
  name: 'SearchClues',
})
const { token } = useAntdToken()

// 是否有搜索添加，判断显示筛选区域
const isNav = ref(true)

// 添加条件弹窗
const AddedConditionRef = ref()
function handleClick(i: number) {
  if (i === 0) {
    AddedConditionRef.value.handleOpen()
    return
  }
  if (i === 1) {
    console.log(1)
    return
  }
  if (i === 2) {
    console.log(2)
  }
}

// 筛选条件判断
function handleIsPanel(v: boolean) {
  isNav.value = !v
  if (isNav.value && !v) {
    isSearch.value = false
  }
}

function handleSearch(list: any) {
  console.log(list, 'handleSearch')
  isSearch.value = true
}

// 是否搜索
const isSearch = ref<boolean>(false)
</script>

<template>
  <div>
    <a-card>
      <div v-if="isNav" class="flex">
        <div v-for="(nav, i) in NavData" :key="i" class="flex-center cursor-pointer m-ie-8" @click="handleClick(nav.i)">
          <div class="flex-center p-2 b-rd-10 m-ie-2" :style="{ 'background-color': token?.colorPrimary }">
            <img :src="nav.url" width="24" height="24" alt="">
          </div>
          <span>{{ nav.title }}</span>
        </div>
      </div>
      <AddedCondition ref="AddedConditionRef" @handle-is-panel="handleIsPanel" @handle-search="handleSearch" />
    </a-card>
    <a-card class="m-t-5">
      <div>
        <h2>三步完成线索查找</h2>
        <div>待完成</div>
      </div>
    </a-card>
  </div>
</template>

<style lang="less" scoped></style>
🍀3. 选择条件-条件列表added-condition/index.vue 🍀
<script setup lang="ts">
import { createVNode, ref } from 'vue'
import { DownOutlined, ExclamationCircleOutlined, MinusCircleOutlined, PlusOutlined, UpOutlined } from '@ant-design/icons-vue'
import { Modal, message } from 'ant-design-vue'
import { JudgementCondition } from '../../constant'
import SelectCondition from './select-condition.vue'
import type { Condition } from '@/api/interface/getting-clues'

defineOptions({
  name: 'AddedCondition',
})

const emit = defineEmits(['handleIsPanel', 'handleSearch', 'handleSave', 'handleClear'])
const selectionConditionRef = ref()
function handleOpen() {
  selectionConditionRef.value.handleOpen()
}

// 是否有搜索添加，判断显示筛选区域
const isPanel = ref(false)

function handleOk(list: Condition.ConditionItem[]) {
  conditionsList.value = list
  isPanel.value = true
  emit('handleIsPanel', isPanel.value)
}

/**
 * @constant searchGeneralType 搜索条件总类型
 * @constant conditionsList 搜索条件列表
 */
const searchGeneralType = ref('0')
const conditionsList = ref<Condition.ConditionItem[]>([])

// 获取下拉框数据
function getDefaultOptions(condition: Condition.ConditionItem) {
  if (condition.type === 'SelectOption') {
    return condition.keys?.map(item => (
      JudgementCondition[item.key][item.value] || JudgementCondition.renderData.ifData
    ))[0]
  }
  else {
    return JudgementCondition.type.operateState
  }
}

// 获取多选条件下拉框数据
function getKeysOptions() {
  return JudgementCondition.default.default
}

function handleDelete(index: number) {
  conditionsList.value.splice(index, 1)
}

watch(() => conditionsList, (n) => {
  if (n.value.length === 0) {
    isPanel.value = false
    emit('handleIsPanel', isPanel.value)
  }
}, { deep: true })

// 筛选
function handleSearch() {
  emit('handleSearch', conditionsList.value)
}
// 保存
const loading = ref<boolean>(false)
function handleSave() {
  Modal.confirm({
    title: '确认',
    icon: createVNode(ExclamationCircleOutlined),
    content: '确定要保存此筛选条件吗？',
    onOk() {
      loading.value = true
      emit('handleSave', conditionsList.value)
      setTimeout(() => {
        message.success('保存成功')
        loading.value = false
      }, 1000)
    },
    onCancel() {
      console.log('Cancel')
    },
  })
}
// 清空
function handleClear() {
  Modal.confirm({
    title: '确认',
    icon: createVNode(ExclamationCircleOutlined),
    content: '确定要清空筛选条件吗？',
    onOk() {
      conditionsList.value = []
      emit('handleClear', conditionsList.value)
      selectionConditionRef.value.reset()
    },
    onCancel() {
      console.log('Cancel')
    },
  })
}

// 展开折叠
const isExpanded = ref<boolean>(true)
function handleCollapse() {
  isExpanded.value = !isExpanded.value
}

defineExpose({
  handleOpen,
  handleSearch,
  handleSave,
  handleClear,
})
</script>

<template>
  <div>
    <div v-if="isPanel">
      <div class="m-be-5">
        <span class="w-16 inline-block">满足下列</span>
        <a-select v-model:value="searchGeneralType" class="m-inline-2.5" style="width: 120px">
          <a-select-option value="0">
            所有
          </a-select-option>
          <a-select-option value="1">
            任一
          </a-select-option>
        </a-select>
        条件:
      </div>
      <div class="expandable-content" :class="{ expanded: isExpanded }">
        <div
          v-for="(condition, index) in conditionsList" :key="condition.value"
          class="flex p-be-5 p-is-18.5 condition-box"
        >
          <a-input v-model:value="condition.label" disabled class="w-50" />
          <template v-if="condition.type === 'DatePicker'">
            <a-range-picker v-model:value="condition.keysDate" class="m-inline-2.5" />
          </template>
          <template v-else-if="condition.type === 'NumberRange'">
            <a-input-number id="inputNumber" v-model:value="condition.keys[0].isSys" class="m-inline-2.5" />
          </template>
          <template v-else-if="condition.type === 'SelectOption'">
            <div v-for="(keyItem, i) in condition.keys" :key="keyItem.key + i">
              <a-select v-model:value="keyItem.isSys" class="m-inline-2.5" style="width: 180px">
                <a-select-option v-for="item in getDefaultOptions(condition)" :key="item.value" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </div>
          </template>
          <template v-else>
            <a-select v-model:value="condition.viewfilter" class="m-inline-2.5" style="width: 180px">
              <a-select-option v-for="item in getDefaultOptions(condition)" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
            <!-- TODO 这里是一个输入框，点击出弹窗选数据 -->
            <a-select v-model:value="condition.keysMul" class="m-inline-2.5" style="width: 180px" mode="multiple">
              <a-select-option v-for="item in getKeysOptions()" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </template>
          <MinusCircleOutlined style="color: #888" @click="handleDelete(index)" />
        </div>
      </div>
      <a-button @click="selectionConditionRef.handleOpen">
        <template #icon>
          <PlusOutlined />
        </template>
        添加条件
      </a-button>
      <div class="flex justify-between m-t-5">
        <div>
          <a-button class="m-ie-6" type="primary" @click="handleSearch">
            筛选
          </a-button>
          <a-button :loading="loading" @click="handleSave">
            保存筛选条件
          </a-button>
        </div>
        <a-button class="float-right" type="link" @click="handleClear">
          清空
        </a-button>
      </div>
      <a-divider>
        <a-button type="link" @click="handleCollapse">
          {{ isExpanded ? '收起' : '展开' }}
          <component :is="isExpanded ? UpOutlined : DownOutlined" />
        </a-button>
      </a-divider>
    </div>
    <SelectCondition ref="selectionConditionRef" @handle-ok="handleOk" />
  </div>
</template>

<style lang="less" scoped>
.condition-box {
  position: relative;

  &::before {
    content: " ";
    position: absolute;
    left: 0;
    top: -4px;
    height: 100%;
    width: 55px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAoAQMAAABglfBLAAAABlBMVEXM09t2YyHaAAAAAXRSTlMAQObYZgAAABNJREFUGNNjYGBgcGCAgFGadBoAQZoKAavfri4AAAAASUVORK5CYII=) repeat;
  }

  &:last-child::before {
    top: -4px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAoCAYAAABaW2IIAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACfSURBVHgB7dOxDcJQDIThs0lBQcEIRBQoBRIbEiYBNoEJXoFQaCBikBfDCFEUOXJ0X29Zf3GAg+frY5iAYsYYFxXjomJcVIyLinFRMS4qxkXFuKgYN4aU0hrOXOIEuBXL1QHOXOKy5ZPK4pyadgNHAieP5l2ryPH/8tJZ9+1zU6i21a68YiC3ze2rba0mpVm+970xg/tOiYiIiIiIaHo/tyUf6I0zVSMAAAAASUVORK5CYII=) top no-repeat;
  }
}

.expandable-content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(-20px);
  margin-top: 0;
  visibility: hidden;

  &.expanded {
    max-height: 1000px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 16px;
    visibility: visible;
  }
}
</style>
🌼4. 选择条件-选择条件弹窗组件added-condition/select-condition.vue 🌼
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { hexToRgba } from '~@/utils/hexToRgba'
import { getConditionList } from '@/api/getting-clues/search-clues.ts'
import type { Condition } from '@/api/interface/getting-clues'

defineOptions({
  name: 'SelectCondition',
})
const emit = defineEmits(['handleOk'])

const { token } = useAntdToken()

const message = useMessage()

const open = ref<boolean>(false)
function handleOpen() {
  open.value = true
}
function handleCancel() {
  open.value = false
}
function handleOk() {
  if (state.selectedItemLabels.length === 0) {
    message.error('请选择要添加的条件')
  }
  else {
    emit('handleOk', state.selectedItemLabels)
    open.value = false
  }
}

// search
const searchValue = ref<string>('')
function onSearch(searchValue: string) {
  console.log('use value', searchValue)
  // console.log('or use this.value', searchValue.value);
}

// 条件列表
const conditionList = ref<Condition.ConditionItem[]>([])

getConditionList().then((res) => {
  if (res.success) {
    conditionList.value = res.data
  }
})

// 主条件分类鼠标移入和选中效果
/**
 * @constant hoveredMainIndices 鼠标移入的索引
 * @constant selectedMainIndices 选中的索引
 * @constant currentMainIndex 当前选中主条件index，用于获取子条件列表
 * @constant hoveredItemIndices 选中的子条件索引
 * @constant selectedItemIndices 当前选中的子条件
 * @constant selectedItemLabels 选择的条件
 */

interface State {
  hoveredMainIndices: Set<number>
  selectedMainIndices: Set<number>
  currentMainIndex: number
  hoveredItemIndices: Set<number>
  selectedItemIndices: Set<number>
  selectedItemLabels: Condition.ConditionItem[]
}

const state = reactive<State>({
  hoveredMainIndices: new Set(),
  selectedMainIndices: new Set([0]),
  currentMainIndex: 0,
  hoveredItemIndices: new Set(),
  selectedItemIndices: new Set(),
  selectedItemLabels: [],
})

function handleMainClick(index: number) {
  if (state.currentMainIndex === index) {
    return
  }
  state.selectedMainIndices.clear()
  state.selectedMainIndices.add(index)
  state.currentMainIndex = index
}
function isMainSelected(index: number) {
  return state.selectedMainIndices.has(index)
}

function handleMainHovered(index: number, isHovered: boolean) {
  if (isHovered) {
    state.hoveredMainIndices.add(index)
  }
  else {
    state.hoveredMainIndices.delete(index)
  }
}
function isMainHovered(index: number) {
  return state.hoveredMainIndices.has(index)
}

function activeMainStyle(index: number) {
  if (isMainSelected(index)) {
    return {
      color: token.value?.colorPrimary,
      backgroundColor: hexToRgba(token.value?.colorPrimary, 0.05),
      borderRight: `2px solid ${token.value?.colorPrimary}`,
    }
  }
  else {
    if (isMainHovered(index)) {
      return {
        backgroundColor: 'rgba(0, 0, 0, 0.06)',
      }
    }
  }
}

// 子条件列表
const conditionChildrenList = computed(() => {
  const c = conditionList.value.find((_, index) => state.currentMainIndex === index)
  return c?.children || []
})

function handleItemClick(item: Condition.ConditionItem) {
  const a = state.selectedItemLabels.find(i => i.value === item.value)
  if (!a) {
    if (state.selectedItemLabels.length === 10) {
      return message.error('一次最多选择10项')
    }
    state.selectedItemLabels.push(item)
  }
  else {
    state.selectedItemLabels = state.selectedItemLabels.filter(i => i.value !== item.value)
  }
}
function isItemSelected(item: Condition.ConditionItem) {
  return (state.selectedItemLabels.findIndex(i => i.value === item.value) !== -1)
}

function handleItemHovered(index: number, isHovered: boolean) {
  if (isHovered) {
    state.hoveredItemIndices.add(index)
  }
  else {
    state.hoveredItemIndices.delete(index)
  }
}
function isItemHovered(index: number) {
  return state.hoveredItemIndices.has(index)
}

function activeItemStyle(index: number, item: Condition.ConditionItem) {
  if (isItemSelected(item)) {
    return {
      color: '#ffffff',
      backgroundColor: token.value?.colorPrimary,
    }
  }
  else {
    if (isItemHovered(index)) {
      return {
        color: token.value?.colorPrimary,
        backgroundColor: hexToRgba(token.value?.colorPrimary, 0.05),
      }
    }
  }
}

function reset() {
  const initState: State = {
    hoveredMainIndices: new Set(),
    selectedMainIndices: new Set([0]),
    currentMainIndex: 0,
    hoveredItemIndices: new Set(),
    selectedItemIndices: new Set(),
    selectedItemLabels: [],
  }
  Object.assign(state, initState)
}

defineExpose({
  handleOpen,
  handleCancel,
  reset,
})
</script>

<template>
  <a-modal v-model:open="open" width="50vw" title="添加条件" @ok="handleOk">
    <div>
      <!-- search -->
      <div>
        <a-input-search
          v-model:value="searchValue" class="w-full" placeholder="搜索条件名称" enter-button="搜索" size="large"
          @search="onSearch"
        />
      </div>
      <!-- main wrapper -->
      <div class="mt-5 flex">
        <div class="w-1/5 h-[50vh] overflow-y-scroll scrollbar">
          <div
            v-for="(item, index) in conditionList" :key="index" class="p-2 m-r-1 lh-6 cursor-pointer"
            :style="activeMainStyle(index)" @click="handleMainClick(index)" @mouseover="handleMainHovered(index, true)"
            @mouseleave="handleMainHovered(index, false)"
          >
            {{ item.label }}
          </div>
        </div>
        <div class="flex-1 p-l-8 h-[50vh] overflow-y-auto scrollbar">
          <span
            v-for="(item, index) in conditionChildrenList" :key="index"
            class="inline-block m-2 p-inline-6 p-block-2  b-1 b-solid b-color-#e5e5e5 b-rd-2 cursor-pointer"
            :style="activeItemStyle(index, item)" @click="handleItemClick(item)"
            @mouseover="handleItemHovered(index, true)" @mouseleave="handleItemHovered(index, false)"
          >
            {{ item.label }}
          </span>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="flex-between b-t-1 b-t-solid b-color-#e5e5e5 p-2">
        <div>
          已选择<span class="p-inline-1" :style="{ color: token?.colorPrimary }">{{ state.selectedItemLabels.length
          }}</span>个条件(一次最多10个)
        </div>
        <div>
          <a-button key="back" @click="handleCancel">
            取消
          </a-button>
          <a-button key="submit" type="primary" @click="handleOk">
            确定
          </a-button>
        </div>
      </div>
    </template>
  </a-modal>
</template>

<style lang="less" scoped></style>
5. 🌿定义常量数据文件constant/index.ts 🌿
export const NavData = [
  {
    i: 0,
    title: '添加条件',
    url: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzMzOTk3MzM3MjgwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ2NTM1IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiPjxwYXRoIGQ9Ik01MTIgOTcuNTIzODFjMjI4LjkxMjc2MiAwIDQxNC40NzYxOSAxODUuNTYzNDI5IDQxNC40NzYxOSA0MTQuNDc2MTlzLTE4NS41NjM0MjkgNDE0LjQ3NjE5LTQxNC40NzYxOSA0MTQuNDc2MTlTOTcuNTIzODEgNzQwLjkxMjc2MiA5Ny41MjM4MSA1MTIgMjgzLjA4NzIzOCA5Ny41MjM4MSA1MTIgOTcuNTIzODF6IG0zNi41NzE0MjkgMTk1LjA0NzYxOWgtNzMuMTQyODU4djE4Mi44MzI3NjFMMjkyLjU3MTQyOSA0NzUuNDI4NTcxdjczLjE0Mjg1OGwxODIuODU3MTQyLTAuMDI0MzgxVjczMS40Mjg1NzFoNzMuMTQyODU4di0xODIuODU3MTQySDczMS40Mjg1NzF2LTczLjE0Mjg1OGgtMTgyLjg1NzE0MlYyOTIuNTcxNDI5eiIgcC1pZD0iNDY1MzYiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=',
  },
  {
    i: 1,
    title: '热门推荐',
    url: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzMzOTk2Mjc3MzUyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQzNjIwIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiPjxwYXRoIGQ9Ik03NzAuMDE2IDMzMi43NjhsLTc3LjgyNCA3Ni44czAtMzA3LjItMjU5LjYxNi00MDkuNTY4YzAgMC0yNS45MiAyODEuNi0xNTUuNzQ0IDM4My45MzYtMTI5Ljc5MiAxMDIuNDY0LTM4OS40NCA0MDkuNTY4IDEyOS42OTYgNjM5Ljk2OCAwIDAtMjU5LjYxNi0yODEuNiA3Ny44MjQtNDg2LjMwNCAwIDAtMjUuOTIgMTAyLjMzNiAxMDMuODcyIDIwNC44IDEyOS44MjQgMTAyLjM2OCAwIDI4MS42IDAgMjgxLjZzNjIzLjAwOC0xNTMuNjMyIDE4MS43OTItNjkxLjIzMnoiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjQzNjIxIj48L3BhdGg+PC9zdmc+',
  },
  {
    i: 2,
    title: '已保存的筛选条件',
    url: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzM0MDU5ODUyOTg5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjU0MTQiIGlkPSJteF9uXzE3MzQwNTk4NTI5OTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTQyNi42NjY2NjcgNzI1LjMzMzMzM2gxNzAuNjY2NjY2djE3MC42NjY2NjdoLTE3MC42NjY2NjZ6IiBwLWlkPSI1NDE1IiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PHBhdGggZD0iTTg1OC40NTMzMzMgMzcxLjYyNjY2N2wtMjA2LjA4LTIwNi4wOEExMjggMTI4IDAgMCAwIDU2MS45MiAxMjhINDI2LjY2NjY2N3YyNTZoMjEzLjMzMzMzM2E0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAxIDAgODUuMzMzMzMzSDM4NGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAxLTQyLjY2NjY2Ny00Mi42NjY2NjZWMTI4SDI1NmExMjggMTI4IDAgMCAwLTEyOCAxMjh2NTEyYTEyOCAxMjggMCAwIDAgMTI4IDEyOGg4NS4zMzMzMzN2LTE3MC42NjY2NjdhODUuMzMzMzMzIDg1LjMzMzMzMyAwIDAgMSA4NS4zMzMzMzQtODUuMzMzMzMzaDE3MC42NjY2NjZhODUuMzMzMzMzIDg1LjMzMzMzMyAwIDAgMSA4NS4zMzMzMzQgODUuMzMzMzMzdjE3MC42NjY2NjdoODUuMzMzMzMzYTEyOCAxMjggMCAwIDAgMTI4LTEyOHYtMzA1LjkyYTEyOCAxMjggMCAwIDAtMzcuNTQ2NjY3LTkwLjQ1MzMzM3oiIHAtaWQ9IjU0MTYiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=',
  },
]

export const JudgementCondition: { [key: string]: any } = {
  type: {
    operateState: [
      {
        value: 'text',
        label: '等于任意一个',
      },
      {
        value: 'select-eq',
        label: '等于',
      },
      {
        value: 'select-in',
        label: '包含',
      },
      {
        value: 'select-in-one',
        label: '包含任意一个',
      },
      {
        value: 'select-not',
        label: '不包含',
      },
    ],
  },
  renderData: {
    existData: [
      {
        value: 0,
        label: '无',
      },
      {
        value: 1,
        label: '有',
      },
    ],
    ifData: [
      {
        value: 0,
        label: '否',
      },
      {
        value: 1,
        label: '是',
      },
    ],
  },
  tag: {
    inTag: [
      {
        value: 0,
        label: '机械',
      },
      {
        value: 1,
        label: '器械',
      },
      {
        value: 2,
        label: '设备',
      },
      {
        value: 1,
        label: '重工',
      },
    ],
  },
  // 所有的类别匹配不上走默认
  default: {
    default: [
      {
        value: 0,
        label: '存续',
      },
      {
        value: 1,
        label: '在业',
      },
    ],
  },
}
🌴6. 类别json数据api/index.ts 🌴
// api 模拟接口
export function getConditionList(): Promise<ResData<Condition.ConditionItem[]>> {
  return new Promise((resolve) => {
    resolve(conditionList as unknown as ResData<Condition.ConditionItem[]>)
  })
}

数据json:

{
  "errcode": 200,
  "errmsg": "操作成功",
  "data": [
    {
      "value": "extraHot",
      "label": "常用",
      "children": [
        {
          "value": "businessLocation",
          "label": "企业所在地",
          "children": null,
          "type": "MultiSelect",
          "keys": [
            {
              "key": "type",
              "value": "area",
              "isSys": 0
            },
            {
              "key": "tag",
              "value": "inTag",
              "isSys": 0
            }
          ],
          "checked": true,
          "alisKey": false,
          "viewfilter": "text",
          "tooltip": "",
          "certificateFlag": true,
          "normal": true,
          "intellectualPropertyFlag": true,
          "groupName": ""
        },
        {
          "value": "mobile",
          "label": "有无手机",
          "children": null,
          "type": "SelectOption",
          "keys": [
            {
              "key": "renderData",
              "value": "existData",
              "isSys": 1
            }
          ],
          "checked": true,
          "alisKey": false,
          "viewfilter": "bool",
          "tooltip": "",
          "certificateFlag": true,
          "normal": true,
          "intellectualPropertyFlag": true,
          "groupName": ""
        },
        {
          "value": "operateState",
          "label": "经营状态",
          "children": null,
          "type": "MultiSelect",
          "keys": [
            {
              "key": "type",
              "value": "operateState",
              "isSys": 0
            }
          ],
          "checked": true,
          "alisKey": false,
          "viewfilter": "select-eq",
          "tooltip": "",
          "certificateFlag": true,
          "normal": true,
          "intellectualPropertyFlag": true,
          "groupName": ""
        },
        {
          "value": "companyName",
          "label": "企业名称",
          "children": null,
          "type": "TextTags",
          "keys": [
            {
              "key": "type",
              "value": "companyName",
              "isSys": 0
            },
            {
              "key": "tag",
              "value": "inTag",
              "isSys": 0
            }
          ],
          "checked": true,
          "alisKey": true,
          "viewfilter": "text",
          "tooltip": "",
          "certificateFlag": true,
          "normal": true,
          "intellectualPropertyFlag": true,
          "groupName": ""
        }
      ],
      "type": "",
      "keys": [],
      "checked": true,
      "alisKey": false,
      "viewfilter": "",
      "tooltip": "",
      "certificateFlag": true,
      "normal": true,
      "intellectualPropertyFlag": true,
      "groupName": ""
    },
    {
      "value": "industryInfo",
      "label": "企业基本信息",
      "children": [
        {
          "value": "foundTime",
          "label": "成立日期",
          "children": null,
          "type": "DatePicker",
          "keys": [],
          "checked": true,
          "alisKey": false,
          "viewfilter": "timeRange",
          "tooltip": "",
          "certificateFlag": true,
          "normal": true,
          "intellectualPropertyFlag": true,
          "groupName": "基本信息"
        }
      ],
      "type": "",
      "keys": [],
      "checked": true,
      "alisKey": false,
      "viewfilter": "",
      "tooltip": "",
      "certificateFlag": true,
      "normal": true,
      "intellectualPropertyFlag": true,
      "groupName": ""
    }
  ],
  "success": true
}
💦7. 数据接口定义interface/index.ts 💦
import type { Dayjs } from 'dayjs'

export namespace Condition {
  export interface ChildKeys {
    key: string
    value: string
    isSys: number
  }

  export interface ConditionItem {
    label: string
    value: string
    type: string
    keys: ChildKeys[]
    keysDate?: [Dayjs, Dayjs]
    keysMul?: any[]
    children: ConditionItem[]
    checked: boolean
    viewfilter: string
    tooltip: string
    [key: string]: any
  }
}

❗️ 4. 封装实例缺点💦

  1. added-condition.vue文件内动态渲染UI组件代码
    在这里插入图片描述

  2. UI的结构是不可预知的，所以既然叫动态，那么就需要修改以为动态组件。。。

vue 筛选功能
happyStudy_的博客
07-25 697
vue 编写产品筛选功能 根据行业筛选一级，（国家，价格，发布时间）列表带分页，按时间或者价格排序，以及分页设置10条/页码，20条/页码，50条/页码 以下代码 去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片. <div class="industries_cont clearfix"> <div class="indus_left"> <el-card class="box-card">
vue2多条件筛选，配合el-tooltip实现二级分类
weixin_45701630的博客
11-07 3325
vue2完成多条件筛选功能，配合elementui中的el-tooltip，实现一级或二级分类筛选功能，同时增加头部分类显示，可删除或清空。超过一行高度的分类项进行隐藏，通过按钮实现展开和收起功能，效果如图所示。
基于Vue实现的多条件筛选功能(类似京东和淘宝功能)
05-29
运用Vue实现的多条件筛选功能(类似京东和淘宝功能)，代码实现简单、容易理解
vue实现筛选功能
qq719756146的博客
12-05 1万+
template: &lt;template&gt; &lt;div class=""&gt; &lt;input type="text" v-model="str"&gt; &lt;ul&gt; &lt;li v-for="(item,$index) in list2" :key="
一个vue3的高级筛选器UI组件，支持字符串、数字、下拉、级联、区域、日期、时间等多种数据类型的筛选
最新发布
06-02 845
一个vue3的高级筛选器UI组件，支持字符串、数字、下拉、级联、区域、日期、时间等多种数据类型的筛选，支持条件的分组设置，可以通过使用逻辑运算符（AND/OR）组合多个条件。一个通过用户界面轻松生成任何类型的查询语句，使得筛选和过滤数据变得轻而易举。提供多种UI界面，赋能不同的业务场景。下载地址请关注底部微信公众号联系客服。下载地址请关注底部微信公众号联系客服。
【vue3】实现筛选页组件（深层嵌套循环数据切换）的封装和调用
weixin_50450473的博客
11-03 1756
根据设计图需求以及数据结构的结合，返回的数据结构形成的深层嵌套循环与布局不符，其中Children下的数组，数组下的Children是不确定到底有多少层级的，因此。希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~（1）将右侧筛选弹窗的内容封装成小的组件 menuTree1.vue （也是最里层），如下图。/2、2、筛选页（当点击初中项下的科目项，展示右侧筛选弹窗）（2）如果通过定位的方式布局，就直接写死了（行不通）
Java基础教程：dubbo源码解析-高可用集群
CZ-001的博客
09-19 275
为了避免单点故障，现在的应用通常至少会部署在两台服务器上，这样就组成了集群。集群就是单机的多实例，在多个服务器上部署多个服务，每个服务就是一个节点，部署N个节点，处理业务的能力就提升 N倍（大约），这些节点的集合就叫做集群。目前的管理控制台已经发布0.1版本，结构上采取了前后端分离的方式，前端使用Vue和Vuetify分别作为Javascript框架和UI框架，后端采用Spring Boot框架。既可以按照标准的Maven方式进行打包，部署，也可以采用前后端分离的部署方式，方便开发，功能上，目前具备了服务查
【vue/组件封装】封装一个带条件筛选的搜索框组件（多组条件思路、可多选）详细流程
花间半盘棋
03-05 2115
封装一个带条件筛选的搜索框组件，有样式参考，动态数据，从父组件传入；先写单选，动态绑定 class 样式来实现选中之后的样式，选中后考虑还需要取消，因为条件筛选是多选的，所以是将下标保存进数组中：
VUE实现移动端列表筛选功能
10-16
主要介绍了VUE实现移动端列表筛选功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue实现类目筛选功能
想好了再写！
08-29 1001
类目筛选功能 代码如下：
vue.js筛选功能（基于1.0版本）
weshouldhelp的博客
09-19 595
&lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt;     &lt;head&gt;         &lt;meta charset="UTF-8" /&gt;         &lt;meta name="viewport" content="width=device-width, initial-scale=1.0&quo
vue 筛选功能---filters
qq_42352516的博客
05-25 2123
Vue 前端做筛选功能—filters template: <el-table-column v-if="columnsStatus[10].checked" :sortable="columnsStatus[10].sortable" :prop="columnsStatus[10].column" :label="columnsStatus[10].label" :width="columnsStatus[10].width" show-overflow-tooltip :filte
Vue.js 实践（2）：实现多条件筛选、搜索、排序及分页的表格功能
weixin_34130269的博客
06-03 7254
与上周的第一篇实践教程一样，在这篇文章中，我将继续从一种常见的功能——表格入手，展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比，说明各自的适用场景，也为vue2.0版本中即将删除的部分filter功能做准备。 需求分析 还是先从需求入手，想想实现这样一个功能需要注意什么、大致流程如何、有哪些应用...
Vue 简单数据筛选
qq_46032261的博客
10-30 4171
给大家分享一个简单的用vue实现数据筛选的代码，因为我下载了vue.js所以我是内联的，没有下载的同学可以去下载一下vue 官网 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="../vue.js"></script>
Vue中的数据筛选与搜索功能实现
徐师兄的博客
10-03 2291
在Vue应用程序中实现数据筛选和搜索功能是一项常见但重要的任务。Vue的响应式数据绑定、计算属性和方法使这一任务变得相对简单。通过示例代码和本文提供的指南，您可以轻松入门并在Vue项目中实现强大的数据筛选和搜索功能。希望这篇文章对您有所帮助，如果您有任何问题，请随时向我们提问。
基于vue实现的多条件下拉选择筛选功能案例
阿里巴啦的博客
07-01 1万+
基于Vue实现的多条件筛选功能，可用上刷选商品之类的功能； 效果图： 具体案例可访问：https://github.com/xiexikang/vue-sortSelect
Vue Element table表格实现表头自定义多类型动态筛选 , 目前10种筛选类型，复制即用
热门推荐
疑问 搜索 动手 解决 记录
03-25 2万+
一、效果图 目前10种筛选类型 看看是否是你需要的，本文可能有点长 ，我尽可能的给讲清楚，包括源码附上 二、前言 实现图中的表格，特定的两个要求，筛选条件的接口(返回多种类型及字段标识)，列表接口统一为一个，靠mark参数传输与后台商定好的标识，当然，如果你们的后端能够即能返回列表数据又能返回筛选条件的各种类型的标识也是极好的 。 表格中涉及到返回的数据是value（数字、id等类似select option里绑定的value）形式的，可能需要后端处理成label的形式返给前端，如同上图里的地区，
vue2封装el-select，el-tree，支持筛选，实现TreeSelect的效果
weixin_72915006的博客
12-20 3522
7.父组件引用 记录开发日常，如有不足还望指出，感谢！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值