最近小颖在移动驻场，白头发大叔给了我一个EXCEL文件，然后用颜色标注了下，哪些需要我开发，反正就是各种行合并、列合并，一共五个表格，四个表格都能用 Element UI中的表格组件实现，但第一个需要自己去改造，小颖一开始写出来后发现表格无法自适应，就在想要不动态计算下表格上方得列宽然后再赋值给下面自己写的，后来同事给推荐了 vxe-table ，小颖试了后觉得，啊真香，哈哈，那就简单记录下，方便以后再遇到要写这种表格再费脑子去看怎么实现
用它的优点： vxe-table（支持大数据量的可编辑表格插件）
官方文档（有vue3、vue2版本）
需求：实现如图的表格
实现效果：
代码：
<div class="app-container home">
<vxe-table border show-footer :footer-span-method="footerRowspanMethod" :footer-method="footerMethod" :data="tableData">
<vxe-column field="name" title="城市"/>
<vxe-column field="nickname" title="厂家"/>
<vxe-colgroup title="x" align="center">
<vxe-colgroup title="x" align="center">
<vxe-column field="txt1" title="x" />
<vxe-column field="txt2" title="x" />
<vxe-column field="txt3" title="x" />
<vxe-column field="txt4" title="xx" />
<vxe-column field="txt5" title="xxx" />
<vxe-column field="txt6" title="小计" />
<vxe-column field="txt7" title="x" />
</vxe-colgroup>
<vxe-colgroup title="x" align="center">
<vxe-column field="txt1" title="xx" />
<vxe-column field="txt2" title="xx" />
<vxe-column field="txt3" title="xx" />
<vxe-column field="txt4" title="xx" />
<vxe-column field="txt5" title="x" />
<vxe-column field="txt6" title="小计" />
</vxe-colgroup>
<vxe-column field="txt7" title="合计" />
</vxe-colgroup>
</vxe-table>
</div>
</template>
<script>
export default {
name: "tableView",
components: {},
data() {
return {
tableData: [
{ name: '西安', nickname: '', txt1: 0, txt2: 0, txt3: 0, txt4: 0, txt5: 0, txt6: 0, txt7: 0, txt8: 0 },
{ name: '西安', nickname: '', txt1: 0, txt2: 0, txt3: 0, txt4: 0, txt5: 0, txt6: 0, txt7: 0, txt8: 0 },
{ name: '西安', nickname: '', txt1: 0, txt2: 0, txt3: 0, txt4: 0, txt5: 0, txt6: 0, txt7: 0, txt8: 0 },
{ name: '咸阳', nickname: '', txt1: 0, txt2: 0, txt3: 0, txt4: 0, txt5: 0, txt6: 0, txt7: 0, txt8: 0 },
{ name: '咸阳', nickname: '', txt1: 0, txt2: 0, txt3: 0, txt4: 0, txt5: 0, txt6: 0, txt7: 0, txt8: 0 },
{ name: '宝鸡', nickname: '', txt1: 0, txt2: 0, txt3: 0, txt4: 0, txt5: 0, txt6: 0, txt7: 0, txt8: 0 },
{ name: '渭南', nickname: '', txt1: 0, txt2: 0, txt3: 0, txt4: 0, txt5: 0, txt6: 0, txt7: 0, txt8: 0 },
{ name: '延安', nickname: '', txt1: 0, txt2: 0, txt3: 0, txt4: 0, txt5: 0, txt6: 0, txt7: 0, txt8: 0 }
],
};
},
created() {},
mounted() { },
methods: {
footerMethod({ columns, data }) {
const footerData = [
columns.map((column, _columnIndex) => {
if (_columnIndex === 0) {
return '合计'
}
return null
}),
columns.map((column, _columnIndex) => {
if (_columnIndex === 0) {
return '厂家合计'
}
if (_columnIndex === 1) {
return 'xx'
}
return null
}),
columns.map((column, _columnIndex) => {
if (_columnIndex === 1) {
return 'xxx'
}
return null
}),
columns.map((column, _columnIndex) => {
if (_columnIndex === 1) {
return 'xxxx'
}
return null
})
]
return footerData
},
footerRowspanMethod({ _rowIndex, _columnIndex }) {
if (_rowIndex === 1) {
if (_columnIndex === 0) {
return { rowspan: 2, colspan: 1 }
}
} else if (_rowIndex === 2) {
if (_columnIndex === 0) {
return { rowspan: 0, colspan: 0 }
}
}
}
}
};
</script>
<style scoped lang="scss"></style>
