如何将 html 元素附加到 Element UI 表格中的表格行答案

【问题标题】：How to attach html element to table row in Element UI table如何将 html 元素附加到 Element UI 表格中的表格行
【发布时间】：2020-01-21 06:53:07
【问题描述】：

您好，我有一个关于如何将 html 元素附加到 Element UI 表格中的表格行的问题。

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="Date"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="Address">
      </el-table-column>

// Add some other element in here like div,span,p etc...

    </el-table>

我希望在每一行中添加 html 元素。有没有办法在 Element UI 中做到这一点？

【问题讨论】：

所以你试过了还是不行？
您是否尝试过使用模板 slot-scope="scope"？
@GeorgeJempty 是的，购买它不会适用于仅呈现一次的每一行
@RenatoManalili 模板 slot-scope 将在单元格内呈现。我希望它在 td 的最后一个位置之后位于单元格之外。例如<tr><td></td><td></td><div here></tr>

标签： vuejs2 element-ui

【解决方案1】：

不确定您要实现什么，但您可以添加一个空列并将自定义 html 放在这里：

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="Date"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Name"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="Address">
    </el-table-column>
    <el-table-column>
      <el-button>What every you want</el-button
    </el-table-column>
  </el-table>
</template>

或者使用插槽：

<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="Date"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Name"
      width="180">
      <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="address"
      label="Address">
    </el-table-column>
  </el-table>

【讨论】：