zoukankan      html  css  js  c++  java
  • vue elementUI自定义表头,表头加个图标

    需求是表头加个图标,保留排序功能

    questionIcon(h, { column, $index }) {
                console.log(h);
                console.log(column);
                console.log($index);
                return h("span", [
                    h("span", {
                        class: "questionIcon",
                        on: {
                            click: () => {
                                console.log(`${column.label}   ${$index}`);
                            }
                        }
                    }),
                    h("span", column.label)
                ]);
            }
    <el-table-column label="引流类型" width="90" :render-header="questionIcon" sortable="custom">
                        <template slot-scope="scope">
                            <span class="baiduMobile-icon">{{ scope.row.t3 }}</span>
                        </template>
                    </el-table-column>

    说明:

    sortable="custom" 表示后端排序
    :render-header="questionIcon" 表示自定义表头的样式,不影响现有的排序功能

    效果如下:

    由于需求的需要,经过改造实现自定义参数:

    questionIcon(h, { column, $index }, text) {
                console.log(text);
                console.log(h);
                console.log(column);
                console.log($index);
                return h("span", [
                    h("span", {
                        class: "questionIcon",
                        on: {
                            click: () => {
                                console.log(`${column.label}   ${$index}`);
                            }
                        }
                    }),
                    h("span", column.label)
                ]);
            }
    <el-table-column label="引流类型" width="90" :render-header="(h,obj) => questionIcon(h,obj,'test')" sortable="custom">
                        <template slot-scope="scope">
                            <span class="baiduMobile-icon">{{ scope.row.t3 }}</span>
                        </template>
                    </el-table-column>


  • 相关阅读:
    pku 2446 Chessboard
    POJ 2724 Purifying Machine
    14 Flash内存控制器(FMC)
    10 PWM发生器和捕捉定时器
    15 I2C总线控制器
    18 RTX Kernel实时系统
    17模拟数字转换
    19.1 详解startup_M051.s
    16串行外围设备接口(SPI)控制器
    13看门狗
  • 原文地址:https://www.cnblogs.com/codeDevotee/p/13857264.html
Copyright © 2011-2022 走看看