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

Здравствуйте, у меня есть вопрос о том, как прикрепить элемент html к строке таблицы в таблице пользовательского интерфейса элемента.

<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 добавлялся в каждую строку. Есть ли способ сделать это в пользовательском интерфейсе элемента?


vuejs2 element-ui
person Yves Gonzaga    schedule 20.09.2019    source источник
comment
Итак, вы пробовали это, и это не работает?   -  person Dexygen    schedule 20.09.2019
comment
Вы пробовали использовать шаблон slot-scope = scope?   -  person Renato Manalili    schedule 20.09.2019
comment
@GeorgeJempty Да, покупайте, это не будет применяться к каждой строке, отображаемой только один раз   -  person Yves Gonzaga    schedule 20.09.2019
comment
Область видимости слота шаблона @RenatoManalili будет отображаться внутри ячейки. Я хочу, чтобы он находился за пределами ячейки после самой последней позиции td. пример <tr><td></td><td></td><div here></tr>   -  person Yves Gonzaga    schedule 20.09.2019

Ответы (1)


arrow_upward
0
arrow_downward

Не уверен, чего вы пытаетесь достичь, но вы можете добавить пустой столбец и поместить сюда собственный 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>
person dreijntjens    schedule 20.09.2019