Vue -- element-ui el-table 的合计在第一行显示并可点击
使用element-ui el-table 中有这样一个需求,需要将合计放在表格内容的第一行,并且点击合计可跳转到其它页面!
框架中提供了合计的属性方法,这样可以进行数值求和及自定义求和,但是,合计那一栏不能添加点击跳转功能,结构默认排到最底行,不满足需求
解决思路:
- 调节样式;
- 将合计的数据单独计算出来/接口返回,添加到数组第一个位置,这样就可以很好的控制合计这一行了。
HTML
<el-table ref="tableData" tooltip-effect="dark" style="width: 100%" border :data="tableData" v-loading="loading" :span-method="arraySpanMethod"><el-table-column type="index" label="序号" align="center" width="55" :index="indexFun"></el-table-column><el-table-columnprop="name"align="center"label="姓名"><template slot-scope="scope"><el-button type="text" size="small" @click="goLink(scope.row)">{{scope.row.name}}</el-button></template></el-table-column>
</el-table>
JS
// 插入合计的数据
summaryFun(){ var obj = [“合计”,......];this.tableData.unshift(obj);
},// 合并合计第一行
arraySpanMethod({ row, column, rowIndex, columnIndex }) {if (rowIndex === 0) {if (columnIndex === 0) {return [0, 0];} else if (columnIndex === 1) {return [1, 2];}}
},
// 表格序号 除去合计从第一开始,如下图
indexFun (index) { return index;
},
// 点击合计进行跳转
goLink(row){if(row.id == "合计"){window.loaction.href=""}
}
合计三行合并并可点击
arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 合并第一行if (rowIndex === 0) {if (columnIndex === 0) {return [0, 0];} else if (columnIndex === 1) {return [1, 3];} else if (columnIndex === 2) {return [0, 0];} }
},
转载于:https://www.cnblogs.com/lisaShare/p/10885133.html
Vue -- element-ui el-table 的合计在第一行显示并可点击相关推荐
- vue+element UI的 table组件实现日历
有现成的日历插件但是不符合需求,所以项目中使用vue+element 的表格组件自己实现一个日历组件 核心js部分:此部分为计算的当月的日期且包含是否可选,是否节假日等等可操作的标记,这部分基本是实现 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Form表单填写、Dialog对话框弹出
文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
- nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
- bind-html自动换行,vue element ui this.$alert 样式修改,长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果 问题 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录 目标 代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题 总代码 本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-代码总结(已开源)
文章目录 前言 项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
最新文章
- PHP 中日期时间函数 date() 用法总结
- 整数划分问题(递归法)
- TCL基础篇---基本语法(持续更新)
- 时间同步失败_跨系统历史数据同步脚本实战
- pat根据中序遍历和先序遍历_算法题399:从前序与中序遍历序列构造二叉树
- LiveVideoStack 2022迎春招聘
- 关于 HANA CE Function
- [原]windbg调试系列——崩溃在ComFriendlyWaitMtaThreadProc
- P1446 [HNOI2008]Cards
- html5怎么设置字体闪动,HTML最简单的文字闪烁代码
- java indexof方法_java入门 021
- 3.1.1 Agri-Net
- 服务器控件与Html控件属性值的解释差异
- 千万流量大型分布式系统架构设计实战(干货)
- msvcp71.dll、msvcr71.dll丢失解决方法
- 树莓派python调用摄像头拍照
- 常用类(API)第一节
- 用 Java 实现拦截器 Interceptor 的拦截功能
- 原生js春节倒计时@酷酷航
- [N1CTF 2022] solve_pow,baby_N1ES