2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

下面的代码,如何修改为多条件筛选?

element-uivue.js作者:猿2048志愿者

问题描述

有一个筛选的表格,但是只能根据一个条件筛选,这里做了一个多选选择器,希望实现多条件筛选

相关代码

<template>
  <div class="table">
    <div class="search-Box">
         <el-select v-model="search" multiple placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    <el-table  :data="tables" border style="width: 100%">
      <el-table-column  prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column   prop="address"  label="地址"></el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        search: [],  //搜索
        tableData: [
          { date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
          {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},
          {date: '2016-05-01',name: '李小虎',address: '上海市普陀区金沙江路 1519 弄'},
        ],  //表格内容
        options: [{
          value: '王小虎',
          label: '王小虎'
        }, {
          value: '章小虎',
          label: '章小虎'
        }, {
          value: '李小虎',
          label: '李小虎'
        },],
      }
    },
    computed:{
      tables:function(){
        var search=this.search;
        if(search){
          return  this.tableData.filter(function(dataNews){
            return Object.keys(dataNews).some(function(key){
              return String(dataNews[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        return this.tableData
      }
    }
  }
</script>

求大神指教,如何修改,跪谢!

评论
点击刷新
评论
相关问题
×添加代码片段