Vue.js + Element UI：将行拆分为两行答案

【问题标题】：Vue.js + Element UI: Split row on two rowsVue.js + Element UI：将行拆分为两行
【发布时间】：2018-06-05 00:58:51
【问题描述】：

我有一个简单的el-table，有很多列（正好十列）。
因此，某些列对于其内容来说太窄了。我想把每一行分成两行，可以吗？

类似：

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

我尝试了以下类似的方法但没有成功：

<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>

有什么想法吗？谢谢。

【问题讨论】：

标签： vue.js vue-component element-ui

【解决方案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>

【讨论】：