iView-Table合并，防止串行

拼搏现实的明天。 2023-01-23 02:59 15阅读 0赞

串行的效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

合并后的效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1][]

<template>
    	<Table :columns="columns14" :data="data5" border :span-method="handleSpan" class="tableclass"></Table>
    </template>
    <script>
    	export default {
    		name: "tableone",
    		data() {
    			return {
    				columns14: [{
    						title: '序号',
    						key: 'index'
    					}, {
    						title: '类型',
    						key: 'date'
    					},
    					{
    						title: '一级',
    						key: 'name'
    					},
    					{
    						title: '二级',
    						key: 'age'
    					},
    					{
    						title: '合计',
    						key: 'address'
    					}
    				],
    				data5: [{
    						index: 1,
    						name: '服务',
    						age: '催费',
    						address: 42,
    						date: '举报'
    					},
    					{
    						index: 2,
    						name: '服务',
    						age: '催费',
    						address: 42,
    						date: '举报'
    					},
    					{
    						index: 3,
    						name: '服务',
    						age: '催费',
    						address: 42,
    						date: '举报'
    					},
    					{
    						index: 4,
    						name: '服务',
    						age: '催费',
    						address: 42,
    						date: '举报'
    					},
    					{
    						index: 5,
    						name: '服务',
    						age: '催费',
    						address: 42,
    						date: '举报'
    					},
    					{
    						index: 6,
    						name: '服务',
    						age: '催费',
    						address: 42,
    						date: '举报'
    					}
    				]
    			}
    		},
    		mounted() {},
    		methods: {
    			handleSpan({
    				row,
    				column,
    				rowIndex,
    				columnIndex
    			}) {
    				// rowIndex === 0是第一行  columnIndex === 0是第一列  (rowIndex === 0 && columnIndex === 0) 表示的是第一行第一列
    				// if (rowIndex === 0 && columnIndex === 0) {
    				// 	return [1, 2];  //表示合并1行2列
    				// } else if (rowIndex === 0 && columnIndex === 1) { // (rowIndex === 0 && columnIndex === 1) 是指第一行，第二列
    				// 	return [0, 0];  //表示合并0行0列，即这是被合并的单元格   这里被合并的单元格一定要返回 return  [0, 0]，否则会出现数据下串
    				// }
    				if (rowIndex === 0 && columnIndex === 1) { //第一行 第一列
    					return {
    						rowspan: 3,  //合并三行
    						colspan: 1
    					};
    				} else if (rowIndex === 1 && columnIndex === 1 || rowIndex === 2 && columnIndex === 1) {
    					// 为了防止串行,被合并的行或者列要返回[0,0],数组或者{}都可以  当前返回的是 第二行第二列和第三行第二列  索引是从0开始
    					return {
    						rowspan: 0,
    						colspan: 0
    					};
    				}
    			}
    		}
    	}
    </script>
    <style scoped>
    	.tableclass {
    		width: 100%;
    		height: 100%;
    	}
    </style>

iView文档：[https://www.iviewui.com/components/table][https_www.iviewui.com_components_table]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20221004/659b7561e0694e2c9956c2e4b16180c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1]: /images/20221004/9bb4879b02ce4c3c96ffe121c144901f.png
[https_www.iviewui.com_components_table]: https://www.iviewui.com/components/table