ELEMENT 3.0 el-table-column 判断三种情况 插槽使用

在Element UI中，el-table-column 组件支持使用插槽来自定义列的内容。如果你需要基于三种不同情况来使用插槽，你可以通过传递不同的属性或者状态给插槽来实现条件判断。

以下是一个简单的例子，展示了如何在 el-table-column 中使用插槽来判断三种不同的情况：

<template>
  <el-table :data="tableData">
    <el-table-column label="状态" width="100">
      <template slot-scope="scope">
        <span v-if="scope.row.status === 'active'">活跃</span>
        <el-button v-else-if="scope.row.status === 'inactive'" type="warning" size="small">不活跃</el-button>
        <el-button v-else type="danger" size="small">停用</el-button>
      </template>
    </el-table-column>
    <!-- 其他列的定义 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { status: 'active', /* 其他数据 */ },
        { status: 'inactive', /* 其他数据 */ },
        { status: 'disabled', /* 其他数据 */ },
        // ... 更多数据
      ]
    };
  }
};
</script>

在这个例子中，el-table-column 的插槽被用来根据 scope.row.status 的值来判断并渲染不同的内容：

• 如果 status 是 'active'，则渲染文本 "活跃"。
• 如果 status 是 'inactive'，则渲染一个类型为 'warning' 的小按钮，文本为 "不活跃"。
• 如果 status 是其他值，这里假设是 'disabled'，则渲染一个类型为 'danger' 的小按钮，文本为 "停用"。