ElementUI 之 el-table

el-table

修改el-table-column中绑定的prop的默认值

在使用 el-table-column 时，prop 属性本身并没有直接提供设置默认值的选项。prop 是用于绑定表格数据的字段名，而不是直接设置默认值的属性。如果需要为表格中的数据设置默认值，可以通过以下几种方式实现：

1. 在数据源中设置默认值

在定义表格数据时，直接为数据对象的字段设置默认值。例如：

data() {
  return {
    tableData: [
      { name: 'John Doe', age: 25 },
      { name: '', age: 30 }, // 为空的字段
      { name: 'Jane Doe', age: 28 }
    ]
  };
}

如果需要在加载时为某些字段设置默认值，可以在 created 生命周期中处理：

（这种方式适用于在数据加载时统一设置默认值）

created() {
  this.tableData.forEach(item => {
    if (!item.name) {
      item.name = '默认值';
    }
  });
}

2. 使用插槽和条件渲染

在 el-table-column 中使用插槽，通过 v-if 或 v-else 来判断数据是否存在，并设置默认值。例如：

（这种方式可以在表格渲染时动态设置默认值）

<el-table :data="tableData">
  <el-table-column label="姓名" prop="name">
    <template slot-scope="scope">
      <span v-if="scope.row.name">{{ scope.row.name }}</span>
      <span v-else>默认值</span>
    </template>
  </el-table-column>
</el-table>

<!--在Vue3中，slot-scope属性已被废弃，推荐使用v-slot语法糖，用于访问row数据。示例如下：-->
<template>
  <el-table>
    <el-table-column label="姓名" prop="name" v-slot="{row}">
      {{ row.name }}
    </el-table-column>
  </el-table>
</template>

3. 使用 formatter 属性

如果需要根据数据动态生成显示内容，可以使用 formatter 属性。例如：

（这种方式适用于需要对数据进行格式化处理的场景）

<el-table :data="tableData">
  <el-table-column label="姓名" prop="name" :formatter="formatName">
  </el-table-column>
</el-table>

methods: {
  formatName(row, column) {
    return row.name || '默认值';
  }
}

小结

因为 prop 是用于绑定数据字段的，而不是直接设置显示内容。 综上所述，建议根据具体需求选择合适的方式设置默认值。如果只是简单地为某些字段设置默认值，直接在数据源中处理是最简单直接的方式。如果需要更复杂的动态处理，可以使用插槽或 formatter 属性。

参考链接