Adding hard coded row in element ui table

Question

I have a table using element-ui table. I need to create a first hard coded row, with some text and a button. It should not follow the normal table cells. just a row to take the full width of the table. I cant find a way to do it - it dose not need a column - label or anything. just the same table with a first hard coded row. couldnt find a way to do it. would appreciate any help.

The table looks something like this:

<template>
  <section class="order-list">
    <el-table style="width: 100%" :data="orders" v-if="orders">
      <el-table-column class-name="list-title" min-width="140" prop="title" label="Title"></el-table-column>
      <el-table-column class-name="list-edit-btn" min-width="100" label></el-table-column>
      <el-table-column min-width="100" prop="dpCount" label="# of DP">
        <template slot-scope="scope">
          <p>{{ scope.row.dpCount.toLocaleString() }}</p>
        </template>
      </el-table-column>
      <el-table-column
        class-name="description"
        prop="description"
        min-width="160"
        label="Description"
      ></el-table-column>
      <el-table-column min-width="270" prop="createdAt" label="Generation Status">
        <template slot-scope="scope">
          <order-status :order="scope.row" />
        </template>
      </el-table-column>
      <el-table-column class-name="list-actions" min-width="240" label>
        <template slot-scope="scope">
          <el-button
            size="mini"
            class="sample-btn"
            @click="goToLink(scope.row.sample.url)"
            :disabled="!scope.row.sample.url"
            round
          >Sample</el-button>
          <el-button
            class="btn"
            @click="goToLink(scope.row.downloadUrl)"
            :disabled="!scope.row.downloadUrl"
            size="mini"
            type="primary"
            round
          >Full Download</el-button>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

show us what you have tried/done.

oreopot
– oreopot

2020-05-17 09:31:25 +00:00
Commented May 17, 2020 at 9:31 — oreopot
– oreopot, Commented May 17, 2020 at 9:31
added the table

Jesus
– Jesus

2020-05-17 09:45:20 +00:00
Commented May 17, 2020 at 9:45 — Jesus
– Jesus, Commented May 17, 2020 at 9:45

dreijntjens · Accepted Answer · 2020-05-17 19:50:34Z

The only you can do this with element-ui is pretty dirty, you have to add an empty row in your table data and based on the rowIndex you can apply a colspan.

HTML:

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<template>
  <div>
    <el-table :data="tableData" :span-method="spanMethod" border style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
        <template slot-scope="scope">
          <template v-if="scope.$index === 0"> Some amazing text</template>
          <template v-else> {{ scope.row.id }}</template>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="amount1" label="Amount 1"></el-table-column>
      <el-table-column prop="amount2" label="Amount 2"></el-table-column>
      <el-table-column prop="amount3" label="Amount 3"></el-table-column>
    </el-table>
  </div>
</template>
</div>

JS:

var Main = {
    data() {
      return {
        tableData: [
          {},
          { id: '12987122', name: 'Tom', amount1: '234', amount2: '3.2', amount3: 10 }, 
          { id: '12987123', name: 'Tom', amount1: '165', amount2: '4.43', amount3: 12 }, 
          { id: '12987124', name: 'Tom', amount1: '324', amount2: '1.9', amount3: 9 }]
      };
    },
    methods: {
      spanMethod({ row, column, rowIndex, columnIndex }) {
       if (rowIndex === 0) {
          if (columnIndex === 0) {
            return [1, 5];
          } else if (columnIndex > 0) {
            return [0, 0];
          }
        }
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

Codepen: https://codepen.io/reijnemans/pen/xxwQKXq

Yea haha thats exactly what I ended up doing! It is dirty indeed but I had no choise except creating a new different table from scratch and its not really an option now. Thanks alot anyway

Collectives™ on Stack Overflow

Adding hard coded row in element ui table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related