• elementui自定义表格头部的两种方法


     

    在项目中,有时候我们的项目要根据设计图来修改我们的表格的头部,一下就是element提供的两种修改头部的方法:

    1.  Table-column Attributes  render-header 方法

    复制代码
       <el-table-column
          prop="delete"
          label="删除"
          :render-header="renderHeader"
          width="120"
        >
          <template slot-scope="scope">
            <el-button 
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          
          </template>
        </el-table-column>

    复制代码
    复制代码
    methods:
    // 修改表格的头信息 renderHeader(h, { column }) { // 重新渲染表头 if (column.property == 'delete') { return h('i', { class: this.clickDeleteTime == 1 ? 'el-icon-delete c-red' : 'el-icon-delete', style: 'font-size:24px', on: {//这个是你的点击方法 click: () => { this.clearAll() } } }) } },
    复制代码

    这个是第一种方法:现在你就可以看到你的头部就是你想要的效果了,不过你会发现的console报了一个警告。

    对于我这种对代码有洁癖的人,很不喜欢这种,开个小玩笑,那就解决掉这个警告不就行了,仔细看了下element文档,有个新的方法,这就是第二个实现方法。

     2.

    Table-column Scoped Slot

    复制代码
    <el-table-column
          prop="delete"
          label="删除"
          width="120"
        >
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <i
              class="el-icon-delete"
              @click="clearAll"
            >
            </i>
          </template>
          <template slot-scope="scope">
            <el-button
              type=""
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
    复制代码

    第二种方法完美解决,是不是很简单,那就开是行动吧!

  • 相关阅读:
    Petya and Countryside
    大数A+B
    python-requests正则
    python-UnicodeDecodeError: 'gbk' codec can't decode byte 0xa8 in position 157: illegal multibyte sequence
    python-mysql数据迁移
    python-flask框架路由
    python-flask框架基础
    MYSQL-内外自连接-判断函数
    MYSQL-分组查询-where和having的区别
    mysql增删
  • 原文地址:https://www.cnblogs.com/onesea/p/15433757.html
Copyright © 2020-2023  润新知