performance-test/src/components/TableCom.vue

<template>
  <div>
    <div class="search">
      <div>
        <div class="structure">
          <slot name="Uploads"></slot>
          <slot name="integration"></slot>
          <el-input v-model="fuzzyValue" placeholder="请输入内容" suffix-icon="el-icon-search"></el-input>
          <slot name="switch"></slot>
        </div>
          <!-- 插入开关 -->
        
          <slot name="function"></slot>
     
      </div>
      <div>
        <!-- 自定义option -->
        <el-popover placement="right" width="330" 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%">
      <!-- 插入多选 -->
      <slot name="multiple"></slot>
      <!-- 表格列 -->
      <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>
      <!-- 插入操作 -->
      <slot name="center"></slot>

    </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; // Select first two options, assuming they are default
      });
    },
    // 重置全部
    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() {
      // No need to do anything here as the computed property takes care of filtering
    },
    handleClick(row) {
      this.$router.push({ path: '/detailpage' });
    }
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  margin-top: 0;
}

.el-table {
  margin: 20px 0;
}

.el-pagination {
  text-align: center;
}

.search {
  display: flex;
  justify-content: space-between;
}

.el-icon-s-tools {
  position: relative;
}

.option {
  .title {
    display: flex;
    justify-content: space-around;

    p {
      font-size: 16px;

      font-weight: 600;
      margin: 15px 0;
      border-bottom: 1px solid #606266;
    }

    p:hover {
      color: rgb(13, 83, 141);
      border-bottom: 1px solid rgb(13, 83, 141);
    }
  }

  .custom-select {
    padding: 10px 0;

    .option {
      width: 100%;
      line-height: 40px;

      label {
        display: flex;
        justify-content: space-between;

        span {
          font-size: 18px;
          font-weight: 600;
          color: #6b6b6b;
        }
      }

      label:hover {
        background: rgb(238, 238, 238);
      }
    }

    .el-icon-check {
      color: rgb(49, 192, 97);
      line-height: 40px;
      margin-right: 5px;
      font-size: 16px;
      font-weight: 600;
    }
  }
}

.el-icon-warning-outline {
  font-size: 16px;

  margin: 0 10px;
}
.structure{
display: flex;
}
</style>