Table 合并行
and-design-vue 结合vxe-table实现合并行提示:span-method ,不能用于虚拟滚动、树形结构、展开行、固定列,合并的逻辑都是自行实现的前言vxe-table主要通过span-method 合并方法({ row, rowIndex, $rowIndex, _rowIndex, column, columnIndex, $columnIndex, _columnIndex,
·
vue 结合vxe-table实现合并行
提示:span-method ,不能用于虚拟滚动、树形结构、展开行、固定列,合并的逻辑都是自行实现的
前言
vxe-table主要通过span-method 合并方法
({ row, rowIndex, $rowIndex, _rowIndex, column, columnIndex, $columnIndex, _columnIndex, data })
一、示例
二、自定义span-method方法
1.使用组件
代码如下(示例):
<vxe-table
border
resizable
height="300"
:scroll-y="{gt: -1}"
: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>
2.js代码
代码如下(示例):
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, visibleData }) {
// 定义合并单元个的字段
const fields = ['key']
// 当前单元格的数值
const cellValue = XEUtils.get(row, column.property)
if (cellValue && fields.includes(column.property)) {
// 当前单元格的上一行数据
const prevRow = visibleData[_rowIndex - 1]
// 下一行数据
let nextRow = visibleData[_rowIndex + 1]
// 与上级单元格相同
if (prevRow && XEUtils.get(prevRow, column.property) === cellValue) {
return { rowspan: 0, colspan: 0 }
// 查找下级单元格 是否存在相同的数据 存在 合并数加1
} else {
let countRowspan = 1
while (nextRow && XEUtils.get(nextRow, column.property) === cellValue) {
nextRow = visibleData[++countRowspan + _rowIndex]
}
if (countRowspan > 1) {
return { rowspan: countRowspan, colspan: 1 }
}
}
}
}
}
}
总结
此处参考https://xuliangzhan_admin.gitee.io/vxe-table/#/table/advanced/span vxe-table功能很强大,可以集成第三方库,进行行拖拽和列拖拽,此文档有很多例子可以参考。更多推荐
已为社区贡献1条内容
所有评论(0)