vue element Table 表格 自定义表头显影模糊查询封装组件

<template>
  <div>
    <div class="search">
      <div>
        <el-input v-model="fuzzyValue" placeholder="请输入内容" suffix-icon="el-icon-search"></el-input>
      </div>
      <div>
        <!-- 自定义option -->
        <el-popover placement="right" width="300" trigger="click">
          <span class="el-icon-s-tools" slot="reference"></span>
          <div class="option">
            <div class="title">
              <p v-for="(item, index) in choiceArray" :key="index" @click="handleChoiceClick(index)">
                {{ item.name }}
              </p>
            </div>
            <el-input v-model="inputValue" placeholder="请输入内容" suffix-icon="el-icon-search"
              @input="handleSearch"></el-input>
            <div class="custom-select">
              <div class="option" v-for="option in filteredOptions" :key="option.value">
                <label @click="toggleOption(option)">
                  <span>{{ option.label }}</span>
                  <i class="el-icon-check" v-if="option.selected"></i>
                </label>
              </div>
            </div>
          </div>
        </el-popover>
      </div>
    </div>

    <!-- .......表格......... -->
    <el-table :data="filteredTableData" style="width: 100%">
      <el-table-column
        v-for="(column, index) in filteredColumns"
        :key="index"
        :prop="column.prop"
        :label="column.label"
        :sortable="column.sortable"
        :width="column.width"
      >
        <template slot-scope="scope">
          <div v-if="column.template">
            <component :is="column.template" :row="scope.row"></component>
          </div>
          <div v-else>
            <span v-if="column.prop === 'check'">
              {{ scope.row[column.prop] }}
              <el-popover
                placement="top-start"
                width="200"
                trigger="hover"
                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
                v-if="scope.row.check"
              >
                <i
                  class="el-icon-warning-outline"
                  name="check"
                  color="green"
                  slot="reference"
                ></i>
              </el-popover>
            </span>
            <span v-else>
              {{ scope.row[column.prop] }}
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page.sync="currentPage" :page-sizes="[5, 10]" :page-size="pageSize" :total="totalRows"
      layout="total, sizes, prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    choiceArray: {
      type: Array,
      default: () => []
    },
    options: {
      type: Array,
      default: () => []
    },
    displayedData: {
      type: Array,
      default: () => []
    },
    tableColumns: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      fuzzyValue: "",
      inputValue: "",
      currentPage: 1,
      pageSize: 5,
      pageSizes: [5, 10, 20],
    };
  },

  computed: {
    // 表格模糊查询
    filteredTableData() {
      const searchTerm = this.fuzzyValue.toLowerCase();
      const filteredData = this.displayedData.filter((row) =>
        Object.values(row).some((value) =>
          value.toLowerCase().includes(searchTerm)
        )
      );
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return filteredData.slice(startIndex, endIndex);
    },
    // 分页过滤
    totalRows() {
      const searchTerm = this.fuzzyValue.toLowerCase();
      const filteredData = this.displayedData.filter((row) =>
        Object.values(row).some((value) =>
          value.toLowerCase().includes(searchTerm)
        )
      );
      return filteredData.length;
    },
    // 模糊查询
    filteredOptions() {
      const searchTerm = this.inputValue.toLowerCase();
      return this.options.filter((option) =>
        option.label.toLowerCase().includes(searchTerm)
      );
    },
    // 过滤选项未被选择的列
    filteredColumns() {
      return this.tableColumns.filter(column => {
        const option = this.options.find(opt => opt.label === column.label);
        return option && option.selected;
      });
    }
  },
  methods: {
    // Option显影
    toggleOption(option) {
      option.selected = !option.selected;
    },
    // 全部
    selectAllOptions() {
      this.options.forEach((option) => {
        option.selected = true;
      });
    },
    // 默认
    restoreDefaultSelection() {
      this.options.forEach((option, index) => {
        option.selected = index < 999; 
      });
    },
    // 重置全部
    deselectAllOptions() {
      this.options.forEach((option) => {
        option.selected = false;
      });
    },
    // 执行上面三个方法
    handleChoiceClick(index) {
      switch (index) {
        case 0:
          this.selectAllOptions();
          break;
        case 1:
          this.restoreDefaultSelection();
          break;
        case 2:
          this.deselectAllOptions();
          break;
        default:
          break;
      }
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 分页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 这里不需要做任何事情，因为computed属性负责过滤
    handleSearch() {
      
    },
  },
};
</script>

父页面调用

 <tablepaging 
    :choiceArray="choiceArray" 
    :options="options" 
    :displayedData="displayedData"
    :tableColumns="tableColumns">
 </tablepaging>

参数

 data() {
    return {
      choiceArray: [
        { value: "1", name: "全部" },
        { value: "2", name: "默认" },
        { value: "3", name: "重置" },
      ],
      options: [
        { label: "检查", value: "1", selected: true },
        { label: "开放性问题", value: "2", selected: true },
        { label: "需要注意的问题", value: "3", selected: true },
        { label: "aep潜在关注的问题", value: "4", selected: true },
        { label: "修复后的aep收益", value: "5", selected: true },
        { label: "累积收益(美元)", value: "6", selected: true },
      ],
      displayedData: [
        {
          check: "你以为一切都是没选好",
          issues: "0",
          attention: "0",
        },
      ],
      tableColumns: [
        { prop: "check", label: "检查", sortable: true, width: "200px" },
        { prop: "issues", label: "开放性问题", sortable: true },
        { prop: "issuesthat", label: "需要注意的问题", sortable: true },
        { prop: "potential", label: "aep潜在关注的问题", sortable: true },
        { prop: "filxes", label: "修复后的aep收益", sortable: true },
        { prop: "gains", label: "累积收益(美元)", sortable: true },
      ],
      
    };
  },

页面展示