Vue.js + 元素UI：拆分两行

Question

我有一个简单的 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>

有什么想法吗？谢谢。

Answer 1

嗯，使用标记似乎是不可能的，但使用代码似乎是可能的。你需要为它绑定 span-method 属性。

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

并将方法添加到您的父实例，您可以添加此 spanMethod 方法。在里面你会得到当前的 column ， row 和它的索引，所以基于你可以 return 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>

Vue.js + 元素UI：拆分两行

Vue.js + Element UI: Split row on two rows

vue.js

vue-component

element-ui