使用于element组件通过调用后端数据实现的筛选

最近在开发一个系统时发现element-ui官方文档提供的筛选功能只能筛选前端页面中的数据，而当存在大量数据且每天都会出现新的筛选项时会变得难以处理，所以整理了一篇使用vue+axios+element实现的通过调用后台数据完成全局筛选，希望各位大佬如果有更好的方法可以来指正一下

页面代码（部分）

<el-table
      ref="filterTable"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row>
      

	<el-table-column
        label="院系"
        align="center"
        prop="sdept"
        :filters="sdeptFilter"
        filter-placement="bottom-end"
        :filter-method="filterChange"
      >
        <template slot-scope="scope">{
    
    {
    
     scope.row.sdept }}</template>
      </el-table-column>
      
</el-table-column>
    

javascript代码（部分）

export default {
    
    
  data() {
    
    
	sdeptFilter: []
}
mounted() 
	//挂载后获取后端数据将数据存入sdeptFilter
    axios
   	//这是我的url，记得改成自己的
      .get("/dev-api/vue-admin-template/table/list")
      .then(res => {
    
    
     //将后端的数据存储进一个变量，因为接受的是一组数据的对象所以我循环把我想要的单个数据存储进
	//一个数组变量并调用去重函数，存储到data里的sdeptFilters
        let itSdept = res.data.data.items;
        let array = [];
        for (let i = 0; i < itSdept.length; i++) {
    
    
          array.push(itSdept[i].sdept);
        }
        let arr = this.unique(array);
        for (let i = 0; i < arr.length; i++) {
    
    
          let temp = {
    
     text: arr[i], value: arr[i] };
          this.sdeptFilter.push(temp);
        }
        this.unique(this.sdeptFilter);
      })
      .catch(error => {
    
    
        console.log(error);
      });
  },
  methods: {
    
    
	//选择筛选时调用，实现筛选功能
	filterChange(value, row, column) {
    
    
    	return row["sdept"] === value
    }
	//将数组和对象去重
	unique(arr) {
    
    
      var hash = [];
      for (var i = 0; i < arr.length; i++) {
    
    
        if (hash.indexOf(arr[i]) == -1) {
    
    
          hash.push(arr[i]);
        }
      }
      return hash;
    }  
}