element表格实现多列的模糊查询

介绍:最近产品新提的需求,需要把后端返回的数组根据用户搜索的条件来展示相应的东西

首先来看一下实现的效果图

html片段代码 

  <el-table border class="search-table" :data="tableData2">
      <el-table-column align="center" fixed type="selection" width="50" />
      <el-table-column fixed label="序号" type="index">
        <template #header>
          <div class="th-head">序号</div>
        </template>
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column fixed label="物料名称" prop="name" width="200">
        <template #header>
          <div class="th-head">物料名称</div>
          <el-input v-model="query.name" placeholder="输入物料名称查询" />
        </template>
      </el-table-column>
      <el-table-column label="规格说明" prop="desc" width="220">
        <template #header>
          <div class="th-head">规格说明</div>
          <el-input v-model="query.desc" placeholder="输入规格说明查询" />
        </template>
      </el-table-column>
      <el-table-column label="编号" min-width="300" prop="sNo">
        <template #header>
          <div class="th-head">收获单位</div>
          <el-input v-model="query.sNo" placeholder="输入收获单位查询" />
        </template>
      </el-table-column>
      <el-table-column class="date" label="时间" prop="date" width="300">
        <template #header>
          <div class="th-head">时间</div>
          <el-date-picker
            v-model="query.date"
            placeholder="选择日期"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="100">
        <template #header>
          <div class="th-head">操作</div>
        </template>
        <template #default="{ row }">
          <el-button size="small" type="text" @click="handleClick(row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

在data中定义的数据(此处使用的假数据,后期可根据后端返回的数据进行赋值)

 data() {
      return {
        tableData: [
          {
            date: '2016-05-02',
            name: '张小虎',
            desc: '哈哈哈哈',
            sNo: '22333444',
          },
          {
            date: '2016-05-04',
            name: '王大虎',
            desc: '信息已想哈',
            sNo: '9988777',
          },
          {
            date: '2016-05-01',
            name: '李小虎',
            sNo: '22334444',
            desc: '黑乎乎啥啥啥',
          },
          {
            date: '2022-05-03',
            name: '陈大虎',
            sNo: 'ssddddaaaa',
            desc: '就是调平看一眼',
          },
          {
            date: '2022-03-03',
            name: '陈大王',
            sNo: 'xxxxxsssaaa',
            desc: '就是调平看一眼',
          },
        ],
        query: {
          name: '',
          desc: '',
          sNo: '',
          date: '',
        },
      }
    },

js部分,此处使用的是vue的computed计算属性,当计算的数据变化了就会重新进行计算

 computed: {
      //输入值筛选
      tableData2() {
        return this.tableData.filter(
          //name，desc,sNo,date是要筛选的属性，this.query.name,this.query.dec是input框里v-model绑定的输入的两个值
          (item) =>
            item.name.includes(this.query.name) &&
            item.desc.includes(this.query.desc) &&
            item.sNo.includes(this.query.sNo) &&
            item.date.includes(this.query.date)
        )
      },
    },

此功能实现还有个踩坑的地方,由于有一个日期选择器,当选择了日期再进行清空的时候,this.query.date就会变成null,计算属性就无法计算到,于是就可以使用一个监听事件,来监听date的变化,代码如下:

 watch: {
      'query.date': {
        handler: function () {
          console.log('监听====')
          if (this.query.date == null) {
            this.query.date = ''
          }
        },
        deep: true,
      },
    },

以上代码就可以实现产品的需求,完结撒花!!!!