VUE el-table colspan , rowspan

VUE el-table colspan , rowspan 

뷰에서 그리드 대신 el-table 사용한다 

가로,새로 합치는 방법 

  <el-table 
	:data="rowData"
	:span-method="합쳐라메서드"
	empty-text="데이터없음.">
	
	<el-table-column label="A"  prop="id"></el-table-column>  
	<el-table-column label="B" prop="name"></el-table-column>
	<el-table-column label="C" prop="date"></el-table-column>
	
</el-table>			

합쳐라메서드({ row, column, rowIndex, columnIndex }) {
	// 첫번째 인덱스 && 특정값일때 가로 3줄 colspan
	if( columnIndex === 0 && row.id ==='test' ){
		return [1,3]
	}else if( columnIndex === 1 && row.id ==='test'){
		// 합쳐져서 데이터 columnIndex 밀려서 정확한 데이터 출력 위해
		return [0,0]
	}else if( columnIndex === 2 && row.id ==='test'){
		// 합쳐져서 데이터 columnIndex 밀려서 정확한 데이터 출력 위해
		return [0,0]
	}else{
		// 아래처럼 사용해도 되고 
		// npm install element-ui-table-span-method  설치 후 
		// https://github.com/h69/element-ui-table-span-method 
		// 아래 리턴 사용 해도 깔금하다..
		// return spanRow({ row, column, rowIndex, columnIndex }, this.rowData, this.option)
		if( columnIndex === 0 && row.id !='test' ){		
			//id test가 아닐때 세로 2줄 합치고 싶다
			return {rowspan: 2,colspan: 1}
		}else{
			return {rowspan: 0,colspan: 0}				
		}
	}
}	

  

코드 참조 :

https://codepen.io/JISOU/pen/byEVPP?&editable=true
 

불러오는 중입니다...

https://element.eleme.io/#/en-US/component/table

불러오는 중입니다...