vue3+ts实现多条件查询

之前一直头痛vue3要如何不通过if else做多条件查询,代码冗长,急需简化.通过多层filter过滤实现单条件+多条件查询.

<q-card class="file-form" flat bordered>

    <q-card-section class="flex flex-row flex-wrap gap-2">

      <q-form class="flex flex-row gap-2" @submit.stop="emit('submit', form)">

        <q-select

          v-model="form.tag"

          :options="filteredTags"

          label="标签"

          placeholder="请输入标签"

          @filter="filterTags"

          @input-value="setTags"

        />

        <q-input

          label="文件名"

          v-model="form.fileName"

          placeholder="请输入文件名"

        />

        <q-input

          label="上传人"

          v-model="form.uploader"

          placeholder="请输入上传人"

        />

        <q-btn

          class="px-2"

          unelevated

          color="primary"

          icon="mdi-magnify"

          dense

          type="submit"

        >

          <q-tooltip>查询</q-tooltip>

        </q-btn>

      </q-form>

      <q-space />

      <slot name="action"></slot>

    </q-card-section>

  </q-card>

</template>

const form = ref({ tag: "", fileName: "", uploader: "" });

ts需要类型是他的特性之一,我们需要为子组件创建类型

export type FileFilterForm = {

tag: string;

fileName: string;

uploader: string;

};

通过emit做点击事件的传参到父组件

const emit = defineEmits<{

  (e: "submit", form: FileFilterForm): boolean;

}>();

父组件引用子组件做点击事件搜索

<file-form @submit="onFilter">

在父组件里创建类型为filterForm

const filterForm = ref({

  fileName: "",

  uploader: "",

  tag: "", });

点击后将子组件传递的值赋给filterForm

function onFilter(form: FileFilterForm) {

  filterForm.value = { ...form };

}

将传值做过滤,多层filter可以实现多条件查询

const filteredFileList = computed(() => {

  const { fileName, uploader, tag } = filterForm.value;

  return fileList.value

    .filter((file) => {

      return file.fileName.includes(fileName ?? "");

    })

    .filter((file) => {

      return realnameFormatter(file.createStaffUser ?? file.user).includes(

        uploader ?? ""

      );

    })

    .filter((file) => {

      return (

        (!file.tags || !file.tags.length ? [""] : file.tags).findIndex((tag) =>

          tag.includes(tag ?? "")

        ) !== -1

      );

    });

});