CODEWITHSUNDEEP
vue.jsvue-componentelement-ui
Alessandro
Alessandro

Reputation: 4472

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

I've a simple el-table with many columns (ten exactly).
So, some column is too narrow for its content. I'd like to split each row in two rows, is it possible?

Something like:

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

I tried with something like the following with no success:

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

Any ideas? Thanks.

Upvotes: 1

Views: 7066

Answers (1)

Hardik Satasiya
Hardik Satasiya

Reputation: 9693

Hmm it seems its not possible using markup but it seems its possible using code. you need to bind span-method attribute for it.

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

and add method to your parent instance you can add this spanMethod method. inside you will get current column , row and its index so based on that you can return span values.

for more information you can check Rowspan and colspan in docu 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>

Upvotes: 1

Related Questions