在 Vue 2.0 中，如果在使用 Element UI 的 组件，并希望自定义 中显示的 prop 属性的值（比如，
memberName），有几种方法可以实现这一点。最直接的方法之一是在 Vue 组件的 data 函数或计算属性（computed properties）中处理这些数据，然后通过模板语法展示处理后的值。
示例 1：使用计算属性
假设有一个包含值班人员信息的数组 dutyMembers，每个对象可能包含一个 name 字段，但想在表格中显示为 memberName（可能为了与其他部分的代码保持一致，或者需要添加一些前缀/后缀）。
可以通过创建一个计算属性来返回一个新的数组，这个数组中的每个对象都包含希望显示的 memberName。
export default { data() { return { // 原始数据 dutyMembers: [ { id: 1, name: '张三' }, { id: 2, name: '李四' } ] }; }, computed: { // 计算属性，用于返回修改后的数据 tableData() { return this.dutyMembers.map(member => ({ ...member, // 保留原始对象的其他属性 memberName: `值班人员：${member.name}` // 自定义显示值 })); } }
}
然后，在模板中，可以这样使用 <el-table> 和 <el-table-column>：
<el-table :data="tableData" style="width: 100%"> <el-table-column label="值班人员" align="center" prop="memberName" />
</el-table>
示例 2：使用作用域插槽（Scoped Slots）
如果想要更灵活的控制单元格的渲染（比如，添加按钮或链接），可以使用作用域插槽（在 Element UI 中称为 scoped slots）。不过，对于简单的文本自定义，使用计算属性通常更简洁。但这里提供一个使用作用域插槽的示例，以展示其灵活性。
<el-table :data="dutyMembers" style="width: 100%"> <el-table-column label="值班人员" align="center"> <template slot-scope="scope"> <span>{{ '值班人员：' + scope.row.name }}</span> </template> </el-table-column>
</el-table>
注意：在 Vue 2.6.0+ 和 Element UI 的较新版本中，slot-scope 被废弃，取而代之的是 v-slot 指令。因此，上面的作用域插槽代码可以更新为：
<el-table-column label="值班人员" align="center"> <template v-slot="scope"> <span>{{ '值班人员：' + scope.row.name }}</span> </template>
</el-table-column>
