关于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;
    }  
}
展开阅读全文

Windows版YOLOv4目标检测实战:训练自己的数据

04-26
©️2020 CSDN 皮肤主题: 游动-白 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值