vue3 el-table 行的某个特定值来决定某些列是否显示

在 Vue 3 中使用 Element Plus 的 <el-table> 组件时，如果你想要根据行的某个特定值来决定某些列是否显示，你可以通过自定义列渲染函数（render 函数）来实现这一需求。下面是一个如何实现该功能的步骤说明和示例代码。

步骤 1: 定义表格数据

首先，确保你的表格数据中包含了用于判断的字段。

data() {
  return {
    tableData: [
      { date: '2016-05-02', name: '张三', status: '正常', type: 'A' },
      { date: '2016-05-04', name: '李四', status: '异常', type: 'B' },
    ]
  };
}

步骤 2: 使用 render 函数自定义列

在 <el-table-column> 中使用 render 函数来决定是否显示列。例如，如果你想根据 type 字段的值来决定某列是否显示，可以这样做：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="状态" width="180">
      <template #default="scope">
        {{ scope.row.status }}
      </template>
    </el-table-column>
    <!-- 自定义列，根据 type 值决定是否显示 -->
    <el-table-column label="类型" width="180" v-if="shouldShowTypeColumn">
      <template #default="scope">
        {{ scope.row.type }}
      </template>
    </el-table-column>
  </el-table>
</template>

步骤 3: 定义 shouldShowTypeColumn 计算属性

在 Vue 组件中，你可以定义一个计算属性来决定是否显示这个自定义列。例如，如果你想根据行的 status 是否为 "异常" 来决定：

computed: {
  shouldShowTypeColumn() {
    // 根据你的需求调整条件，这里以 status 为 "异常" 为例来决定是否显示类型列
    return this.tableData.some(row => row.status === '异常');
  }
}

上面的方法在某些情况下可能不会按预期工作，因为计算属性依赖于整个数据集。更合适的做法是在每一行上单独判断是否显示该列。这可以通过在 <el-table-column> 的 v-if 中使用一个行级判断来实现：

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  <el-table-column label="状态" width="180">
    <template #default="scope">
      {{ scope.row.status }}
    </template>
  </el-table-column>
  <!-- 动态显示列 -->
  <el-table-column label="类型" width="180" v-if="shouldShowType(scope.row)">
    <template #default="scope">
      {{ scope.row.type }}
    </template>
  </el-table-column>
</el-table>

在你的方法中定义 shouldShowType：

methods: {
  shouldShowType(row) {
    // 根据行的具体信息来决定是否显示该列，例如只对状态为“异常”的行显示类型列
    return row.status === '异常';
  }
}

这样，每个行都可以根据其具体值来决定是否显示“类型”列，而不是依赖于整个数据集的状态。