1

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

就像是：

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

有任何想法吗？谢谢。

4

1 回答 1

1

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

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

并将方法添加到您的父实例，您可以添加此spanMethod方法。在里面你会得到 currentcolumn和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>
于 2017-12-22T14:49:27.853 回答