没有合适的资源?快使用搜索试试~ 我知道了~
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
3 下载量 196 浏览量
2020-12-04
03:57:06
上传
评论
收藏 351KB PDF 举报
温馨提示
render-header render-header在官方文档中的介绍是这样的: 参数 说明 类型 可选值 默认值 render-header 列标题 Label 区域渲染使用的 Function Function(h, { column, $index }) — — 修改列标题样式 1.在列标题后面加一个图标。 以element-ui官方文档一个table表格为例,我们在地址的后面加一个定位标志的图标,代码如下: <template> <el-table :data="tableData2" style="width: 100%" :row-class-
资源推荐
资源详情
资源评论



























Element-ui自定义自定义table表头、修改列标题样式、添加表头、修改列标题样式、添加tooltip、、:render-header使用使用
render-header
render-header在官方文档中的介绍是这样的:
参数参数 说明说明 类型类型 可选值可选值 默认值默认值
render-header
列标题 Label 区域渲染使用的
Function
Function(h, { column, $index
})
— —
修改列标题样式修改列标题样式
1.在列标题后面加一个图标。在列标题后面加一个图标。
以element-ui官方文档一个table表格为例,我们在地址的后面加一个定位标志的图标,代码如下:
<template>
<el-table
:data="tableData2"
style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址" :render-header="renderHeader"> // 加入render事件
</el-table-column>
</el-table>
</template>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
<script>
export default {
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
// render 事件
renderHeader (h,{column}) { // h即为cerateElement的简写,具体可看vue官方文档
return h(
'div',
[
h('span', column.label),
h('i', {
class:'el-icon-location',
style:'color:#409eff;margin-left:5px;'
})
],
);
}
},
data() {
return {
tableData2: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}] }
}
}
</script>
效果如下:
资源评论

- #完美解决问题
- #运行顺畅
- #内容详尽
- #全网独家
- #注释完整

weixin_38744694
- 粉丝: 17
- 资源: 948
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- AJ-Report-SQL资源
- 教师教学质量评价系统的设计与实现-毕业设计资源
- loongs_linux-智能车资源
- 活动发布管理-活动资源
- Beginner-guide-yolo编程资源
- 在线考试小程序-笔试面试解析资源
- Heartrate-仿真设计资源
- OJCode-数据结构资源
- A_Share_investment_Agent-DeepSeek-人工智能资源
- 软考高级系统架构设计师-软考资源
- 微同商城-uniapp资源
- EasyAi-机器学习资源
- Paddle-深度学习资源
- ssd.pytorch-pytorch资源
- vue3-ts-cesium-map-show-typescript资源
- RFID-RFID资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈



安全验证
文档复制为VIP权益,开通VIP直接复制
