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>


  • 相关阅读:
    权限和分组
    验证与授权
    CSRF、XSS、clickjacking、SQL 的攻击与防御
    上下文处理器及中间件
    类和实例
    偏函数
    生成器
    迭代 复习
    函数调用 复习
    复习 条件判断,循环
  • 原文地址:https://www.cnblogs.com/codeDevotee/p/13857264.html
Copyright © 2011-2022 走看看