目的:对有筛选功能的项,选中选择项后,点击确定,筛选参数值变更,调查询接口查询数据
要点:@filter-change + column-key
<template>
<div>
<el-table
width="100%"
:data="listData"
@filter-change="filterChange"
>
<el-table-column
prop="style"
width="120"
label="类型"
:filters="filterData"
:column-key="'style'"
/>
<el-table-column prop="name" label="Name" width="180" />
</el-table>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
methods: {
filterChange(filters){
if(filters.style){
console.log(filters.style)
this.getList()
}
},
},
});
</script>
注:打印filters.style,查看结果,即可拿到筛选项的参数值。