【vue2如何实现el-table type=“selection“ 表头添加文字 动态传值】

最新推荐文章于 2024-04-30 10:40:48 发布
最新推荐文章于 2024-04-30 10:40:48 发布
阅读量378 收藏
点赞数 3
文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43732771/article/details/136054063
版权

如何实现el-table type=“selection” 表头添加文字 动态传值

第一步找到 node_modules\element-ui\lib\table-column.js 文件 在
可以看到源码渲染只有el-checkbox 手动加个文本
在这里插入图片描述
使用
直接用label 传值就行


在这里插入图片描述

    如果不是动他传值 直接修改css 伪元素属性也行
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/211960feb3764f2d823511dfdc162da9.png)

注意
项目打包后也是能正常使用的 但是在别的地方 如果没用手动重写是使用不了的 为了应急这样可以使用。如果有更好的方法请留言

缥缈壶孤影
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue el-table实现自定义表头
10-15
主要为大家详细介绍了vue el-table实现自定义表头，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
el-ui type=“selection“ 个人学习使用
Ashley_lidan的博客
08-14 790
el-ui type=“selection” 表头全选框加文字 1.保留全选框，加文字 在style中加入 .table-box .el-table__header .el-table-column–selection .cell:after { color: white; content: “全选”; margin-left: 10px; } 2.不保留全选框 加文字 .table-box .el-table__header .el-table-column–selection .cell .el-ch
el-table中某一列添加文字提示（鼠标移动到单元格上，显示tooltip文字提示）
qq_37021104的博客
04-17 6446
<el-table> <el-table-column label="名称" :show-overflow-tooltip="true"> </el-table> :show-overflow-tooltip绑定一个 true 或 false
vue3 element plus table selection展示数据，默认选中功能
热门推荐
qq_44871531的博客
01-17 1万+
vue3 element plus table selection展示数据，默认选中功能
el-table-column type=selection表头全选用文字展示
weixin_44707050的博客
09-15 740
el-table添加 :header-cell-class-name="cellclass"
＜el-table-column＞ 当type=“selection“时，在表头复选框后面加上“全选”两个字。
u012632105的博客
09-13 1363
插槽来实现在表头复选框后面加上“全选”两个字。来表示这一列是用来展示复选框的列，通过设置。，这个属性的作用是显示表头，然后在。来控制复选框的样式和宽度，最后在。插槽来显示“全选”文本。上面的代码中，我们在。
【element-ui】el-table多选框加悬浮提示
weixin_48847755的博客
04-10 537
el-table多选列增加悬浮提示框
[element-ui]el-table 当单元格 hover 进入时有文字提示效果
xxuxioxx的博客
01-18 546
el-table 当单元格 hover 进入时有文字提示效果
基于Element中table实现多行复选并自定义标题
Only No.1
10-27 1016
如上图后三列同时需要修改表格标题，之前的type=“selection"无法满足当前需求，查了一下官方文档，提供了一个render-header函数，直接用jsx语法就好。 <template> <div> <el-table :data="tableData" border stripe> <el-table-column prop="name" lab..
vue el-table实现行内编辑功能
01-19
最近做一个vue前后端分离的项目，前端框架用element ui，在 使用 el-table 的过程中，需要实现行内编辑，效果大概是这样： 分为下面几个步骤： （1） 自定义 el-table 的表头（即添加 “新增” 按钮）： <el data=...
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
12-29
如果要实现鼠标移到表头有注释或者弹框该怎么添加呢？ <el empty-text=正在加载中... data=contentList xss=removed sort-change=sort class=pro-table-item tooltip-effect=dark > <template v-for=(item,...
vue element 中的table动态渲染实现（动态表头）
12-13
通过在vue中使用element的table表格，实现数据动态渲染，并且动态渲染表头。通过在父组件中引入子组件表格，然后向子组件传递表格数据和表头数据。 子组件table中template模板 <el-table :data="this.table...
el-table-column 表格列自适应宽度的组件封装说明
前端，请指教
04-27 330
针对组件业务上的需求，需要给 el-table-column 加上限制，需保证表头在一行展示，部分列的内容要一行展示，自适应单项列的宽度；
vue 实现左侧导航栏，右侧锚点定位滚动到指定位置（超简单方法）
chensi_07的博客
04-24 504
通过scrollIntoView方法可以把元素滚动到可视区域内。behavior: "smooth"是指定滚动方式为平滑效果。点击左侧菜单根据元素id定位到可视内容区域。浏览器原生提供了一种方法。
Vue3 el-dialog 二次封装踩坑实录（v-model moduleValue 不触发）
Li_Ning21的博客
04-27 284
如果你封装了一个el-dialog的子组件，想通过父组件v-model的形式调用，切记不能使用v-model，要使用 v-model:[你的参数]，例如 v-model:visible。
elment-table实现行滚动效果
那片枫叶~
04-24 432
通过获取dom ，来控制表格滚动。
Vue3 + TS + Element-Plus 封装的 Dialog 弹窗组件
最新发布
单飞吧的博客
04-30 201
弹窗组件中自定义了表头增加了全屏，svg-icon 没有的话可能会报错，换成自己的图标就可以。
前后端分离vue3使用el-table怎么实现全选删除
05-19
要实现全选删除的功能，可以按照以下步骤进行： 1. 在表格的表头中添加一个复选框，用于全选/取消全选。 2. 在 el-table 的 data 中添加一个数组，用于存储当前表格中选中的行的数据。 3. 在 el-table 的 row-selection-change 事件中，将选中的行数据添加到上述数组中。 4. 在全选/取消全选的复选框的 change 事件中，通过 el-table 的 toggleAllSelection 方法来实现全选/取消全选。 5. 在删除按钮的 click 事件中，遍历选中的行数据数组，将对应的行从表格数据中删除。 以下是示例代码： ```html <template> <el-table :data="tableData" @row-selection-change="handleSelectionChange" ref="table"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> <div class="button"> <el-checkbox v-model="isAllSelected" @change="handleAllSelectionChange">全选</el-checkbox> <el-button type="danger" @click="handleDelete">删除</el-button> </div> </template> <script> export default { data() { return { tableData: [ { id: 1, name: '张三', age: 20 }, { id: 2, name: '李四', age: 25 }, { id: 3, name: '王五', age: 30 } ], selectedRows: [], // 存储选中的行数据 isAllSelected: false // 是否全选 } }, methods: { handleSelectionChange(selection) { this.selectedRows = selection }, handleAllSelectionChange(value) { this.$refs.table.toggleAllSelection() this.selectedRows = value ? this.tableData : [] }, handleDelete() { this.selectedRows.forEach(row => { const index = this.tableData.indexOf(row) this.tableData.splice(index, 1) }) this.selectedRows = [] this.isAllSelected = false } } } </script> ``` 以上代码中，el-checkbox 和 el-button 为 Element UI 的组件，需要在代码中引入对应的组件库。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值