纯属做笔记,
在表头上增加可点击的下拉框 选中下拉框中任意一项 表头值不变但高亮 点击全部 则恢复列表初始
<el-table-column
prop="type"
label="日志类型" width="150">
<template slot-scope="scope">
{
{scope.row.type[1]}}
</template>
<template slot-scope="scope" slot="header">
<span class="cursorPointer" @click="clickButton('日志类型')" :class="(formData.type !== '' && formData.type!== 0) ? 'active' : ''">日志类型<i class="iconfont iconshaixuan"></i></span>
<el-select popper-class="thSelect" style=" width:140px;" v-model="formData.type" clearable placeholder="请选择日志类型" size="small" ref="loglistRef" @change="handlesearch">
<el-option
v-for="(item,index) in typelist"
:key="index"
:label="item[1]"
:value="item[0]">
</el-option>
</el-select>
</template>
</el-table-column>
table表头里加入class class="myTable"
style里增加高亮样式:
/deep/ .myTable{
thead {
.cursorPointer{
cursor: pointer;
&.active{
color:#4C7AE3;
i{
color:#4C7AE3;
}
}
}
.cell{
line-height: 15px;
>span{
position: absolute;
}
}
.iconfont{
color:rgba(72,72,102,0.32);
margin-left:5px;
}
.el-select{
height: 0;
visibility: hidden;
.el-input, .el-input__inner{
height: 0!important;
}
}
}
}
methods里添加以下方法:
icons(h, { column }) {//添加图标
let that = this
return h(
"div",
[
h("span", column.label),
h(
"i",
{
slot: "reference",
class: "iconfont iconshaixuan",
style:"color:rgba(72,72,102,0.32);margin-left:5px;vertical-align:initial",
on: {
click: function() {
that.clickButton(column);
}
}
},
""
)
]
);
},
// 图标点击事件
clickButton(type) {
switch (type) {
case '日志类型':
this.$refs.loglistRef.toggleMenu();
break;
}
},