element-ui中 table组件的 header具名插槽中数据不响应的问题

lenjstlp

已于 2022-03-07 14:23:45 修改

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签： ui elementui vue.js

于 2022-03-07 14:21:54 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_61625219/article/details/123329437

这篇博客探讨了在Element UI中遇到的表格列头显示错误的问题，通过将slot属性从'static'更改为'#header'来解决。修复后的代码展示了如何自定义表格列头，以动态显示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决方式：slot="header" 改为 #header 即可

<el-table-column prop="name">
    <template #header>
        <span> {{ data }} </span>
    </template>
</el-table-column>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lenjstlp

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

解读element-ui中table组件部分源码与需求分析

04-01

### 解读element-ui中table组件部分源码与需求分析 #### 一、前言 Element UI自开源以来，迅速成为了前端开发中后台系统的首选UI框架之一。与Vue、React、Angular这样的主流前端框架并肩作战，Element UI尤其在中...

element-ui组件table实现自定义筛选功能的示例代码

10-17

在本文中，我们将深入探讨如何使用element-ui组件库中的table组件实现一个自定义的筛选功能。element-ui是一个流行的Vue组件库，它提供了各种各样的UI组件，以帮助开发者快速构建高质量的Web界面。其中，table组件是...

参与评论您还未登录，请先登录后发表或查看评论

element的el-table组件，在插槽slot=“header“内，数据不更新的问题

qq_29207823的博客

03-29

1068

在点击事件修改phoneView的值之后，发现渲染的dom并没有修改。经过多次测试，发现在slot内部phoneView的值并没有改变，或者说改变后，又变回去了。在父组件中定义一个属性，如phoneView: false，在element的。

el-table表头添加说明

最新发布

yanby921005的博客

06-26

175

1、el-table-column添加render-header。3、columns中添加hedertip。2、编写render函数。

elementui的table表格数据不变化原因

YUE

08-19

4174

elementui的table表格数据不变化的原因

踩坑——Elementui Table控件el-table-column表头响应式

Xu_cipu的博客

06-17

1803

场景： Elementui的table组件的<el-table-column>中，表头数据是随着日期选择器变化而动态生成，不断变化的，所以显示的表头内容需要响应式变化。 // 大致结构： <el-table-column v-for="(label, index) in tableLabels" :key="index" :label="label.split('--')[0]" // 这一行非常重要！不然无法响应式 :prop="label.substr(-8)">

谈谈Vue中对“插槽不是响应性的”这句话的理解

qq_36016136的博客

01-14

1912

业务场景注意到这句话是因为我在业务中遇上了点麻烦，类似上图，我有一个容器box组件，里面分为header和container，header可以通过label属性进行文字的定制，而container部分则放了个插槽标签，因此可在标签体（以下简称标签体）内传入内容。现在的业务要求是，如果我给box组件传入hidden=“true”，并且标签体里面没有任何东西，则整个box组件都不显示（hidden默认为false，标签体没有数据时，box正常显示）。为了实现这个效果，我在box组件最外层的div增加了

Element-UI Table组件上添加列拖拽效果实现方法

08-27

在 Element-UI 中，Table 组件是一个功能强大的数据表格控件，但是在实际应用中，我们可能需要添加一些自定义的功能，例如添加列拖拽效果。下面我们将详细介绍如何在 Element-UI 的 Table 组件上添加列拖拽效果。 ...

Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用

10-17

主要介绍了Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

el-table ＜template slot=“header“＞不更新问题

qq_43628847的博客

10-28

1246

vue el-table 不更新问题

element的el-table表格自定义表头，＜template #header＞ slot=“header“内，表格在触发事件，this的数据更改后会重置成原来的数据问题

jibingv1的博客

10-19

5261

element的el-table表格自定义表头，<template #header> slot="header"内，表格在触发事件，this的数据更改后会重置成原来的数据问题 <template header> <div @clikc="checkTab('all')" >全部</div> <div @clikc="checkTab('hot')" >热门</div> </template> 这里的checkTab方法做

CListContainerElementUI 表头拖拽不起作用

lixiang987654321的专栏

08-05

1867

对于CListContainerElementUI 表头拖拽不起作用的问题，我也转载过一篇文章，用了他的东西没起作用，主要因为他没有深入的解析，自己研究了一番，终于解决了问题！关于转载的文章中，他修改该问题是直接修改源码的，因为这不是bug！所以该人家的源码是不合理的，我认为对于一个已经完成的组件，要扩展它的功能一定不能修改他本来的东西（虽然是开源的，修改也能满足要求）

vue 项目中 element el-table 表格里使用slot=“header“ 表头数据用动态变量不更新，用#header可以自动更新

酱子

08-14

5625

vue 项目中 element el-table 表格里 < template slot=“header” slot-scope=“scope”> 当使用了 slot=“header” 表头数据不能用动态变量，不然不更新。用#header 就可以自动更新为什么？

【Vue】$slots 无法获取具名作用域插槽

锋利的绵羊的博客

08-21

6963

带作用域的具名插槽无法用$slots获取 $scopedSlots 可用于获取作用域插槽

elementui表格自定义表头，template slot=“header“，表头判断监听不到数据更新的问题

南极修炼千年的大冰块

08-31

9570

代码背景：很简单的一个小功能，每一项都有一个继续或者暂停的按钮，表头有一个全部继续或全部暂停的总按钮。类似于选中和全选全不选的功能。 <el-table-column align="center"> <template slot="header"> <span @click="xxx"> {{this.allBool?'全部继续':'全部暂停'}}</span > </template> <template slot-scop.

element table 使用＜template slot=“header“＞数据不渲染

qq_41623635的博客

06-29

837

template slot="header">里使用v-if v-show指令数据更新后不渲染。将 slot="header" 改为 #header。

element ui中的的el-table表格自定义表头slot=“header“,无法更新数据问题

huanlesyaya的博客

10-30

849

slot=“header"换成#header”