vue2的 element 表格单元格合并

这篇具有很好参考价值的文章主要介绍了vue2的 element 表格单元格合并。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  1. <template>
  2. <div>
  3. <el-table show-summary :summary-method="getSummaries" :span-method="objectSpanMethod" :data="tableData" row-key="id" ref="tableDom" border>
  4. <el-table-column label="序号" width="55" align="center">
  5. <template slot-scope="scope">{{ scope.$index + 1 }}</template>
  6. </el-table-column>
  7. <el-table-column prop="name" label="分类" align="center"></el-table-column>
  8. <el-table-column prop="num1" label="数量1" align="center"></el-table-column>
  9. <el-table-column prop="num2" label="数量2" align="center"></el-table-column>
  10. <el-table-column prop="num3" label="数量3" align="center"></el-table-column>
  11. <el-table-column prop="type" label="类型" align="center"></el-table-column>
  12. <el-table-column prop="num4" label="数量4" align="center"></el-table-column>
  13. <el-table-column prop="num5" label="数量5" align="center"></el-table-column>
  14. </el-table>
  15. </div>
  16. </template>
  17. <script>
  18. export default {
  19. name: '',
  20. components: {},
  21. props: {},
  22. data() {
  23. return {
  24. tableData: [{
  25. name: '名称1',
  26. num1: '2',
  27. num2: '3',
  28. num3: '4',
  29. num4: '连续',
  30. num5: '6',
  31. num6: '7',
  32. }, {
  33. name: '名称2',
  34. num1: '2',
  35. num2: '3',
  36. num3: '4',
  37. num4: '连续',
  38. num5: '6',
  39. num6: '7',
  40. }, {
  41. name: '名称2',
  42. num1: '2',
  43. num2: '3',
  44. num3: '4',
  45. num4: '连续',
  46. num5: '6',
  47. num6: '7',
  48. }, {
  49. name: '名称3',
  50. num1: '2',
  51. num2: '3',
  52. num3: '4',
  53. num4: '连续',
  54. num5: '6',
  55. num6: '7',
  56. }, {
  57. name: '名称4',
  58. num1: '2',
  59. num2: '3',
  60. num3: '4',
  61. num4: '连续',
  62. num5: '6',
  63. num6: '7',
  64. }, {
  65. name: '名称4',
  66. num1: '2',
  67. num2: '3',
  68. num3: '4',
  69. num4: '连续',
  70. num5: '6',
  71. num6: '7',
  72. }]
  73. }
  74. },
  75. filters: {},
  76. computed: {},
  77. watch: {},
  78. created() {},
  79. mounted() {},
  80. beforeDestroy() {},
  81. methods: {
  82. // 合计
  83. getSummaries (param) {
  84. const { columns, data } = param
  85. const sums = []
  86. columns.forEach((column, index) => {
  87. if (index === 0) {
  88. sums[index] = '合计'
  89. } else if (index === 2 || index === 7) {
  90. const values = data.map(item => Number(item[column.property]))
  91. if (!values.every(value => isNaN(value))) {
  92. sums[index] = values.reduce((prev, curr) => {
  93. const value = Number(curr)
  94. if (!isNaN(value)) {
  95. return prev + curr
  96. } else {
  97. return prev
  98. }
  99. }, 0)
  100. } else {
  101. sums[index] = ''
  102. }
  103. } else {
  104. sums[index] = ''
  105. }
  106. })
  107. return sums
  108. },
  109. // table合并列
  110. objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  111. let data = this.tableData; //拿到当前table中数据
  112. let cellValue = row[column.property]; //当前位置的值
  113. let noSortArr = ['num1', 'num2', 'num3', 'num4', 'num5', 'num6']; //不需要合并的字段(不进行合并行的prop)
  114. if (cellValue && !noSortArr.includes(column.property)) {
  115. let prevRow = data[rowIndex - 1]; //获取到上一条数据
  116. let nextRow = data[rowIndex + 1]; //下一条数据
  117. if (prevRow && prevRow[column.property] === cellValue) { //当有上一条数据,并且和当前值相等时
  118. return { rowspan: 0, colspan: 0 };
  119. } else {
  120. let countRowspan = 1;
  121. while (nextRow && nextRow[column.property] === cellValue) { //当有下一条数据并且和当前值相等时,获取新的下一条
  122. nextRow = data[++countRowspan + rowIndex];
  123. }
  124. if (countRowspan > 1) {
  125. return { rowspan: countRowspan, colspan: 1 };
  126. }
  127. }
  128. }
  129. },
  130. }
  131. }
  132. </script>
  133. <style scoped lang="less">
  134. </style>vue2的 element 表格单元格合并,vue.js,elementui,javascript

 文章来源地址https://www.toymoban.com/news/detail-582114.html

到了这里,关于vue2的 element 表格单元格合并的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中Element-ui 表格 (Table)合并行、列单元格

    先在el-table里加个属性:span-method绑定方法objectSpanMethod(),这个用来把你想合并的列根据你写的逻辑来合并,再写个getSpanArr(),这个写合并的逻辑。 加一个属性两个方法,然后在获取表格数据的时候调用一下getSpanArr(),示例代码写了四个逻辑,根据id相同合并,根据id和其他字段

    2024年02月10日
    浏览(47)
  • vue2 ElementUI 表单标签、表格表头添加问号图标提示

    使用element-ui有时候需要对表格的 表头 、表单的 标签 进行自定义,添加问号的悬浮提示。 要达到的效果,如图所示: https://element.eleme.cn/#/zh-CN/component/tooltip 定义问号图标,图标上方显示tooltip提示内容 代码: 实现效果: 为什么不写content属性和里面的提示内容也能显示?

    2024年01月25日
    浏览(48)
  • 基于element-ui的table实现树级表格操作及单元格合并

    如题,公司业务需求,数据结构比较复杂,需要在一张表内实现多级树状数据展示及同属性的单元格合并,并在表格内实现增删改操作。 网上翻阅了很多实例,没有能解决所有需求的案例,于是自己实现了一套。 时间匆忙,逻辑有优化的地方还请无偿指出! 最终效果如下

    2024年02月14日
    浏览(46)
  • vue2使用 element表格展开功能渲染子表格

     默认样式 修改后   样式2 模拟数据 修改默认样式 

    2024年01月17日
    浏览(45)
  • vue表格实现一个简单的合并单元格功能

    用的是vue2+ant-design-vue 但是vue3或者element-ui也是同理 先上效果 需要后端的数据将相同id的放在一起 否则也会有问题 例如:

    2024年02月11日
    浏览(49)
  • Vue2 Element 表格&表单 我惯用的写法

    我需要整理一下表单验证和表格, 我们的项目里大量的使用了它们, 我应该形成一个模式去套用而不是像现在这样边构思边写. 还好后端返回的数据通常规范好用, 不是一些奇形怪状的结构. 表头创建, 最少需要知道表头要写的字( label )和该表头下该列出何种数据, 大部分时候这

    2023年04月15日
    浏览(33)
  • 【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

    gogo code 是一个基于 AST (源代码的抽象语法结构树状表现形式)的 JavaScript/Typescript/HTML 代码转换工具,可以用它来构建一个代码转换程序来帮助自动化完成如框架升级、代码重构、多平台转换等工作。 当前 GoGoCode 支持解析和操作如下类型的代码: ○JavaScript(JSX) ○Typescript

    2024年02月12日
    浏览(51)
  • VUE+ElementUI Table表格实现“指定行“展开并且其他行收起,“指定行”数据重复实现“合并行”

    遇到甲方爸爸一个需求,在原本的table表格中需要每一行具有下拉列表的功能,实现“指定行”展开,下拉菜单中并且含有数据属性重复的,则还需合并行。 展开行有两种方式: 方法一是利用table组件中 default-expand-all 属性,将 “内容是否存在” 作为判断条件,实现默认展开

    2024年01月23日
    浏览(52)
  • 【分页表格】Vue2 + Element UI实现自定义的分页表格组件(自定义Vue组件)

    这篇文章,主要介绍Vue2 + Element UI实现自定义的分页表格组件(自定义Vue组件)。 目录 一、分页表格 1.1、运行效果 1.2、运行环境 1.3、案例代码

    2024年02月11日
    浏览(55)
  • vue+ElementUI el-table表格单元格编辑增加键盘事件功能(向上、向下、回车键盘事件)

    1、如果单元格编辑使用了插槽功能,需要在插槽上添加一个class(这个类即:当前列的porp值) 2、porp不能重复(正常也不会存在) GitHub源码地址 Gitee源码地址 基于ElementUi或Antd再次封装基础组件文档 TTable组件封装地址

    2024年02月11日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包