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

Question

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

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

请参考此处图片。我想实现这样的功能，有谁实现过或者可以给我一些建议。

Answer 1

你必须使用<template slot-scope="scope">

检查此示例中的元素-ui table : 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

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

Add different type of column using Vue and element ui

jquery

vue.js

element-ui