Vue Table过滤 filter

Vue Table过滤

一个可以有多种方法查询的表格

可以通过datepicker来选择查询，或者通过相似的input输入框来查询

<template>
  <div>
    <el-select v-model="selection" placeholder="请选择查询方式">
      <el-option
        style="margin-bottom: 30px; margin-right: 30px"
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-date-picker
      type="date"
      v-show="selection === '1'"
      placeholder="选择日期"
      v-model="selectData"
      value-format="timestamp"
      style="margin-bottom: 30px; margin-right: 30px; margin-left: 30px"
    ></el-date-picker>
    <el-input
      v-show="selection !== '1'"
      style="
        margin-bottom: 30px;
        margin-right: 30px;
        margin-left: 30px;
        width: 300px;
      "
      v-model="selectValue"
      placeholder="请输入内容"
    ></el-input>
    <!-- <el-button type="primary">查询</el-button> -->
    <el-table :data="filterTableData" height="250" border style="width: 100%">
      <el-table-column prop="registerDate" label="日期" width="180">
        <template slot-scope="scope">
          <div>
            {{formatDate(scope.row.registerDate)}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="idcard" label="身份证号"> </el-table-column>
      <el-table-column prop="isPassed" label="是否通过"> </el-table-column>
      <el-table-column prop="reason" label="原因"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "QueryRegister",
  data() {
    return {
      tableData: [
        {
          registerDate: 1643966814000,
          name: "1aa",
          idcard: "4saa",
          isPassed: "aa",
          reason: "aa",
        },
        {
          registerDate: 1613966854000,
          name: "2aa",
          idcard: "3aa",
          isPassed: "aa",
          reason: "aa",
        },
        {
          registerDate: 1642966214000,
          name: "3aa",
          idcard: "1aa",
          isPassed: "aa",
          reason: "aa",
        },
      ],
      options: [
        {
          value: "1",
          label: "日期查询",
        },
        {
          value: "2",
          label: "姓名查询",
        },
        {
          value: "3",
          label: "身份证号查询",
        },
        {
          value: "4",
          label: "注册结果查询",
        },
        {
          value: "5",
          label: "原因查询",
        },
      ],
      selectData:"",
      selection: "",
      selectValue: "",
    };
  },
  methods: {
    //TODO：表格过滤
    formatDate(dateStr) {
      var dayjs = require("dayjs");
      return dayjs(dateStr).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  computed: {
    filterTableData() {
        return this.tableData.filter((v) => {
          if (this.selection === "1") {
            var dayjs = require("dayjs");
            //这个地方是为了让日期选择没有值时，都能显示所有的内容
            if(this.selectData == "" || this.selectData == null){
              return v;
            }
            return dayjs(v.registerDate).isSame(this.selectData, 'day');
          } else if (this.selection === "2") {
            return v.name.indexOf(this.selectValue) !== -1;
          } else if (this.selection === "3") {
            return v.idcard.indexOf(this.selectValue) !== -1;
          } else if (this.selection === "4") {
            return v.isPassed.indexOf(this.selectValue) !== -1;
          } else if (this.selection === "5") {
            return v.reason.indexOf(this.selectValue) !== -1;
          }else{
            return v;
          }
        });
      }
    },
};
</script>

<style>
</style>

通过日期查询

通过文本查询