步骤:
在需要筛选的列中插槽法:
<el-table-column prop="mount" label="交易量区间" align="left">
<!-- eslint-disable-next-line -->
<template slot="header" slot-scope="scope">
<el-dropdown trigger="click" size="medium " @command="handleCommand">
<span style="color:#909399">
{{ menuText }}<i class="el-icon-arrow-down el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="(item, index) in section"
:key="index"
:command="item"
>
{{ item }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
data中定义下拉列表:
data() {
return {
menuText: '交易量区间',
section: [
'一万',
'两万',
'三万'
]
}
}
在methods中定义筛选方法:
// 表格筛选
handleCommand(item) { //这里定义方法可在选取时触发
this.menuText = item
}
效果如图: