表格加上表格头部的搜索封装

searchTable.vue

<template>
  <div class="searchTable">
    <TableHeaderVue
      v-if="showHeadSearch"
      :searchCdt="searchCdt"
      :total="searchTotal"
      :searchValue="complexParamSearch"
    />
    <div class="tableMain" :class="{ showHeight: showHeadSearch }">
      <!-- <slot></slot> -->
      <div class="header">
           <div class="name">
          <el-button type="primary" @click="addStandard" v-if="tableObj.addbtn"
            >+ {{ tableObj.addTitle }}</el-button
          >
          <div v-else>列表展示</div>
        </div>

        <div class="searchInput">
          <el-input
            :disabled="showHeadSearch"
            maxlength="20"
            placeholder="日期查询"
            v-model.trim="searchValue"
            class="input"
            style="width: 400px"
            @keyup.enter.native="searchFn"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchFn"
            ></el-button>
          </el-input>
          <el-button class="gaojisearch" @click="superSearchFn"
            >高级查询</el-button
          >
        </div>
      </div>
      <div class="tablecontent">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="light"
          style="width: 100%"
          :height="570"
          :header-cell-style="{
            background: 'rgba(250, 250, 250, 1)',
            height: '50px',
            color: 'rgba(26, 26, 26, 1)',
            fontWeight: '700',
          }"
          :row-style="{
            height: '50px',
            color: 'rgba(26, 26, 26, 1)',
          }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            v-for="(item, index) in tableObj.tableColumn"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
          >
            <template slot-scope="scope">
              <div v-if="item.type == 'text'">
                {{ scope.row[item.prop] }}
              </div>
              <div v-if="item.type == 'btnhandler'">
                <template v-for="(btn, index) in item.btnList">
                  <span
                    :key="index"
                    class="blueColor pointer"
                    :class="{ redColor: btn.btnLable == '删除' }"
                    @click="handleClick(scope.row, btn.buttonClick)"
                    >{{ btn.btnLable }}</span
                  >
                  <el-divider
                    direction="vertical"
                    :key="index"
                    v-if="item.btnList.length > index + 1"
                  ></el-divider>
                </template>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column
          prop="name"
          label="产品名称"
          width="240"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column
          prop="code"
          label="数量"
          width="160"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">{{ scope.row.number }}</template>
        </el-table-column>
        <el-table-column
          prop="number"
          label="单位"
          width="120"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">{{ scope.row.unit }}</template>
        </el-table-column> -->
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tableObj.paginationObj.currentPage"
          :page-sizes="[10, 50, 100, 200]"
          :page-size="tableObj.paginationObj.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableObj.paginationObj.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import TableHeaderVue from "./tableHeader.vue";
import http from "@/utils/request";
export default {
  name: "searchTable",
  components: { TableHeaderVue },
  props: ["searchCdt", "tableObj", "searchTotal"],
  data() {
    return {
      showHeadSearch: false,
      searchValue: "", //input查询的条件
      complexParamSearch: "",
      multipleSelection: [],
      searchInfo: {}, //高级查询的查询条件
      tableData: [],
    };
  },
  //   inject: ["getTableData"],
  computed: {},
  created() {
    this.getTableData();
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.$emit("pageChange", val, "size");
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$emit("pageChange", val, "current");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //新增操作
    addStandard() {
      this.$emit("addStandardFn");
    },
    //高级筛选
    searchFn() {
      this.complexParamSearch = this.searchValue;
      let obj = {
        current: 1,
      };
      console.log(this.complexParamSearch, "this.complexParamSearch");
      this.getTableData(this.searchInfo, obj, this.complexParamSearch);
    },
    superSearchFn() {
      this.showHeadSearch = !this.showHeadSearch;
      if (!this.showHeadSearch) {
        const searchInfo = {};
        this.searchTotal = 0;
        let obj = {
          current: 1,
        };
        this.getTableData({}, obj, this.complexParamSearch);
      }
    },
    //让后端接口返回post类型
    getTableData(searchInfo, obj, searchValue) {
      let { tableObj } = this;
      if (obj) {
        this.tableObj.paginationObj.currentPage = obj.current;
      }
      let searchInfoFormat = {};
      if (searchInfo) {
        const { createTime, ...other } = searchInfo;
        searchInfoFormat = {
          ...other,
        };
        if (createTime?.length) {
          searchInfoFormat.createStartTime = createTime[0];
          searchInfoFormat.createEndTime = createTime[1];
        }
      }
      this.searchInfo = searchInfoFormat;

      http({
        method: "post",
        url: `${tableObj.apiFun.url}`,
        data: {
          ...searchInfoFormat,
          complexParam: this.showHeadSearch ? null : searchValue,
          page: this.currentPage,
          size: this.pageSize,
        },
      })
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.data.records;
            this.tableObj.paginationObj.total = res.data.total;
            if (searchInfo) {
              this.searchTotal = res.data.total;
            }
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleClick(row, method) {
      if (method) {
        method(row);
      }
    },
  },
  provide() {
    return {
      getTableData: this.getTableData,
    };
  },
};
</script>
<style scoped lang="less">
@import "~@/assets/less/table.less";
.searchTable {
  height: 100%;
  width: 100%;
  .showHeight {
    height: calc(100% - 80px) !important;
  }
  .tableMain {
    border-radius: 2px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid #e4e7ed;
    border-top: 1px solid transparent;

    .tablecontent {
      // border-top: 1px solid rgba(217, 217, 217, 1);
      // border-bottom: 1px solid rgba(217, 217, 217, 1);\
      border-top: 1px solid rgba(217, 217, 217, 1);
      max-height: 550px !important;
      padding: 16px;
      .el-table {
      }
    }
  }
}
</style>

引入如上封装的组件

<template>
  <div class="productStandard">
    <SearchTableVue
      ref="searchTableRef"
      :tableObj="tableObj"
      :searchCdt="searchCdt"
      :searchTotal="searchTotal"
      @addStandardFn="addStandardFn"
      @pageChange="pageChange"
    >
    </SearchTableVue>

    <!-- <tableHeader
      v-if="showHeadSearch"
      :searchCdt="searchCdt"
      :total="searchTotal"
      :searchValue="complexParamSearch"
    />
    <div class="tableMain" :class="{ showHeight: showHeadSearch }">
      <div class="header">
        <div class="name">
          <el-button type="primary" @click="addStandard"
            >+ 新增协会账号</el-button
          >
        </div>
        <div class="searchTable">
          <el-button class="gaojisearch" @click="superSearchFn"
            >高级查询</el-button
          >
        </div>
      </div>
      <div class="table">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="light"
          style="width: 100%"
          :height="570"
          :header-cell-style="{
            background: 'rgba(250, 250, 250, 1)',
            height: '50px',
            color: 'rgba(26, 26, 26, 1)',
            fontWeight: '700',
          }"
          :row-style="{
            height: '50px',
            color: 'rgba(26, 26, 26, 1)',
          }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="序号" width="120">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="账户类型"
            width="250"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{ scope.row.type }}</template>
          </el-table-column>

          <el-table-column label="账户手机" :show-overflow-tooltip="true">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column
            label="注册时间"
            width="250"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{ scope.row.num }}</template>
          </el-table-column>
          <el-table-column
            label="所属企业名称"
            width="250"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{ scope.row.num }}</template>
          </el-table-column>
          <el-table-column label="账号状态" fixed="right" width="160">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.enableStr"
                active-value="1"
                inactive-value="0"
                active-color="rgba(22, 93, 255, 1)"
                inactive-color="rgba(242, 243, 245, 1)"
                @change="onChange($event, scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="handler"
            label="操作"
            fixed="right"
            width="249"
          >
            <template slot-scope="scope">
              <div>
                <span class="blueColor pointer" @click="edit(scope.row)"
                  >编辑</span
                >
                <el-divider direction="vertical"></el-divider>
                <span class="blueColor pointer" @click="resetPsw(scope.row)"
                  >重置密码</span
                >
                <el-divider direction="vertical"></el-divider>
                <span class="blueColor pointer" @click="see(scope.row)"
                  >查看</span
                >
                <el-divider direction="vertical"></el-divider>
                <span class="redColor pointer" @click="del(scope.row)"
                  >删除</span
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 50, 100, 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div> -->
    <ViewAccount
      ref="viewAccountRef"
      :searchInfo="searchInfo"
      :searchValue="complexParamSearch"
      :currentPage="currentPage"
    />
    <AddAccount
      ref="addAccountRef"
      :searchInfo="searchInfo"
      :searchValue="complexParamSearch"
      :currentPage="currentPage"
    />
    <!-- :searchInfo="searchInfo"
      :searchValue="complexParamSearch"
      :currentPage="currentPage" -->
  </div>
</template>
<script>
import tableHeader from "../components/tableHeader.vue";
import ViewAccount from "./components/viewAccount.vue";
import AddAccount from "./components/addAccount.vue";
import ResetPswPage from "../../views/dealerManagement/components/resetPsw.vue";
import http from "@/utils/request";
import SearchTableVue from "../components/searchTable.vue";
export default {
  name: "",
  components: {
    tableHeader,
    AddAccount,
    ViewAccount,
    ResetPswPage,
    SearchTableVue,
  },
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      pageSize: 10,
      searchValue: "",
      complexParamSearch: "",
      shzt: false,
      showHeadSearch: false,
      searchTotal: 0,
      total: 0,
      contractOptions: [
        { label: "开启", value: 1 },
        { label: "关闭", value: 2 },
      ],
      deliveryList: [],
      searchInfo: {},
    };
  },
  computed: {
    //搜索条件
    searchCdt() {
      return [
        {
          type: "select",
          placeholder: "请选择",
          label: "",
          prop: "status",
          options: this.contractOptions,
        },
        {
          type: "input",
          placeholder: "请输入",
          label: "产品名称",
          prop: "name",
        },
        {
          type: "date",
          placeholder: "开始日期",
          placeholder1: "结束日期",
          label: "注册时间",
          prop: "createTime",
        },
        {
          type: "input",
          placeholder: "请输入",
          label: "所属企业",
          prop: "num",
        },
      ];
    },

    //表格的每一项
    tableObj() {
      return {
         addTitle: "新增",
        addbtn: true, //展示新增按钮,否则展示文本
        tableColumn: [
          {
            type: "text",
            label: "产品名称",
            prop: "name",
          },
          {
            type: "text",
            label: "数量",
            prop: "number",
          },
          {
            type: "text",
            label: "单位",
            prop: "unit",
          },
          {
            type: "text",
            label: "创建日期",
            prop: "unit",
          },
          {
            type: "btnhandler",
            label: "操作",
            btnList: [
              {
                btnLable: "编辑",
                condition: () => {
                  return true;
                },
                buttonClick: (row) => {
                  console.log(row, "row");
                  this.$refs.addAccountRef.openDrawer(true, row);
                },
              },
              {
                btnLable: "查看",
                condition: () => {
                  return true;
                },
                buttonClick: (row) => {
                  console.log(row, "row");
                  this.$refs.viewAccountRef.openDrawer(true, row);
                },
              },
              {
                btnLable: "删除",
                condition: () => {
                  return true;
                },
                buttonClick: (row) => {
                  this.$confirm("确定删除吗?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  })
                    .then(() => {
                      http({
                        method: "get",
                        url: `/contract/delete?id=${row.id}`,
                      })
                        .then((res) => {
                          console.log(res);
                          if (res.code == 0) {
                            this.$message({
                              type: "success",
                              message: "删除成功",
                            });
                            let obj = {
                              current: 1,
                            };
                            this.$ref.searchTableRef({}, obj, null);
                          } else {
                            this.$message.error(res.msg);
                          }
                        })
                        .catch((err) => {
                          console.log(err);
                        });
                    })
                    .catch((err) => {
                      this.$message({
                        type: "info",
                        message: "取消删除操作",
                      });
                    });
                },
              },
            ],
          },
        ],
        paginationObj: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
        },
        apiFun: {
          url: "/operationLog/page",
        },
      };
    },
  },

  mounted() {},
  methods: {
    addStandardFn() {
      this.$refs.addAccountRef.openDrawer(true);
    },

    pageChange(val, type) {
      if (type == "size") {
        this.pageSize = val;
        this.getTableData(this.searchInfo, null, this.complexParamSearch);
      } else {
        this.currentPage = val;
        this.getTableData(this.searchInfo, null, this.complexParamSearch);
      }
    },
  },
  // provide() {
  //   return {
  //     getTableData: this.getTableData,
  //   };
  // },
};
</script>
<style scoped lang="less">
@import "~@/assets/less/table.less";
.productStandard {
  height: 100%;
  border-radius: 2px;
  .showHeight {
    height: calc(100% - 80px) !important;
  }
  /deep/.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;

    .name {
      font-size: 16px;
      font-weight: 700;

      color: rgba(0, 122, 255, 1);
    }

    .searchInput {
      display: flex;

      .input {
        width: 282px;
        height: 32px;
        margin-right: 8px;

        .el-input-group__append {
          background: rgba(255, 255, 255, 1) !important;
        }
      }

      .gaojisearch.el-button--default {
        border: 1px solid rgba(22, 109, 241, 1);
        font-size: 14px;
        line-height: 22px;
        color: rgba(22, 109, 241, 1);
      }

      .el-button:focus,
      .el-button:hover {
        background-color: transparent;
      }
    }
  }
}
</style>

点击高级查询才展示表格头部的搜索

表格头部封装在我的另一个文档

自己做的简单的封装，如有问题可以提出，大家一起学习！！！