element如何实现自定义表头?

有时候我们需要实现自定义表头,例如表头里加按钮啥的,这时候就需要用到自定义表头,但是官方对自定义表头的使用写的还是比较简单,今天就来详细说说

在需要使用自定义表头的表头上使用:render-header来启用自定义表头:

<el-table-column :render-header="button"></el-table-column>

button是一个自定义方法,里面可以返回按钮。

需注意:button方法里面返回的按钮元素,给它添加点击方法不能用@click或v-on:click,无法识别,会报错。要用箭头函数的写法 on-click={()=>this.showinfo()}

这里设置了1个按钮,有个变量来记录当前点击的是哪个按钮:

data(){

   return{

      isShow: true // 控制按钮的变量,点击按钮

   }

},

methods: {

   button(){

      if(this.isShow==true){

         // 如果点击了按钮,就给按钮切换背景色

         return (

            <div>

               <el-button on-click={()=>this.show()} style="background: #ffc9c9; color:#606266">按钮</el-button>

         

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-12 08:08:02       66 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-12 08:08:02       70 阅读
  3. 在Django里面运行非项目文件

    2024-07-12 08:08:02       57 阅读
  4. Python语言-面向对象

    2024-07-12 08:08:02       68 阅读

热门阅读

  1. 测试驱动开发的艺术:Xcode中实现TDD的全面指南

    2024-07-12 08:08:02       24 阅读
  2. 构建Memcached帝国:分布式部署策略与实践指南

    2024-07-12 08:08:02       27 阅读
  3. 数据库中的数据视图(View):深入理解与应用

    2024-07-12 08:08:02       30 阅读
  4. 技术难点思考SpringBoot如何集成Jmeter开发

    2024-07-12 08:08:02       22 阅读
  5. 读取和显示一系列二维码图像中的二维码数据

    2024-07-12 08:08:02       32 阅读
  6. Jupyter远程服务器设置

    2024-07-12 08:08:02       26 阅读
  7. 基于K线图的股市情绪分析及预测模型构建

    2024-07-12 08:08:02       31 阅读
  8. Android Retrofit post请求,@Body传递的参数转义问题

    2024-07-12 08:08:02       28 阅读
  9. Spring MVC 全面指南:从入门到精通的详细解析

    2024-07-12 08:08:02       27 阅读
  10. 每日一道算法题 204. 计数质数

    2024-07-12 08:08:02       28 阅读