element自定义 table 筛选

如图：

1.index.vue 页面

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    height="78vh"
    :header-cell-style="{
      background: '#f4f4f4',
      padding: 0,
      height: '32px',
      'text-align': 'center',
      color: '#222',
      'font-weight': 'bold',
    }"
    :cell-style="{ padding: 0, height: '26px' }"
    border
    highlight-current-row
  >
    <template v-for="(item, current) in tableConfig">
      <el-table-column
        align="center"
        :key="current"
        :prop="item.prop"
        :label="item.label"
        v-if="item.type"
      >
        <template slot="header">
          <custom-header
            :configItem="item"
            @inputEnterClick="handleInputEnterClick"
            @changeDateClick="handleChangeDateClick"
            @changeCheck="handleChangeCheck"
          >
          </custom-header>
        </template>
        <template slot-scope="scope">
          <template v-if="item.prop === 'date'">
            <span>{{ scope.row[item.prop].slice(0, 10) }}</span>
            <!-- <span>{{ scope.row[item.prop] | formatTime }}</span> -->
          </template>
          <template v-else>
            <span>{{ scope.row[item.prop] }}</span>
          </template>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
import customHeader from "./children/customHeader.vue";
import { tableConfig } from "./config/tableConfig";
export default {
  components: { customHeader },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02 12:13:14",
          name: "王小虎",
          type: "商品类型",
          model: "型号规格",
          unit: "单位",
          unitPrice: "成本单价",
        },
        {
          date: "2016-05-02 12:13:14",
          name: "王小虎",
          type: "商品类型",
          model: "型号规格",
          unit: "单位",
          unitPrice: "成本单价",
        },
      ],
      tableConfig: [],
    };
  },
  created() {
    this.tableConfig = tableConfig;
  },
  methods: {
    handleInputEnterClick(item) {
      console.log(item);
    },
    handleChangeDateClick(date) {
      console.log(date);
    },
    handleChangeCheck(item) {
      console.log(item);
    },
  },
};
</script>

<style></style>

2.customHeader.vue 页面 

<template>
  <el-popover
    placement="bottom"
    width="200"
    trigger="hover"
    popper-class="popperOptions"
  >
    <!-- 根据传递的类型展示对应的组件 -->
    <template v-if="configItem.type === 'input'">
      <el-input
        class="_update-table-input"
        v-model="configItem.field"
        :placeholder="configItem.hint"
        @keyup.enter.native="handleEnterClick(configItem)"
      ></el-input>
    </template>
    <template v-else-if="configItem.type === 'date'">
      <el-date-picker
        class="_update-table-daterange"
        v-model="configItem.field"
        type="date"
        :placeholder="configItem.hint"
        value-format="yyyy-MM-dd"
        @change="handleChangeDate(configItem)"
      >
      </el-date-picker>
    </template>
    <template v-else-if="configItem.type === 'range'">
      <div class="range">
        <el-input
          class="_update-table-input"
          v-model="configItem.start"
          placeholder="最小值"
          @keyup.enter.native="handleEnterClick(configItem)"
        ></el-input>
        <span>~</span>
        <el-input
          class="_update-table-input"
          v-model="configItem.end"
          placeholder="最大值"
          @keyup.enter.native="handleEnterClick(configItem)"
        ></el-input>
      </div>
    </template>

    <template v-else-if="configItem.type === 'switch'">
      <div class="switch">
        <el-switch
          v-model="configItem.check"
          @change="handleChangeCheck(configItem)"
        >
        </el-switch>
        <span v-if="!configItem.check">未审核</span>
        <span v-else>已审核</span>
      </div>
    </template>

    <!-- table 头部-->
    <span slot="reference" v-if="configItem.type"
      >{{ configItem.label }} <i class="el-icon-arrow-down"></i
    ></span>
    <span slot="reference" v-else>{{ configItem.label }}</span>
  </el-popover>
</template>

<script>
export default {
  props: {
    configItem: {
      type: Object,
      default: () => {},
      require: true,
    },
  },
  data() {
    return {
      value: true,
    };
  },
  created() {
    // console.log(this.configItem);
  },
  methods: {
    handleChangeDate(item) {
      this.$emit("changeDateClick", item);
    },
    handleEnterClick(item) {
      // console.log(item);
      if (item.type !== "range") {
        if (!item.field) return this.$message.error(`请输入${item.label}`);
      }
      this.$emit("inputEnterClick", item);
      // item.field = "";
    },
    handleChangeCheck(item) {
      this.$emit("changeCheck", item);
    },
  },
};
</script>

<style lang="less" scoped>
.range {
  // margin-top: 8px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  height: 32px;
  line-height: 32px;
  .el-input {
    width: 85px;
    /deep/.el-input__inner {
      width: 85px;
      height: 32px;
    }
  }
}
&._update-table-daterange {
  width: 200px !important;
  padding: 0px 0px !important;
  height: 34px !important;
  line-height: 34px !important;
  .el-input__inner {
    height: 32px;
  }
  .el-input__prefix {
    .el-input__icon {
      line-height: 32px;
    }
  }
  .el-input__suffix {
    .el-input__suffix-inner {
      .el-input__icon {
        line-height: 35px;
      }
    }
  }
}

.switch {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;

  // background-color: rebeccapurple;
  span {
    margin: 0 10px;
  }
}
</style>

3.tableConfig配置（可以自己进行配置）

export const tableConfig = [
  // {
  //   field: "", // 绑定的值
  //   label: "客户编号", // table-column label
  //   prop: "date", // table-column prop
  //   type: "range", // 展示的类型
  //   hint: "搜索 按Enter确认", // 提示文字
  //   receivableMoneyByStatic: "", // 最小值
  //   receivableMoneyByEnd: "", // 最大值
  // },
  {
    field: "",
    label: "日期",
    prop: "date",
    type: "date",
    hint: "搜索 按Enter确认",
  },
  {
    field: "",
    label: "姓名",
    prop: "name",
    type: "input",
    hint: "搜索 按Enter确认",
  },
  {
    field: "",
    label: "商品类型",
    prop: "type",
    type: "input",
    hint: "搜索 按Enter确认",
  },
  {
    field: "",
    label: "型号规格",
    prop: "model",
    type: "input",
    hint: "搜索 按Enter确认",
  },
  {
    field: "",
    label: "单位",
    prop: "unit",
    type: "input",
    hint: "搜索 按Enter确认",
  },
  {
    label: "成本单价",
    prop: "unitPrice",
    type: "range",
    hint: "搜索 按Enter确认",
    start: "", // 最小值
    end: "", // 最大值
  },
];