Vue.js + Element UI：2行の行を分割する

Question

多くの列（10個）を持つ単純なel-tableがあります。
したがって、一部の列の内容が狭すぎます。私は2行で各行を分割したいと思います、それは可能ですか？以下のような

何か：

<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の値を返すことができます。詳細については、

あなたはドキュメンタリーでRowspan and colspan 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> 

を確認することができます