Popover-Filter.vue

<script setup lang="ts">
import { Close, Filter } from '@element-plus/icons-vue';
import {ElButton, ElIcon, ElInput, ElOption, ElPopover, ElSelect} from 'element-plus';
import { unref, ref, watch, computed } from 'vue';

const props = defineProps({
  filterableData: {
    type: Object,
    required: true,
  },
  operator: {
    type: Object,
    required: true
  },
  visible: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(['change','apply','updateVisible']);

const initialObj = {
  col: '',
  opr: '',
  val: ''
};

const data = ref([{...initialObj}]);

const visibleFilter = ref(false);

watch(() => props.visible, (n, l) => {
  visibleFilter.value = n;
});

watch(visibleFilter, (n,l) => {
  emit('updateVisible', n);
});

watch(data, (n,l) => {
  emit('change', {n, l})
});

function addFilter(){
  unref(data).push({...initialObj});
}

function closeFilter(i){
  unref(data).splice(i, 1);
}

function clearFilter(){
  data.value = [{...initialObj}];
}
</script>

<template>
  <el-popover
    placement="bottom"
    title="Filter"
    :width="700"
    :visible="visibleFilter"
  >
    <template #reference>
      <el-button class="m-2" @click="visibleFilter = !visibleFilter"><ElIcon><Filter/></ElIcon>Filter</el-button>
    </template>

    <template #default>
      <div class="d-flex" v-for="(obj, i) of data" :key="i">
        <ElSelect v-model="obj.col" placeholder="Select column" style="width: 31%;margin-right: 5px">
          <ElOption v-for="(fd, ind) of props.filterableData" :key="ind" :label="fd.label" :value="fd.value"/>
        </ElSelect>
        <ElSelect v-model="obj.opr" placeholder="Select operator" style="width: 31%;margin-right: 5px">
          <ElOption v-for="(o, ind) of props.operator" :key="ind" :label="o.label" :value="o.value"/>
        </ElSelect>
        <ElInput v-model="obj.val" placeholder="Input something" style="width: 31%;margin-right: 10px"/>
        <ElIcon @click="closeFilter(i)" style="width: 3%;cursor: pointer"><Close/></ElIcon>
      </div>
       
      <div style="justify-content: space-between;display: flex;margin-top: 10px">
        <ElButton @click="addFilter">Add Filter</ElButton>
        <div name="right">
          <ElButton type="info" @click="clearFilter">Clear</ElButton>
          <ElButton type="primary" @click="emit('apply', data)">Apply</ElButton>
        </div>
      </div>
    </template>

  </el-popover>
</template>

<!--- USAGE --->
<PopoverFilter :filterable-data="filterableData" :operator="filterOperator" @apply="onApplyFilter" :visible="visibleFilter" @update-visible="visibleFilter = true"/>