自定义el-table的列头为icon

最新推荐文章于 2024-07-11 11:14:36 发布
最新推荐文章于 2024-07-11 11:14:36 发布
阅读量346 收藏 3
点赞数 3
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52115201/article/details/140173358
版权 
   <el-table-column  label="操作" width="50" align="center"><!-- 添加自定义列头图标的列 -->
          <template slot="header"> <!-- 自定义列头模板 -->
            <el-button type="success" icon="el-icon-plus"  size="mini" circle  @click="addClick"></el-button>
          </template>
          <template slot-scope="scope"><!-- 列内容 -->
            <el-button type="danger" icon="el-icon-delete"  size="mini" circle  @click="delClick(scope.row)"></el-button>
          </template>
        </el-table-column>

云白冰
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-table表格头部内容自定义
xm2by的博客
03-20 6761
el-table表格头部内容自定义 在使用element UI中的表格组件进行开发时，表格头部的内容是通过设置<el-table-column>组件的label属性进行赋值，使用label属性的话，表格头部只能展示一些静态内容；今天接到一个需求，要求表格头部的内容在鼠标hover上去的时候提示信息，通过label属性设置表格头部内容就无法满足我们的需求，这时候就需要对表格头部的内容进行...
el-table自定义序号为icon或者其他元素
小匠的Blog
08-24 540
el-table自定义序号为icon或者其他元素
elementUI的el-table自定义表头
程序媛的博客
06-20 622
elementUI的el-table自定义表头，添加一个el-tooltip提示内容
el-table自定义表头的两种方式
提拉米苏
10-31 5950
el-table自定义表头的两种方式
el-table，el-form在vue中封装组件化，含操作按钮和插槽.pdf
12-16
操作栏通过`slot`来插入自定义的按钮，每个按钮可以通过`el-button`组件定义其样式（type）、图标（icon）、点击事件（method）以及名称（name）。表格本身通过`el-table`组件来渲染，`data`属性接收外部数据，`el-...
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
11-19
需求： vue-cli项目树形控件：一级节点为本地节点，默认展开一级节点，增删改后局部刷新数据。 增加节点，点击确定后局部刷新，渲染新数据。 源码 element组件样式 <el-tree class="treeitems" :data="data...
vue实现element表格里表头信息提示功能(推荐)
10-15
<i class="el-icon-question tips-icon"> </el-tooltip> ``` 接着，在`script`部分，定义了组件的`props`，接受一个`messages`数组，用于传递提示信息： ```js export default { props: ['messages'] } ``...
基于vue+element实现全局loading过程详解
11-19
spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", }; ``` 在上述代码中，`loadingConfig`对象包含了loading的样式属性，如是否锁定页面（lock）、加载文本（text）、加载图标（spinner）和背景...
Element Collapse 折叠面板的使用方法
10-15
一致性 Consistency<i class="header-icon el-icon-info"></i></template> <!-- 内容 --> </el-collapse-item> </el-collapse> ``` 这里，`title`插槽允许你在标题中添加额外的HTML元素，如图标。 **手风琴模式...
vue + element ui 实现侧边栏导航栏折叠收起
爱敲代码的卡拉米的博客
07-08 416
通过 row 和 col 组件，并通过 col 组件的。属性我们就可以自由地组合布局。
vue详解
m0_46702681的博客
07-08 1155
指令:HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能常用指令:v-for 列表渲染，遍历容器的元素或者对象的属性v-bind 为HTML标签绑定属性值，如设置 href，css样式等v-if/y-else-if/v-else 条件性的渲染某元素，判定为true时渲染，否则不渲染v-show 根据条件展示某元素，区别在于切换的是display属性的值。
基于若依的文件上传、下载
谁说自己不可以
07-06 1139
基于若依的文件上传、下载、详细步骤。
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1237
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
Vue的学习之class与style绑定
人生苦短
07-07 281
本节对class与style的绑定内容就学习完毕了！
vue在线预览excel、pdf、word文件
weixin_48811255的博客
07-08 557
在线预览文件
vue+lodop实现web端打印功能
最新发布
chensi_07的博客
07-11 221
安装包中的html文件为打印实例，点击其中一个用浏览器打开，点击红框如果出现下图弹窗，说明插件安装成功了。然后安装云打印插件：CLodop_Setup_for_Win32NT.exe；32位系统安装：install_lodop32.exe；64位系统安装：install_lodop64.exe；
Vue的学习之数据与方法
人生苦短
07-06 538
前段期间，由于入职原因没有学习，现在已经正式入职啦，接下来继续加油学习。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 434
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
el-table 自定义列头
07-27
您可以通过使用 `el-table` 组件的 `slot` 来自定义列头。在 `el-table` 中，每个列都有一个名为 `header-slot` 的插槽，您可以在该插槽中放置自定义的列头内容。 以下是一个示例，展示了如何使用 `header-slot` 来自定义列头： ```html <template> <el-table :data="tableData"> <el-table-column prop="name"> <template slot="header-slot" slot-scope="scope"> <!-- 自定义列头内容 --> <span>{{ scope.column.label }}</span> <el-tooltip effect="dark" :content="scope.column.tooltip" placement="top"> <i class="el-icon-question"></i> </el-tooltip> </template> </el-table-column> <!-- 其他列... --> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 28 }, { name: 'Jane', age: 32 }, // 数据... ] }; } }; </script> ``` 在上述示例中，我们使用了 `header-slot` 插槽来自定义了列头的内容。在插槽模板中，我们可以通过 `scope.column` 来访问当前列的属性，例如 `label`（列标题）和 `tooltip`（提示文本）。 您可以根据自己的需求在 `header-slot` 中编写自定义的 HTML 和样式来展示列头。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值