VUE 自定义表头实现table的过滤功能

女爷i 2021-09-27 16:04 1170阅读 0赞

>     html代码

下面是table
         <el-table-column v-for="(data,index) in mydata" 
         //下面调用的是自定义的函数
                                              :render-header="myHead"
                        >
     </el-table-column>

>     **js代码：**

export default{
       methods: {
    下面是自定义 的事件
    myHead(h, { column, $index }) {
          debugger;
    
          return h('span', {class: 'table-head', style: {width: '100%','text-align': 'center'}}, [
            h('span', {}, column.label),
            h('el-input', { style:{ width: '100%'},
            //主要1，这里必须是nativeOn 不能是on ，on的时候监听不到事件
              nativeOn: {
              //鼠标点击的事件
                click: () => {
                //点击确认按钮的事件
                alert('确定');
                            },
          keyup:(param)=>{
          键盘点击的事件
                  debugger
               let  a= param
            alert('键盘的回车事件');
          }
          /**
          keyup.enter.native:{
            alert('键盘的回车事件！');
          }**/
        }
        },'')
           ]
        )
      }
      }
    }
    运行的结果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]: /images/20210923/f7abc4089c71402fae9de1fc19fced81.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1170人围观）

还没有评论，来说两句吧...

相关阅读

相关实现自定义表头之导出功能（使用 SXSSFWorkbook ）

导出不使用模板效果展示 ![在这里插入图片描述][fbaca1c9630e4a41aa39a2863b0ec8e1.png] 代码展示： public

深藏阁楼爱情的钟/ 2024年03月22日 18:34/ 0 赞/ 45 阅读

相关 018：vue中自定义el-table 表头和单元格的样式

![在这里插入图片描述][32d2a1d099334cfba6adc4f84dd79e22.png_pic_center] 第018个 el-table 用于展示多条结构类

梦里梦外;/ 2024年03月16日 19:41/ 0 赞/ 35 阅读

相关 el-table组件动态创建列并填充值+自定义表头+自定义列模板+过滤

核心代码： <template> <el-table v-loading="loadingDadaInfo" :dat

爱被打了一巴掌/ 2023年10月09日 11:21/ 0 赞/ 20 阅读

相关 VUE element-ui 之table表格导出Excel（自定义表头+自定义导出字段内容）

导出excel自定义表头及自定义字段步骤： 1.安装依赖 npm install --save xlsx file-saver npm install

浅浅的花香味﹌/ 2023年01月17日 07:35/ 0 赞/ 363 阅读

相关 elementui自定义表头

前几天接到了一个这样的需求 ![这个表格的上面有两行显示文字，而且是变量][8739] 整个项目主要用的element-ui+vue，于是就去element-ui中寻找,找

约定不等于承诺〃/ 2022年04月23日 00:48/ 0 赞/ 470 阅读

相关 elementui自定义表格头，自定义表头table

elementUI的样式我觉得已经非常完美了，不过还是要根据UI来设置表格的头部。首先在组件标签中这样写，header-cell-style绑定一个变量即可自定义表头

叁歲伎倆/ 2022年04月08日 10:21/ 0 赞/ 1240 阅读

相关 vue+element实现自定义主题功能

1. 第一步按照element官网介绍安装依赖 npm i element-theme -g npm i element-theme-chalk -D

心已赠人/ 2021年12月05日 20:57/ 0 赞/ 464 阅读

相关 VUE 自定义表头实现table的过滤功能

> html代码下面是table <el-table-column v-for="(data,index) in mydata"

女爷i/ 2021年09月27日 16:04/ 0 赞/ 1171 阅读

相关 vue element ui table 过滤功能实现

Element UI代码 <template> <div> <el-table :data="tableData"

水深无声/ 2021年09月27日 15:38/ 0 赞/ 874 阅读

相关 table表头斜线自适应

需求：要求做一张表格，表头第一栏有斜线分割，且分割线也要跟随表格自适应 > 思路：因为之前用了CSS去写，但是发现，只能实现固定的长和宽，如果页面伸缩，斜线就会破版，跟t

以你之姓@/ 2021年08月26日 12:51/ 0 赞/ 446 阅读