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

Question

你好，我对如何将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中做到这一点？

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