前端如何在table表格的表头上增加可点击的下拉框

纯属做笔记,

在表头上增加可点击的下拉框  选中下拉框中任意一项 表头值不变但高亮  点击全部 则恢复列表初始

                <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;
            }
        },

猜你喜欢

转载自blog.csdn.net/qq_42177730/article/details/126289609