首页 > 其他 > 详细

element 表格表头 显示图标

时间:2021-03-13 12:02:00      阅读:17      评论:0      收藏:0      [点我收藏+]

如同:

技术分享图片

 

 

     <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‘ }
                })
              ])
            ],
          )
        ],
      )
    },

 

element 表格表头 显示图标

原文:https://www.cnblogs.com/javascript9527/p/14527870.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!