element ui的table的头部自定义

Element UI 表格自定义列头与提示

最新推荐文章于 2024-07-11 17:32:49 发布

转载最新推荐文章于 2024-07-11 17:32:49 发布 · 262 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/antyhouse/p/9946819.html

文章标签：

#ui

本文详细介绍了如何使用 Element UI 的表格组件实现自定义列头显示，并通过一个具体示例展示了如何在列头添加信息图标，点击后弹出评级规则的提示框。此外，还提供了代码实现的具体细节。

    <el-table-column label="级别"
                       min-width="120"
                       prop="clueLevel"
                       align="center" :render-header="renderHeader">   //这里写上:render-header="renderHeader"
        <template scope="scope" >
            {{ levelList[scope.row.clueLevel] }}
        </template>   
      </el-table-column>

  renderHeader(h, { column, $index }) {
      return h('p', [
        h('span', column.label),
        h('i', {
          class: 'el-icon-information',
          style: 'margin-left: 3px; color: ',
          on: {
            click: () => {
              console.log(111,888)
              let allErrorDataOrigin = '你好,你很好,你还看几眼,好的,'
              let allErrorData = allErrorDataOrigin.replace(/,/g, "\n")
              this.$alert(allErrorData, '评级规则', {
                confirmButtonText: '确定',
                callback: action => {}
              }); 
            }
          }
        })
      ])
    },

转载于:https://www.cnblogs.com/antyhouse/p/9946819.html