Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 [Bug]: 表尾合并时,返回{ rowspan: 0, colspan: 0 }并不能隐藏单元格 #2691

Open
Godknow opened this issue Dec 24, 2024 · 2 comments
Assignees
Labels
bug Something isn't working

Comments

@Godknow
Copy link

Godknow commented Dec 24, 2024

Version

3.20

Vue Version

3.20

Link to minimal reproduction

表尾合并时,返回{ rowspan: 0, colspan: 0 }并不能隐藏单元格,官方例子中也一样,
微信图片_20241224161459
,本来就是这么用的么?

Step to reproduce

官方例子:
http://opentiny.design/tiny-vue/zh-CN/os-theme/components/grid-footer#footer-footer-row-or-column-span

What is expected

返回{ rowspan: 0, colspan: 0 }能隐藏单元格。

What is actually happening

No response

What is your project name

个人毕业设计

Any additional comments (optional)

No response

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.


Title: 🐛 [Bug]: When merging table tails, returning { rowspan: 0, colspan: 0 } does not hide cells

@gimmyhehe
Copy link
Member

@Godknow rowspan和colspan是与原生table表现一致的,因此就算设置为0也隐藏不了,此处官网demo也有问题,后续我们优化一下。

如果你不需要那么多单元格,你可以将前面的单元格的colspan设置大一些,然后将对应数据放到前面的单元格。

以下是示例与代码:
image

<template>
  <tiny-grid
    :data="tableData"
    border
    show-footer
    :footer-method="footerMethod"
    :footer-span-method="footerRowspanMethod"
  >
    <tiny-grid-column type="index" width="60"></tiny-grid-column>
    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
    <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
  </tiny-grid>
</template>

<script lang="jsx">
import { TinyGrid, TinyGridColumn } from '@opentiny/vue'

export default {
  components: {
    TinyGrid,
    TinyGridColumn
  },
  data() {
    return {
      tableData: [
        {
          id: '1',
          name: 'GFD科技YX公司',
          city: '福州',
          employees: 800,
          createdDate: '2014-04-30 00:56:00'
        },
        {
          id: '2',
          name: 'WWW科技YX公司',
          city: '深圳',
          employees: 300,
          createdDate: '2016-07-08 12:36:22'
        },
        {
          id: '3',
          name: 'RFV有限责任公司',
          city: '中山',
          employees: 1300,
          createdDate: '2014-02-14 14:14:14'
        },
        {
          id: '4',
          name: 'TGB科技YX公司',
          city: '龙岩',
          employees: 360,
          createdDate: '2013-01-13 13:13:13'
        },
        {
          id: '5',
          name: 'YHN科技YX公司',
          city: '韶关',
          employees: 810,
          createdDate: '2012-12-12 12:12:12'
        },
        {
          id: '6',
          name: 'WSX科技YX公司',
          city: '黄冈',
          employees: 800,
          createdDate: '2011-11-11 11:11:11'
        },
        {
          id: '7',
          name: 'KBG物业YX公司',
          city: '赤壁',
          employees: 400,
          createdDate: '2016-04-30 23:56:00'
        },
        {
          id: '8',
          name: '深圳市福德宝网络技术YX公司',
          city: '厦门',
          employees: 540,
          createdDate: '2016-06-03 13:53:25'
        }
      ]
    }
  },
  methods: {
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '全部的员工数量'
          }

          if (columnIndex === 1) {
            return data.map((item) => item.employees).reduce((acc, item) => acc + item)
          }

          return null
        }),
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return null
          }

          if (column.property === 'employees') {
            return null
          }

          return null
        })
      ]
    },
    footerRowspanMethod({ $rowIndex, columnIndex }) {
      if ($rowIndex === 0) {
        if (columnIndex === 0) {
          return { rowspan: 2, colspan: 2 }
        }

        if (columnIndex === 1) {
          return { rowspan: 2, colspan: 4 }
        }
      }
    }
  }
}
</script>

@kagol kagol added the bug Something isn't working label Jan 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants