Добавление жестко закодированной строки в таблицу пользовательского интерфейса элемента

У меня есть таблица с использованием таблицы element-ui. Мне нужно создать первую жестко закодированную строку с текстом и кнопкой. Он не должен следовать за обычными ячейками таблицы. просто строка, чтобы занять всю ширину таблицы. Я не могу найти способ сделать это - для этого не нужен столбец - метка или что-то еще. точно такая же таблица с первой жестко закодированной строкой. не мог найти способ сделать это. был бы признателен за любую помощь.

Таблица выглядит примерно так:

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


vue.js element-ui
person Jesus    schedule 17.05.2020    source источник
comment
покажите нам, что вы пробовали / сделали.   -  person oreopot    schedule 17.05.2020
comment
добавил таблицу   -  person Jesus    schedule 17.05.2020

Ответы (1)


arrow_upward
2
arrow_downward

Единственное, что вы можете сделать с помощью element-ui, довольно грязно, вам нужно добавить пустую строку в данные таблицы и на основе rowIndex вы можете применить 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

person dreijntjens    schedule 17.05.2020
comment
Да, ха-ха, именно этим я и закончил! Это действительно грязно, но у меня не было выбора, кроме создания новой другой таблицы с нуля, и сейчас это не вариант. В любом случае спасибо - person Jesus; 21.05.2020