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>