使用 Vue 和 element ui 添加不同类型的列

【问题标题】：Add different type of column using Vue and element ui使用 Vue 和 element ui 添加不同类型的列
【发布时间】：2020-02-16 20:06:58
【问题描述】：

我正在寻找一个示例或一种方法来生成每行都有不同类型的列的表。

我阅读了Element UI table 的文档，但是找不到那种自定义。

请参考这里的图片。我想实现这种功能，如果有人过去实现过或者可以给我一些建议。

【问题讨论】：

标签： jquery vue.js element-ui

【解决方案1】：

你必须使用<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

【讨论】：