<vxe-table
border
resizable
height="300"
:scroll-y="{enabled: false}"
:span-method="mergeRowMethod"
:data="tableData3">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="key" title="Key"></vxe-table-column>
<vxe-table-column field="content" title="Translate"></vxe-table-column>
<vxe-table-column field="language" title="Language" :filters="[{label: '中文', value: 'zh_CN' }, {label: 'English', value: 'en_US'}]"></vxe-table-column>
</vxe-table>
export default {
data () {
return {
tableData3: [
{ id: 10001, key: 'app.label.name', content: '名称', language: 'zh_CN' },
{ id: 10002, key: 'app.label.name', content: 'Name', language: 'en_US' },
{ id: 10003, key: 'app.label.sex', content: '性别', language: 'zh_CN' },
{ id: 10004, key: 'app.label.sex', content: 'Sex', language: 'en_US' },
{ id: 10005, key: 'app.label.age', content: '年龄', language: 'zh_CN' },
{ id: 10006, key: 'app.label.age', content: 'Age', language: 'en_US' },
{ id: 10007, key: 'app.label.role', content: '角色', language: 'zh_CN' },
{ id: 10008, key: 'app.label.role', content: 'Role', language: 'en_US' },
{ id: 10009, key: 'app.label.address', content: '地址', language: 'zh_CN' },
{ id: 10010, key: 'app.label.address', content: 'Address', language: 'en_US' },
{ id: 10011, key: 'app.label.nickname', content: '昵称', language: 'zh_CN' },
{ id: 10012, key: 'app.label.nickname', content: 'Nickname', language: 'en_US' }
]
}
},
methods: {
// 通用行合并函数(将相同多列数据合并为一行)
mergeRowMethod ({ row, rowIndex, column, data }) {
const fields = ['key']
const cellValue = row[column.property]
if (cellValue && fields.includes(column.property)) {
const prevRow = data[rowIndex - 1]
let nextRow = data[rowIndex + 1]
if (prevRow && prevRow[column.property] === cellValue) {
return { rowspan: 0, colspan: 0 }
} else {
let countRowspan = 1
while (nextRow && nextRow[column.property] === cellValue) {
nextRow = data[++countRowspan + rowIndex]
}
if (countRowspan > 1) {
return { rowspan: countRowspan, colspan: 1 }
}
}
}
}
}
}
<vxe-table
border
resizable
height="300"
:scroll-y="{enabled: false}"
:span-method="mergeRowMethod"
:data="tableData3">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="key" title="Key"></vxe-table-column>
<vxe-table-column field="content" title="Translate"></vxe-table-column>
<vxe-table-column field="language" title="Language" :filters="[{label: '中文', value: 'zh_CN' }, {label: 'English', value: 'en_US'}]"></vxe-table-column>
</vxe-table>
export default {
data () {
return {
tableData3: [
{ id: 10001, fname: 'app.label.name', content: '名称', language: 'zh_CN' },
{ id: 10002, fname: 'app.label.name', content: 'Name', language: 'en_US' },
{ id: 10003, fname: 'app.label.sex', content: '性别', language: 'zh_CN' },
{ id: 10004, fname: 'app.label.sex', content: 'Sex', language: 'en_US' },
{ id: 10005, fname: 'app.label.age', content: '年龄', language: 'zh_CN' },
{ id: 10006, fname: 'app.label.age', content: 'Age', language: 'en_US' },
]
}
},
methods: {
// 通用行合并函数(将相同多列数据合并为一行)
mergeRowMethod ({ row, rowIndex, column, data}) {
const fields = ['fname']
const cellValue = row[column.property]
if (cellValue && fields.includes(column.property)) {
const prevRow = data[rowIndex- 1]
let nextRow = data[rowIndex+ 1]
if (prevRow && prevRow[column.property] === cellValue) {
return { rowspan: 0, colspan: 0 }
} else {
let countRowspan = 1
while (nextRow && nextRow[column.property] === cellValue) {
nextRow = data[++countRowspan + rowIndex]
}
if (countRowspan > 1) {
return { rowspan: countRowspan, colspan: 1 }
}
}
}
}
}
}