Vue.js + Element UI : 두 행의 행 분할

Question

많은 열 (10 개)이있는 간단한 el-table입니다.
그래서 일부 열의 내용이 너무 좁습니다. 각 행을 두 줄로 나누고 싶습니다. 가능합니까? 같은

뭔가 :

<el-table :data="myData" stripe="stripe"> 
    <el-row> 
    <el-table-column prop="position" label="Col1">...</el-table-column> 
    <el-table-column prop="position" label="Col2">...</el-table-column> 
    <el-table-column prop="position" label="Col3">...</el-table-column> 
    </el-row> 
    <el-row> 
    <el-table-column prop="position" label="Col4">...</el-table-column> 
    <el-table-column prop="position" label="Col5">...</el-table-column> 
    <el-table-column prop="position" label="Col6">...</el-table-column> 
    </el-row> 

어떤 아이디어 :

| COL1 | COL2 | COL3 | 
| ROW1 | ROW1 | ROW1 | 
|  | ROW1 | ROW1 | 
| ROW2 | ROW2 | ROW2 | 
|  | ROW2 | ROW2 | 
| ROW3 | ROW3 | ROW3 | 
|  | ROW3 | ROW3 | 

내가 성공하지 다음과 같은 뭔가를 시도? 감사.

Answer 1

흠. 마크 업을 사용하는 것이 가능하지는 않지만 코드를 사용하여 가능한 것처럼 보입니다. 그것에 대해 span-method 속성을 바인딩해야합니다.

<el-table 
     :data="tableData6" 
     :span-method="spanLogicMethod" 
     border 
     style="width: 100%; margin-top: 20px"> 

부모 인스턴스에 메서드를 추가하면이 spanMethod 메서드를 추가 할 수 있습니다. 내부에 현재 column, row 및 그 색인이 있으므로 span 값을 반환 할 수 있습니다.

자세한 정보는 다큐 http://element.eleme.io/#/en-US/component/table

<script> 
    export default { 
    data() { 
     return { 
     // some data 
     } 
    }, 
    methods: { 
     spanLogicMethod({ row, column, rowIndex, columnIndex }) { 
     if (columnIndex === 0) { 
      if (rowIndex % 2 === 0) { 
      return { 
       rowspan: 2, 
       colspan: 1 
      }; 
      } else { 
      return { 
       rowspan: 0, 
       colspan: 0 
      }; 
      } 
     } 
     } 
    } 
    }; 
</script> 

에 Rowspan and colspan를 확인하실 수 있습니다