element table 修改排序图标 保留原有排序功能
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
element table 修改排序图标 保留原有排序功能
文章目录
前言
Element UI 组件做的很好,但是有时候我们在工作中会遇到各种各样的奇葩需求,显然Element UI 不能满足所有的需求,但是确实做的很好。我们使用的el-table
还是能满足大部分需求的。保留功能,修改一些样式。
一、render-header方法
使用render-header
属性,官网说明此属性是:列标题 Label 区域渲染使用的 Function
的意思。它会给你定义的方法传三个参数方法名(h, { column, $index })
,h函数是重新渲染,column是单元格对象,$index应该是下标(这个我没太了解,有知道的评论告诉我,谢谢哈)。
二、使用步骤
步骤一:在 el-table-column 添加属性 :render-header=“renderHeader”
<el-table-column prop="viewsNumber" sortable :render-header="renderHeader" label="浏览数量">
</el-table-column>
步骤二:
在 methods 里添加方法
这里 if 判断的是 升序 或 降序 或 无序 i 表现
renderHeader (h, { column, $index }) {
if (column.order === 'ascending') {
return (
<div>
<span>{column.label}</span>//需求修改标题名称
<i class="el-icon-sort-up"></i>//修改图标
</div>
)
} else if (column.order === 'descending') {
return (
<div>
<span>{column.label}</span>
<i class="el-icon-sort-down"></i>
</div>
)
} else {
return (
<div>
<span>{column.label}</span>
<i class="el-icon-sort"></i>
</div>
)
}
},
总结
终于满足客户的需求了,呜呜呜呜~
参考
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)