vue table筛选设置默认值

data() {
  return {

    namespace_filters: [],
    namespace_filter_default: 'fusionwork', // 如果namespace_filters中包含fusionwork，就优先显示fusionwork的pod
   .......
  }
},
created() {
  this.fetchClusterData();
},
methods: {
  fetchClusterData() {
    Api.queryCluster({status: 1}).then((response) => {
　　　　......
        this.fetchData(this.cluster_name);
    })
  },// 异步表格获取数据
  fetchData(cluster_name) {
    this.listLoading = true
    Api.queryPods({cluster_name: cluster_name}).then(response => {this.list = response.data
      .........      this.namespace_filters = this.listtofilter(namespace_filters)
      if(namespace_filters.indexOf(this.namespace_filter_default )>-1){
        this.setDefaultFilterValue('namespace',this.namespace_filter_default)
      }
    })
  },

  setDefaultFilterValue(filters_field,filter_default_value) {
    this.$refs.myTable.columns[0].filteredValue = [this.namespace_filter_default];
    this.blist = this.list.filter(data => {
      return data[filters_field].includes(filter_default_value)

    })
    this.total = this.blist.length
    return this.blist
  },
  //筛选事件
  fliterChange(filters) {
    console.log(filters)
    let filterskey, filters_field
    if (filters.hasOwnProperty('status_phase')) {
      filterskey = filters.status_phase
      filters_field = 'status_phase'
      this.clearFilter('namespace')
      this.clearFilter('name')
    } else if (filters.hasOwnProperty('namespace')) {
      filterskey = filters.namespace
      filters_field = 'namespace'
      this.clearFilter('status_phase')
      this.clearFilter('name')
    } else {
      filterskey = filters.name
      filters_field = 'name'
      this.clearFilter('status_phase')
      this.clearFilter('namespace')

    }

    // console.log(filterskey)
    if (filterskey.length > 0) {
      this.blist = this.list.filter(data => {
        return data[filters_field].includes(filterskey)
      })
      this.total = this.blist.length
      return this.blist
    }
    this.blist = this.list
    this.total = this.blist.length
    return this.list
  },
  //清空筛选条件
  clearFilter(columnKey) {
    this.$refs.myTable.columns[0].filteredValue = [];
    this.$refs.myTable.clearFilter(columnKey);
  },

}

标签：vue,name,namespace,clearFilter,filter,blist,filters,table,默认值
来源： https://www.cnblogs.com/cherylgi/p/13653812.html