zoukankan      html  css  js  c++  java
  • element 表格表头 显示图标

    如同:

         <el-table-column
              v-for="(item,index) in monthList"
              :key="index"
              :sortable="false"
              :label="item.m"
              :render-header="renderHeader"
            >
              <template slot-scope="scope">
                <el-input v-if="scope.row['isOK'+(index+1)] " :ref="'gain'+(index+1)" v-model="scope.row['month' + (index+1)]" size="mini" style="100%;hight:100%" @keyup.native.enter="blurClick(scope)" @blur="blurClick(scope)" @keyup.native="scope.row['month' + (index+1)] = oninput(scope.row['month' + (index+1)])" />
                <span v-else size="mini">{{ scope.row['month' + (index+1)] }}</span>
              </template>
            </el-table-column>
    
    
       renderHeader(h, { column, $index }) {
          return h(
            // 添加一个span    标签 class类为renderHead 父级标签 最外层标签
            'span',
            {
              class: 'renderHead'
            },
            [
              // 把节点添加为table的头部信息单元格中
              h('span', column.label), // table 显示的label值 
              //  第二个节点 el-icon-question 标签(elemen图标) el-tooltip 为显示数据容器element中
              h(
                'el-tooltip',
                {
                  attrs: {
                    content: '可编辑',
                    placement: 'top'
                  }
                },
                // 添加span节点 定义class为el-icon-question
                [
                  h('span', [
                    h('span', {
                      attrs: { class: 'el-icon-edit' }
                    })
                  ])
                ],
              )
            ],
          )
        },
  • 相关阅读:
    算法——基础
    递归函数
    docker常用命令
    vue——计算属性和侦听器
    vue——指令系统
    vue——介绍和使用
    webpack、babel模块、模块化
    Nodejs介绍及npm工具使用
    ECMAScript 6简介
    easyui(入门)
  • 原文地址:https://www.cnblogs.com/javascript9527/p/14527870.html
Copyright © 2011-2022 走看看