element-ui表格的表头使用类似下拉框样式

记录elementui表格中表头插入下拉小指标的方法.

<template>
<div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>表格</span>
</div>
<div class="content">
<template>
<el-table
@selection-change="handleSelectionChangeUsers"
:data="tableData"
style="width: 100%">
<el-table-column
label="Date"
prop="date">
</el-table-column>
<el-table-column
label="Name"
prop="name">
</el-table-column>
<el-table-column
prop="flag"
align="center">
<template slot="header" slot-scope="scope">
<el-dropdown trigger="click" @command="handleCommand" size="mini">
<span>
{{ tableTitle }}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item in jobs"
:key="item.id" :command="item.label">
{{item.label}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
</template>
</div>
</el-card>
</div>
</template>

<script>
export default {
data() {
return {
tableData: [{
date: '平安',
name: '27%',
address: '45%',
flag: '12'
}, {
date: '市场',
name: '27%',
address: '45%',
flag: '12'
}, {
date: '同业-R',
name: '27%',
address: '45%',
flag: '12'
}, {
date: '同业-T',
name: '27%',
address: '45%',
flag: '12'
}],
search: '',
jobs: [
{
label: '整体',
value: 'ZT',
},
{
label: '车',
value: 'C',
},
{
label: '飞车',
value: 'FC',
},
{
label: '餐险',
value: 'CX',
},
],
tableTitle: '整体',
}
},

1cca8
methods: {
handleCommand(command) {
console.log(command);
this.tableTitle = command;
this.tableData = [{
date: '哈哈',
name: '27%',
address: '45%',
flag: '12'
}, {
date: '啦啦',
name: '27%',
address: '45%',
flag: '12'
}, {
date: '阻止',
name: '27%',
address: '45%',
flag: '12'
}, {
date: '变v',
name: '27%',
address: '45%',
flag: '12'
}];
},
handleSelectionChangeUsers() {
console.log('变了');
}
},
}
</script>

<style lang="less" scoped>
</style>