vxe-table表格合并单元格和编辑
//这是在vue上面引用vxe-table插件实现的,主要方法都设置在table中,mergeCells,tableData都是在vue页面的data初使化数据, :footer-method=“footerMethod”:尾部数据,:merge-footer-items=“mergeCells”:尾部合并单元格。vxe-table网址:https://vxetable.cn/#/table/advanced/footerSpan
<vxe-table
:data=“tableData”
empty-text=“暂无数据!”
border
:column-config=“{ resizable: true }”
:edit-config=“{ trigger: ‘click’, mode: ‘cell’ }” //编辑单元格
:row-config=“{
isCurrent: true,
isHover: true,
height: 30,
}”
show-overflow
stripe
:footer-method=“footerMethod” //表尾方法
class=“mytablevxe”
show-footer
:merge-footer-items=“mergeCells” //表尾合并单元格
footer-align=“center”
:header-cell-style=“{ color: ‘#000’ }”
style=“border-collapse: collapse;min-height: 65vh;”
>
<vxe-colgroup title="裤子"><vxe-table-column field="item1s" title="奖"></vxe-table-column><vxe-table-column field="item2s" title="罚"></vxe-table-column></vxe-colgroup><vxe-colgroup title="连带"><vxe-table-column field="item3s" title="奖"></vxe-table-column><vxe-table-column field="item4s" title="罚"></vxe-table-column></vxe-colgroup><vxe-colgroup title="抖音码奖罚"> //奖罚点击输入框填写<vxe-table-columnfield="item25"title="奖":edit-render="{ placeholder: '请输入' }"><template #edit="{ row }"><vxe-inputv-model="row.item25"type="text"placeholder="请输入奖励"></vxe-input></template></vxe-table-column><vxe-table-columnfield="item26"title="罚":edit-render="{ placeholder: '请输入' }"><template #edit="{ row }"><vxe-inputv-model="row.item26"type="text"placeholder="请输入罚款"></vxe-input></template></vxe-table-column></vxe-colgroup>其它字段省略.......</vxe-table-column>
</vxe-table>
export default {
data() {
return {
mergeCells: [
//row 1代表尾部第一行, col:尾部第几行单元格开始要合并,rowspan:跨列合并,colspan:横向合并3个单元格
{ row: 1, col: 1, rowspan: 0, colspan: 3 }, //第一行开始,横向合并3个单元格,如图店员奖金
{ row: 1, col: 4, rowspan: 0, colspan: 3 },
{ row: 1, col: 9, rowspan: 0, colspan: 3 },
{ row: 1, col: 12, rowspan: 0, colspan: 3 },
{ row: 1, col: 17, rowspan: 0, colspan: 3 },
{ row: 1, col: 20, rowspan: 0, colspan: 4 },
{ row: 1, col: 26, rowspan: 0, colspan: 3 },
{ row: 1, col: 29, rowspan: 0, colspan: 3 },
{ row: 1, col: 34, rowspan: 0, colspan: 2 },
{ row: 1, col: 36, rowspan: 0, colspan: 4 },
{ row: 2, col: 0, rowspan: 0, colspan: 6 },
{ row: 2, col: 6, rowspan: 0, colspan: 9 },
{ row: 2, col: 15, rowspan: 0, colspan: 5 },
{ row: 2, col: 20, rowspan: 0, colspan: 9 },
{ row: 2, col: 29, rowspan: 0, colspan: 14 },
],
tableData: [
{
name: ‘张三’,
item1s: 5,
item2s: 2,
item3s: 3,
item4s: 4,
item5: 0,
item6: 0,
item7: 7,
item8: 0,
dmjlNum: 0,
item10: 10,
item11: 11,
item12: 12,
item13: 13,
item14: 14,
item15: 15,
item16: 16,
item17: 17,
item18: 18,
item19: 18,
item20: 20,
item21: 21,
item22: 22,
item23: 23,
item24: 24,
item25: 0,
},
{
name: ‘张四’,
item1s: 1,
item2s: 2,
item3s: -3,
item4s: 4,
item5: 0,
item6: 0,
item7: 7,
item8: 0,
dmjlNum: 0,
item10: 10,
item11: 11,
item12: 12,
item13: 13,
item14: 14,
item15: -5,
item16: 16,
item17: 17,
item18: 18,
item19: 18,
item20: 20,
item21: 21,
item22: 22,
item23: 23,
item24: 24,
item25: 0,
},
{
name: ‘张四’,
item1s: 1,
item2s: 2,
item3s: -3,
item4s: 4,
item5: 0,
item6: 0,
item7: 7,
item8: 0,
dmjlNum: 0,
item10: 10,
item11: 11,
item12: 12,
item13: 13,
item14: 14,
item15: -5,
item16: 16,
item17: 17,
item18: 18,
item19: 18,
item20: 20,
item21: 21,
item22: 22,
item23: 23,
item24: 24,
item25: 0,
},
{
name: ‘张四’,
item1s: 1,
item2s: 2,
item3s: -3,
item4s: 4,
item5: 0,
item6: 0,
item7: 7,
item8: 0,
dmjlNum: 0,
item10: 10,
item11: 11,
item12: 12,
item13: 13,
item14: 14,
item15: -5,
item16: 16,
item17: 17,
item18: 18,
item19: 18,
item20: 20,
item21: 21,
item22: 22,
item23: 23,
item24: 24,
item25: 0,
},
{
name: ‘张四’,
item1s: 1,
item2s: 2,
item3s: -3,
item4s: 4,
item5: 0,
item6: 0,
item7: 7,
item8: 0,
dmjlNum: 0,
item10: 10,
item11: 11,
item12: 12,
item13: 13,
item14: 14,
item15: -5,
item16: 16,
item17: 17,
item18: 18,
item19: 18,
item20: 20,
item21: 21,
item22: 22,
item23: 23,
item24: 24,
item25: 0,
},
],
dyjl:0,
},
methods:{
//表尾方法
footerMethod({ columns, data }) {
console.log(data + ‘------’)
return [columns.map((column, columnIndex) => {if (columnIndex === 0) {return '小计'}if (['item1s','item2s','item3s','item4s','item5','item6','item7','item8','item9','item10','item11','item12','item13','item14','item15','item16','item17','item18','item19','item20',].includes(column.property)) {return XEUtils.sum(data, column.property) //每个字段下面求合,就是图中的小计}return null}),//表尾第一行columns.map((column, columnIndex) => {if (columnIndex === 0) {return '合计'}if (columnIndex === 1) { //第一列填写的值return '店员奖金'}if (columnIndex === 4) {//第四列填写的值return this.dyjl //值可以跟据需要自己计算后再赋值 如this.dyjl=item.item1+item.item2就有值了}if (columnIndex === 7) {//第七列填写的值,后面依此类推return '元'}if (columnIndex === 8) {return ''}if (columnIndex === 9) {return '绩效奖金'}if (columnIndex === 12) {return this.dyjl}if (columnIndex === 15) {return '元'}if (columnIndex === 16) {return ''}if (columnIndex === 17) {return '线上奖金'}if (columnIndex === 20) {return this.dyjl}if (columnIndex === 24) {return '元'}if (columnIndex === 26) {return '线上罚款'}if (columnIndex === 29) {return this.dyjl}if (columnIndex === 32) {return '元'}if (columnIndex === 34) {return '总金额'}if (columnIndex === 36) {return this.dyjl}if (columnIndex === 40) {return '元'}}),//表尾第二行columns.map((column, columnIndex) => {if (columnIndex === 0) {return '填表人(收银员/店助)'}if (columnIndex === 15) {return '审核人(店长):'}]
},
vxe-table表格合并单元格和编辑相关推荐
- Ant table表格合并单元格使用
Ant 合并单元格+覆盖样式 项目需求: 最后一列用来展示详情,表格左侧点击行切换:要求选中行的样式和详情信息用一个边框凸显出来 结果如下: 切换效果展示如下: 实现过程: 在ant合并单元格demo ...
- HTML5 table表格合并单元格和合并边框
原文地址和代码: 原文地址 转载请备注 代码: <!DOCTYPE html> <html lang="en"> <head><meta ...
- rowspan table布局_css如何实现table表格的单元格合并?colspan和rowspan合并单元格(实例)...
在前端开发中,html 表单是经常被使用到的,表单可以直观的把信息展现出来,有很好的交互功能:在表单中可以把同一类的信息合并在一起显示,这就需要把同一类的单元格合并在一起,那么怎样才能用css合并单元 ...
- table表格中单元格的合并
目录 table表格中单元格的合并 table表格中单元格的合并很多朋友不一定了解,今天我就写一篇博客来跟大家分享一下table表格中的跨行合并和跨列合并. 我们先看一个合并过的表格,大家可以先思考一 ...
- layui表格合并单元格
思想:layui表格合并单元格,layui并没有给出相应的解决办法:那么我们可以在前端使用js将相邻并相同的单元格合并: 1.页面代码: <!DOCTYPE html> <html ...
- 记一次用iview实现表格合并单元格的具体操作
记一次用iview实现表格"合并"单元格的具体操作 最近做项目使用iview框架做后台管理系统,第一次使用iview遇到过很多问题,有些小坑也都在网上找到解决方案了,可作为一个通用 ...
- html在线编辑器合并单元格,Bootstrap实现的表格合并单元格示例
本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景 利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 Bootstrap-表格合并 ...
- layui实现表格合并单元格,设置不同背景色
最近在使用layui的过程中,遇到了表格合并单元格,设置不同背景色的问题. 在此总结,大家一起学习. 同一组新闻的底色相同,效果如下: 实现代码: <script>layui.config ...
- 【markdown】表格合并单元格
[markdown]表格合并单元格 DEMO DEMO 效果 参考链接 :[markdown]表格合并单元格 DEMO <table><tr><th>属性</ ...
最新文章
- 《用Python进行自然语言处理》第8章 分析句子结构
- Ubuntu14.04重启网卡不生效
- linux+vim+动不了,linux的vim按了ctrl+s之后假死的解决办法
- SpringBoot使用Websocket
- java jsp常见问题_jsp和servlet常见问题总结
- 虹软人脸识别SDK - Java服务端的那些事
- windows 默认的 opengl 版本是1.1
- 我们学校有一个计算机室英文,深圳朗文版小学二年级下册Unit 2 At school练习题...
- 解决windows10密码正确,但是显示无法连接网络
- Python爬虫:皮皮虾短视频无水印下载
- 干货 | PCB多层板为什么都是偶数层?奇数层不行吗?
- 初中计算机实践研究计划,《初中信息技术学科学生作品有效评价的实践研究》课题研究计划...
- 【入门】(二)相机标定、矩阵求解、相机位姿势估计
- 腾讯云轻量服务器性能评测:配置 8核 16G 18M 带宽
- 嵌入式学习(二)——刷机和led实验(看门狗、c语言、icache、重定位、SDRAM)
- 鸿蒙希夷太清太虚的意思,希夷的意思
- 让“数据库审计”服务保卫你的数据库
- 我对软件分层设计的思考
- 四川省投资集团CIO王波:互联网+集团管控— —移动云在川投集团的应用
- Apache IoTDB 系列教程-7:时序数据文件格式 TsFile