vue表格el-table的表头的多重筛选功能（接后端数据）

 html

      <!-- 第二行 内容主体列表 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        @filter-change="filterChange"
      >
        <!-- 03 -->
        <el-table-column
          prop="productType"
          label="商品类型"
          min-width="120"
          align="center"
          column-key="shangpinleixingKey"
          :filters="shangpinleixingFilter()"
        >
          <template slot-scope="{ row }">
            <div>
              {{
                row.productType == 1
                  ? "商店实物产品"
                  : row.productType == 2
                  ? "商店虚拟道具"
                  : row.productType == 3
                  ? "商店虚拟礼包"
                  : row.productType == 4
                  ? "电量充值产品"
                  : ""
              }}
            </div>
          </template>
        </el-table-column>

        <!-- 09 -->
        <el-table-column
          prop="wlSendState"
          label="订单状态"
          min-width="100"
          align="center"
          column-key="qianshouKey"
          :filters="qianshouFilter()"
        >
          <template slot-scope="{ row }">
            <div>
              {{
                row.wlSendState == 1
                  ? "待发货"
                  : row.wlSendState == 2
                  ? "待收货"
                  : row.wlSendState == 3
                  ? "已签收"
                  : ""
              }}
            </div>
          </template>
        </el-table-column>

---

 data 

    return {
      shangpinleixing: null, // 筛选的商品类型
      qianshou: null, // 筛选的签收类型

      orderInputMoren: "", // 搜索框-默认
      orderInputDingdan: "", // 搜索框-订单
      orderInputXuehao: "", // 搜索框-学号
      orderInputNicheng: "", // 搜索框-昵称
      tableData: [], // 订单的列表

      pagination: {
        perPage: 10,
        currentPage: 1, // 当前页
        total: 0,
      },
    }

---

methods

    // 获取筛选的字段
    shangpinleixingFilter() {
      let shangpin = [
        // 发请求获取筛选项的数据
        { text: "商店实物产品", value: "1" },
        { text: "商店虚拟道具", value: "2" },
        { text: "商店虚拟礼包", value: "3" },
        { text: "电量充值产品", value: "4" },
      ];
      return shangpin;
    },

    qianshouFilter() {
      let qianshou = [
        // 发请求获取筛选项的数据
        { text: "待发货", value: "1" },
        { text: "待收货", value: "2" },
        { text: "已签收", value: "3" },
      ];
      return qianshou;
    },

    // 监听筛选项的变化
    filterChange(filterObj) {
      console.log(filterObj);
      console.log(filterObj.shangpinleixingKey);
      console.log(filterObj.qianshouKey);

      if (filterObj.shangpinleixingKey) {
        // 把filterObj的值分别取出来
        this.shangpinleixing = filterObj.shangpinleixingKey.join();
        console.log(this.shangpinleixing, "商品类型key");
      } else if (filterObj.qianshouKey) {
        this.qianshou = filterObj.qianshouKey.join();
        console.log(this.qianshou, "签收key");
      }

      if (
        filterObj.shangpinleixingKey ||
        filterObj.qianshouKey
      ) {
        console.log("点击筛选");
        this.getSxOrderList();
      } else {
        console.log("点击重置");
      }
    },

    // 查询表头判断类型的大的列表
    async getSxOrderList() {
      const res = await getOrderList({
        page: this.pagination.currentPage,
        rows: 10,
        productType: this.shangpinleixing ? this.shangpinleixing : null, // 商品类型
        wlSendState: this.qianshou ? this.qianshou : null, // 签收类型
        orderId: this.orderInputDingdan ? this.orderInputDingdan : null,
        studentNumber: this.orderInputXuehao ? this.orderInputXuehao : null,
        content: this.orderInputNicheng ? this.orderInputNicheng : null,
      });
      if (res.status == 200) {
        this.tableData = res.data.orderList.list;
        console.log(this.tableData);
        this.pagination.total = res.data.orderList.totalElements;

        // 支付时间
        this.tableData.forEach((item) => {
          item.payTime = formatDateTime(item.payTime);
          // console.log(item.payTime, "-----时间戳转换成年-月-日-时-分-秒-----");
        });
      }
    },

    if (this.shangpinleixing || this.zhifuleixing || this.qianshou) {
        this.getSxOrderList();
      } else if (this.orderInputNicheng) {
        this.getNiChengOrderList();
        } else {
        ***
        }

---

参考文献：

vue使用elementui中的el-table后端筛选功能讲解 - 知乎