vxe-table表格合并单元格和编辑

news2025/1/25 9:12:46

在这里插入图片描述
//这是在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-column
      field="item25"
      title="奖"
      :edit-render="{ placeholder: '请输入' }"
    >
      <template #edit="{ row }">
        <vxe-input
          v-model="row.item25"
          type="text"
          placeholder="请输入奖励"
        ></vxe-input>
      </template>
    </vxe-table-column>
    <vxe-table-column
      field="item26"
      title="罚"
      :edit-render="{ placeholder: '请输入' }"
    >
      <template #edit="{ row }">
        <vxe-input
          v-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 '审核人(店长):'
      }
  ]
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407802.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue通过url方式展示PDF方法总结

最近vue项目中遇到预览pdf出现乱码问题&#xff0c;尝试了各种办法受尽折磨&#xff0c;以此记录一下使用的几种方法 1.使用pdfjs-dist 插件&#xff0c;通过iframe标签显示 首先 npm install pdfjs-dist --save npm直接下载插件 npm install --save pdfjs-dist2.0.943&…

【vue 项目】有关cascader任选一级、字段名不同、同时获取value和label值、回显(推父节点)等问题解决

文章目录选择任意一级选项字段名转换最后一级数据为空显示暂无数据问题同时获取cascader的value和label值选择时双击两次才显示被选中&#xff08;单选选择任意一级组件&#xff09;Error in callback for watcher “options“: “TypeError: Cannot read property ‘level‘ o…

表单元素盘点第二弹<form><textarea>元素详细介绍

博主有话说&#xff1a;如果有描述错误之处请大家纠正。让我们可以一起学习一起进步。 个人主页&#xff1a;GUIDM主页 内容专栏&#xff1a;干货 此块内容为纯纯的干货&#xff0c;略显乏味枯燥&#xff0c;是笔记向的blog。如果觉得还不错&#xff0c;希望你可以一键三连&…

Vue2的响应式原理

--------Vue2响应式原理---------- 原理&#xff1a;通过数据劫持 defineProperty 发布订阅者模式&#xff0c;当 vue 实例初始化后 observer 会针对实例中的 data 中的每一个属性进行劫持并通过 defineProperty() 设置值后在 get() 中向发布者添加该属性的订阅者&#xff0c…

基于RuoYi若依vue的数据分页功能的前后端代码详解

目录 1.前端代码 1.1首先在前端会有一个 组件&#xff0c;为分页组件 1.2前端获取列表函数以及访问后端的URL与请求方式 1.3开发者工具查看前端访问后端信息 1.4开发者工具查看前端接收到后端的回应信息 2.后端代码 2.1接口 2.2接口内方法的代码 2.3后端Log输出如下 1.前…

IntersectionObserver API详解

过去&#xff0c;要检测一个元素是否可见或者两个元素是否相交并不容易&#xff0c;比如实现图片懒加载、内容无限滚动等功能时&#xff0c;都需要通过​getBoundingClientRect()​写大量的逻辑计算或者依靠scroll事件监听等性能很差方式来实现。 现在&#xff0c;依靠Interse…

Object.prototype.toString.call()的原理

今天在项目中看到了用Object.prototype.toString.call()这个方法封装的检测数据类型的工具。 但是浏览器搜索相关原理的好回答凤毛麟角&#xff0c;故而想记录一下&#xff0c;万一可以帮助到更多的新手呢&#xff1f;我的文章都是非常通俗易懂的&#xff0c;因为我写文章的时…

HTML页面知识点小总结(巨详细)

HTML基础知识点总结 文章目录HTML基础知识点总结一、 HTML页面主要的三大标签。二、 外部的CSS文件。三、外部的JavaScript文件。四、< body >标签中存放的内容。如果觉得写的不错的话点个赞支持鼓励一下吧&#xff0c;欢迎交流&#xff0c;谢谢啦~~~一、 HTML页面主要的…

前端知识点汇总

HTML介绍 HTML: Hyper Text Markup Language 超文本标记语言&#xff0c;用来做网页. 负责网页的框架结构布局.1993年 html 1.0 Tim Berners-Lee(蒂姆-博纳斯-李)&#xff0c;万维网之父1995年 html 2.0 IETF(互联网工程小组)1997年1月 html 3.2 W3C(万维网联盟)1997年12月 ht…

vue2:elementUI中Form 表单在特定情况下做动态rules添加删除

先看需求&#xff1a;&#xff08;不想看的直接拉到最后&#xff09; 【需求说明】 6、如状态为上架时&#xff0c;库存为必填&#xff0c;下架状态时&#xff0c;库存为可填&#xff0c;前面无星号 实现方法&#xff1a;使用this.$set()和this.$delete() 上代码&#xff1a;…

Vue2 + JSX使用总结

什么是JSX 摘自 React 官方&#xff1a; 它被称为 JSX&#xff0c;是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX&#xff0c;JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言&#xff0c;但它具有 JavaScript 的全部…

前端人必看的JS面试题汇总

面试是每一个前端人在求职过程中都需要面对的事情。在面试过程中&#xff0c;面试官没有办法通过实践操作去了解应聘者的技能水平&#xff0c;所以他们更多地会通过“八股文”的考察来判断你是否符合公司的招聘要求。所以作为一个前端人&#xff0c;在掌握好前端技能的同时&…

vue导出word

最近的项目中&#xff0c;需要把vue中的部分内容导出为word形式&#xff0c;之前没有做过这方面的&#xff0c;特记录&#xff0c;由于是初学&#xff0c;所以整理了此模板&#xff0c;注意&#xff1a;这是一个模板&#xff0c;并不是相关字段的解析&#xff0c;每个字段都是做…

ECharts柱状图关闭鼠标hover时的高亮样式

最近在做图表相关的需求&#xff0c;使用的是echarts来画图。 今天算是遇到一个比较坑的点了吧&#xff0c;就是两根柱状图重叠对比&#xff0c;设计图把某根柱状图的颜色设计得比较浅&#xff0c;因为echarts的柱状图本身hover到柱子上的时候&#xff0c;会有个高亮状态&…

JavaScript纯前端解析Excel文件

最近在开发时候遇到了这样的一个需求&#xff1a;需要在前端通过解析Excel将Excel中的值进行回传填入。我想在实际的开发过程中&#xff0c;肯定大家也会遇到这样的需求&#xff0c;在这介绍一个比较不错的JS工具库&#xff1a;js-xlsx&#xff0c;及该库的简单使用方法。 1、…

Three.js-设置环境纹理及加载hdr环境贴图

目录 1.hdr 2.环境纹理&#xff08;全景&#xff09; 3.CubeTextureLoader加载立方体环境纹理 4.RGBELoader环境纹理加载 1.hdr HDR全称High-Dynamic Range&#xff08;高动态光照渲染&#xff09;&#xff0c;通过HDR&#xff0c;显示器或相机可以很好的表现超出其亮度范围…

vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据,动态校验规则】

vue3 ant design vue项目实战——Form表单【v-model双向绑定数据实现form表单数据的提交】上期文章回顾【UI界面渲染】场景复现&#xff08;源代码附在文章最后&#xff09;实现需求1.表单数据及其类型的定义2.表单及各部分数据的双向绑定3.表单提交功能4.校验输入内容不为空5.…

vue-数据绑定

目录 1 数据绑定 2 绑定方式 2.1 单向绑定 2.2 双向绑定 1 数据绑定 Vue中有两种数据绑定方式&#xff1a; 1 单向绑定(v-bind)&#xff1a;数据只能从data流向页面。 2 双向绑定&#xff08;v-modle&#xff09;&#xff1a;数据不仅能从data流向页面&#xff0c;还能从页…

VSCode开发:使用nvm切换node版本

为什么要切换node版本&#xff0c;是因为npm run dev(vant app&#xff09;时&#xff0c;报了Error [ERR_REQUIRE_ESM]&#xff1a;Must use import to load ES Module这样的错。我使用的node版本是12.16.3&#xff0c;切换到16.15.1就没有这个问题了。 1. 安装nvm前记得要删…

【node进阶】深度解析express框架---编写接口|解决跨域问题

✅ 作者简介&#xff1a;一名普通本科大三的学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强&a…