業務中table中需要篩選資料的功能，要求在表頭里實作一個下拉框進行篩選。首先， Element-ui 的官方檔案介紹，在列中設定filters filter-method屬性即可開啟該列的篩選，filters 是一個陣列，filter-method是一個方法，它用于決定某些資料是否顯示，會傳入三個引數：value, row 和 column。但是filter-method 是資料過濾的方法，但是只支持已有資料的篩選，不支持后臺排序。通過閱讀官方檔案，我們可以利用 filter-change 事件來實作。filter-change 會回傳一個引數，key：column 的 columnKey，可以用Object.keys（）獲取key值，然后判斷是那一列進行了篩選操作（多列篩選時用到），value：就是篩選的條件。
現在我要進行多列篩選，然后把篩選結果傳給后端，后端回傳篩選資料，目前只能做到單列篩選，多列篩選時會提示某一列未定義。
<el-table-column
label="模具類型"
prop="prOtCodeEM"
min-width="100"
column-key="prOtCodeEM"
:filters="[{ text: '塑模', value: '塑模' }, { text: '治工具', value: '治工具' }, { text: '沖模', value: '沖模' }]"
show-overflow-tooltip
></el-table-column>
<el-table-column
label="制程狀態"
prop="docIsOKEM"
min-width="105"
column-key="docIsOKEM"
:filters="[{ text: '已完成', value: '已完成' }, { text: '未完成', value: '未完成' }]"
show-overflow-tooltip
></el-table-column>
handleFilterChange(filters) {
this.loading = true;
this.$axios
.post("/screen", {
time1: this.timeData[0],
time2: this.timeData[1],
code1: filters.prOtCodeEM[0],
code2: filters.prOtCodeEM[1],
code3: filters.prOtCodeEM[2],
completed: filters.docIsOKEM[0],
uncompleted: filters.docIsOKEM[1]
})
.then(reponse => {
this.tablelist1 = reponse.data;
this.loading = false;
console.log(reponse);
})
.catch(error => {
console.log(error);
});
}
uj5u.com熱心網友回復：
data () {
return {
filterData: {}
}
},
methods: {
handleTable(filter) {
let key = Object.keys(filter)[0]
this.filterData[key] = aa[key]
console.log(this.filterData)
},
}
uj5u.com熱心網友回復：
aa => filter轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/79753.html
標籤：JavaScript
上一篇：最近在學習 運行環境，遇到問題