vue+element 表格筛选

 筛选是element 组件 自己有的东西，按照文档撸 是没有问题 
这里存在一个情况是，如果 筛选 的数据没有 那么整个表格为空白，产品要加提示 例如：暂无筛选的数据

解决方案：通过 ref 获取整个table  里面有一个tableData(就是当前表格数据，我的是这个)，这个一个数组，可根据这个数据进行判断筛选后的数据是否为空
补充：会出现筛选不符合条件 出现 提示，点击重置按钮时 提示依然存在的问题
根据  filter-change 方法 进行判断

 

<template>
  <el-table ref="filterTable" :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" sortable width="180" column-key="date"></el-table-column> //sortable 属性 排序作用
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址" ></el-table-column>
    <el-table-column
      prop="tag"
      label="标签"
      width="100"
      :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]" //这里是代表有多少个筛选项 格式 必须为数组对象，并且每个对象必须有 text 和 value key值
      :filter-method="filterTag"　　　　//可以理解为过滤 方法 ，一共有value , row , column 可以依次打印看看咯
      filter-placement="bottom-end"　　//代表弹框打开的位置
    >
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag === '家' ? 'primary' : 'success'"
          disable-transitions
        >{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  components: {},
  name: "table-filter",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "张小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "家"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          tag: "公司"
        },
        {
          date: "2016-05-01",
          name: "鲁小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          tag: "家"
        },
        {
          date: "2016-05-03",
          name: "鞠磊小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          tag: "公司"
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {
　　//筛选方法，返回的是 true or false
    filterTag(value, row, column) {
      return row.tag === value;
    }
  }
};
</script>