vue中使用filter筛选列表信息

列表筛选地址：https://blog.csdn.net/qq_39101581/article/details/107783302
正则表达式RegExp：http://www.vue5.com/es6/es6_regexp.html
完整代码如下:
包含
1.根据所判断得字段显示不同信息
2.字段搜索筛选
3.类型筛选
4.时间筛选
语法
array.filter(function(currentValue,index,arr), thisValue)

urrentValue必须。当前元素的值
index可选。当前元素的索引值
arr可选。当前元素属于的数组对象

<template>
  <div>
    
    
    <el-input placeholder="请输入内容" v-model="wordKey" style="width: 30%">
      <i slot="prefix" class="el-input__icon el-icon-search">i>
    el-input>
    
    <div class="block">
      <span class="demonstration">默认span>
      <el-date-picker
        v-model="value1"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
      >
      el-date-picker>
    div>
    
    <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
    el-switch>只显示北京
    
    <el-select v-model="filterType" placeholder="请选择">
      <el-option
        v-for="item in deviceTypeOptions"
        :key="item.Value"
        :label="item.Label"
        :value="item.Value"
      >
      el-option>
    el-select>
    
    <el-table
      :data="findItems"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> el-table-column>
      <el-table-column fixed prop="date" label="邮箱" width="150">
      el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> el-table-column>
      <el-table-column prop="province" label="省份" width="120">
      el-table-column>
      <el-table-column label="状态" width="120">
        <template slot-scope="scope">
          <el-tag :type="statusColors[scope.row.statusss]">{{
            statuses[scope.row.statusss]
          }}el-tag>
        template>
      el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="300"
      >el-table-column>
      <el-table-column prop="times" label="时间" width="120"> el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看el-button
          >
        template>
      el-table-column>
    el-table>
    <el-button
      style="margin-top: 50px"
      size="small"
      :disabled="dis"
      @click="jdks"
      >查看选中信息el-button
    >
    
    <one-demo ref="onedemo" :form-data="formData" @one="two">one-demo>
    
    <div @click="two()" :class="{ active: showmode }">{{ ada }}div>
  div>
template>

<script>
import oneDemo from '../components/xiangQing/oneDemo.vue'
import Parameter from '@/utils/parameters'
export default {
  name: 'home',
  components: { oneDemo },
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '十大',
        province: '上海',
        statusss: 2,
        address: '上海市普陀区金沙江路 1518 弄',
        times: '2021-06-02'
      }, {
        date: '[email protected]',
        name: '骄傲和世界的',
        province: '北京',
        statusss: 2,
        address: '上海市普陀区金沙江路 1517 弄',
        times: '2021-07-02'
      }, {
        date: 'zsdasda',
        name: 'd阿斯顿',
        province: '北京',
        statusss: 1,
        address: '上海市普陀区金沙江路 1519 弄',
        times: '2021-08-02'
      }, {
        date: '2016-05-03',
        name: '法国人',
        province: '北京',
        statusss: 3,
        address: '上海市普陀区金沙江路 1516 弄',
        times: '2021-09-02'
      }],
      formData: {},
      // 复选框查看选中信息按钮
      dis: true,
      multipleSelection: [],
      showmode: true,
      ada: '78979',
      i: 1,
      // 搜索框关键词
      wordKey: '',
      // 开关按钮
      value: true,
      // 时间筛选框
      value1: '',
      // 状态名字
      statuses: ['未开始', '进行中', '搁置', '完成'],
      // 标签颜色
      statusColors: ['info', 'primary', 'warning', 'success'],
      // 下拉筛选
      deviceTypeOptions: Parameter.AT.DeviceType.Items,
      // 绑定下拉框的值
      filterType: ''
    }
  },
  watch: {},
  methods: {
    handleClick (item) {
      this.formData = item
      this.$refs.onedemo.visible = true
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      if (this.multipleSelection.length > 0) {
        this.dis = false
      } else {
        this.dis = true
      }
    },
    jdks () {
      console.log(this.multipleSelection)
    },
    two () {
      this.i++
      // 样式得引用或不引用
      this.showmode = !this.showmode
      if (this.i % 2 === 0) {
        this.ada = 'sdasd'
        // this.showmode = false
      } else {
        this.ada = '8564'
        // this.showmode = true
      }
    }
  },
  computed: {
    // 筛选
    findItems: function () {
      var _this = this
      return _this.tableData.filter((item) => {
        // 字段筛选
        var reg = new RegExp(this.wordKey, 'i')
        return !this.wordKey || reg.test(item.name)
      }).filter((item) => {
        // 时间筛选
        return !this.value1 || (this.value1[0] <= new Date(item.times) && this.value1[1] >= new Date(item.times))
      }).filter((item) => {
        // 标签下拉筛选
        return this.filterType === '' || item.statusss === this.filterType
      })
    }
  }
}
script>

<style>
.home {
  margin-top: 10%;
  font-size: 2.4em;
  font-weight: bold;
}
.btn1 {
  width: 120px;
  height: 50px;
  line-height: 50px;
  border: 1px solid #b93e3e;
  border: 0;
  outline: none;
}
.active {
  width: 120px;
  height: 50px;
  line-height: 50px;
  background-color: aquamarine;
  border: 1px solid #2a28ac;
  border: 0;
  outline: none;
}
style>