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="width: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' }
                })
              ])
            ],
          )
        ],
      )
    },

 

posted @ 2021-03-13 10:45  javascript9527  阅读(684)  评论(0编辑  收藏  举报