Добавить другой тип столбца, используя Vue и элемент пользовательского интерфейса - PullRequest
Новая
       3

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

0 голосов
/ 20 октября 2019

Я ищу пример или способ создания таблицы, в которой каждая строка имеет различный тип столбцов.

Я прочитал документацию Таблица элементов интерфейса , но не смог найти, чтовид настройки.

Пожалуйста, обратитесь к изображению здесь. Я хочу добиться такого рода функциональности, если кто-то реализовывал ранее или может дать мне несколько советов.

enter image description here

1 Ответ

1 голос
/ 20 октября 2019

Вы должны использовать <template slot-scope="scope">

Проверьте этот пример для таблицы element-ui: https://element.eleme.io/#/en-US/component/table#custom-column-template

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="Operations">
      <template slot-scope="scope">
        <el-button v-if="scope.row.date === '2016'">
          Edit
        </el-button>
        <el-select v-if="scope.row.date === '2017'">
          <el-option
            v-for="item in 3"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </template>
    </el-table-column>
  </el-table>
</template>

И если вы хотите, я сделал кодовое перо: https://codepen.io/Andugal/pen/JjjbBvE

...