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>
原文地址:https://blog.csdn.net/dazhong2012/article/details/142598232
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!