在元素 ui table 中添加硬编码行

Question

我有一个 table 使用 element-ui table。我需要创建第一个硬编码行，其中包含一些文本和一个按钮。它不应遵循正常的 table 单元格。只是一行占据 table 的整个宽度。我无法找到一种方法来做到这一点 - 它不需要列 - 标签或任何东西。与第一个硬编码行相同 table。无法找到一种方法来做到这一点。将不胜感激。

table 看起来像这样：

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

Answer 1

你唯一能用 element-ui 做到这一点的方法很脏，你必须在你的 table 数据中添加一个空行，并且你可以根据 rowIndex 应用一个 colspan。

HTML:

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.1/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')

代码笔：https://codepen.io/reijnemans/pen/xxwQKXq

在元素 ui table 中添加硬编码行

Adding hard coded row in element ui table

vue.js

element-ui