vue框架学习 -- 表单开发之页面自定义显示值

在 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>