1. 程式人生 > 實用技巧 >vue table篩選設定預設值

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); }, }