分享一个vue-slott

需求再现

 <el-table-column align="center" label="状态" prop="mitStatus" show-overflow-tooltip />

在这里，我想对于状态进行一个三目判断，如果为0那就是进行中，否则就是已完成，期初我是这样写的

 <el-table-column align="center" label="状态" prop="mitStatus==0?'进行中':'已完成'" show-overflow-tooltip />

看似好像正确，但是功能没有实现，原因是当在 Vue 中使用 渲染表格列时，你可以使用 prop 属性来指定要显示的数据字段。例如，prop="mitStatus" 表示该列应该显示 mitStatus 字段的值。然而，在 prop 中不能直接写 JavaScript 表达式，因为它仅仅是用来指定数据字段名称的。

如果你想要根据特定条件来渲染单元格内容，你需要使用 scoped-slot，这是 Vue 表格组件的一种功能，它允许你在单元格中使用自定义的模板来渲染内容。在上面的情况下，你想要根据 mitStatus 的值来显示不同的文本，所以你需要使用 scoped-slot 来处理这个逻辑。

问题解决

所以可以使用 scoped-slot 来自定义表格列的内容，以便根据不同的数据值来显示不同的内容。在你的代码中，将 el-table-column 修改如下：

<el-table-column align="center" label="状态" prop="mitStatus" show-overflow-tooltip>
  <template slot-scope="scope">
    {{ scope.row.mitStatus === 0 ? '进行中' : '已完成' }}
  template>
el-table-column>

在上面的代码中，slot-scope="scope" 表示在这个 slot 内可以使用 scope 对象来访问当前行的数据。通过 scope.row.mitStatus 来获取每行的 mitStatus 值，然后根据不同的值显示相应的内容。如果 mitStatus 为 0，则显示 “进行中”，否则显示 “已完成”。

知识扩展

当在 Vue.js 中使用 Element UI 的 组件时，可以通过插槽（slots）来自定义表格列的内容。插槽是 Vue.js 的一个特性，允许你在组件内部嵌入额外的内容或模板，并且可以在组件中使用这些插槽来渲染内容。在 中，可以使用插槽来自定义每列的显示方式。

下面是一个关于如何使用插槽语法自定义表格列内容的简单示例：

<template>
  <el-table :data="tableData">
    <el-table-column label="姓名" prop="name">el-table-column>
    <el-table-column label="状态">
      
      <template slot-scope="scope">
        
        {{ scope.row.status === 0 ? '进行中' : '已完成' }}
      template>
    el-table-column>
  el-table>
template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Alice', status: 0 },
        { name: 'Bob', status: 1 },
        { name: 'Charlie', status: 0 },
      ],
    };
  },
};
script>

在上面的示例中：

1. 在 组件内，我们使用了两个 ，分别用于显示姓名和状态列。

2. 在第二个 中，使用了一个