vxe-table
vxe-table copied to clipboard
table中,合并单元格,里面内容垂直方向不居中
可复现的链接(包含复现链接与示例代码):
无,直接看图吧。
问题描述与截图:
使用的是官网里面的例子,链接为https://vxetable.cn/#/component/table/merge/row
<template>
<div>
<vxe-table
border
:data="tableData"
:mergeCells=mergeCells>
<vxe-column type="seq" width="70"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="age" title="Age"></vxe-column>
<vxe-column field="address" title="Address" show-overflow></vxe-column>
</vxe-table>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { VxeTablePropTypes } from 'vxe-table'
interface RowVO {
id: number
name: string
role: string
sex: string
age: number
address: string
}
const tableData = ref<RowVO[]>([
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
])
const mergeCells = ref<VxeTablePropTypes.MergeCells>([
{ row: 1, col: 1, rowspan: 3, colspan: 1 },
{ row: 1, col: 3, rowspan: 2, colspan: 1 }
])
</script>
里面“Test2”和“22”都是垂直居中的,但是在引用到我自己的项目中就不垂直居中了
这个是我的效果。
有没有方式能够解决,不然太不美观了
期望的结果:
No response
操作系统:
windows11
浏览器版本:
Chromium 118.0.5993.159
vue 版本:
3.4.24
vxe-pc-ui 版本:
没有用
vxe-table 版本:
4.7.57,不止这一个版本
是否使用当前最新版本?
- [X] 我已确认是使用当前的最新版本并已按要求提供复现链接与示例代码。