Как прикрепить элемент html к строке таблицы в таблице пользовательского интерфейса элемента

Question

Здравствуйте. У меня вопрос о том, как прикрепить элемент html к строке таблицы в таблице 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>