天天看點

使用于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;
    }  
}