Element表格合计列自定义样式

作者: wo不是黄蓉 | 来源:发表于2020-10-19 10:05 被阅读0次

要求实现效果如下：表格标题和表体的内容可以通过element提供的api使用插槽进行实现，表尾合计列的内容实现某些字段标红显示

最终效果

自定义合计列通过 show-summary 和 :summary-method="getSummaries"实现，官网有例子。

自定义合计列样式：通过给表格列绑定单独的class来实现，发现加上class-name后，表体和表尾的列上面都加上了绑定的class属性，然后再通过.el-table__footer-wrapper tbody td.customerTaxRateNameStyle来实现表尾合计列样式自定义效果

代码实现

加上class-name后dom显示效果

Element表格合计列自定义样式
要求实现效果如下：表格标题和表体的内容可以通过element提供的api使用插槽进行实现，表尾合计列的内容实现某些...
element表格样式修改
修改element的样式的时候style标签不能加上scoped所以为了防止修改的样式影响到别的页面，建议在当前页...
类似百度搜索(搜索提示/输入后框置顶) element 组件 e
element ui el-autocomplete组件自定义样式vue框架交互 @keyup.native...
自定义element-ui radio选中样式
自定义element-ui radio选中样式[https://segmentfault.com/q/101000...
vue Element表格样式处理
一：让el-table表格居中的方式只需在el-table标签上添加即可。二：表格内容过长显示问题实现效果如下图...
vue 实现表格拖拽
1，使用纯表格 (* 注：必须给element属性传 tbody，否则样式会有问题) 2，使用elementUI...
2020-10-14 element-ui el-select
element-ui el-select 自定义样式覆盖设计图样式截屏2020-10-14 上午8.45.03....
vue-element（四） el-table滚动加载
说明自用一、自定义指令实现参考： vue element-ui table表格滚动加载 template s...
element ui 表格样式的修改
1.修改表格高亮行的颜色 .el-table--enable-row-hover .el-table__body ...
2019-01-21POI生成Excel工具类
POI生成Excel工具类该工具类中，包含：创建表格（带默认样式）、自定义样式（通过重写 setDefaultS...