<el-table
:data="tableData"
highlight-current-row
v-loading="listLoading"
element-loading-text="请稍后..."
style="width: 100%;"
@filter-change="filterTagTable"
>
<el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
<el-table-column prop="content" label="提交内容" align="left" show-overflow-tooltip></el-table-column>
<el-table-column
prop="replied"
label="回答状态"
align="center"
width="120"
:filter-multiple="false"
:filters="filterStatus"
filter-placement="bottom-end"
:column-key=" 'aStatus' "
>
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.replied">已回答</el-tag>
<el-tag type="info" v-else>未回答</el-tag>
</template>
</el-table-column>
<el-table-column label="更多" align="right" width="300">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
>查看详情</el-button>
<el-button size="mini" type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
data(){
return {
filterStatus: [{ text: "已回答", value: 1 }, { text: "未回答", value: 0 }],
listQuery:{
status:''
}
}
},
methods:{
filterTagTable(filters){
if(filters.aStatus){
this.listQuery.status = filters.aStatus[0]
}
this.getAll() // 筛选所选项下的所有数据，需要调用后端接口
}}
效果图
注意：
@filter-change 要写在table根元素，也就是<el-table @filter-change="filterTagTable"></el-table>
需要筛选的项，要写上 :column-key=" ' aStatus' "
3. 要搜索全局，就要去掉对应筛选项的 :filter-method="xx"。
ps: filter-method 筛选当前页面，不会请求后端接口，条数多的话，会造成死循环
