<el-table-column prop="displayData" width="120" align="center" label="运行时间" />data与dataUnit为后端接口传输而来这个列表由data字段和dataUnit字段拼接组成,如果dataUnit字段值为m则将data除以60后与H拼接,如果dataUnit字段为H则直接将两个字段拼接
时间: 2023-07-06 17:43:11 浏览: 75
非常感谢您的提问!根据您的描述,您想要在 `el-table-column` 中展示运行时间,是由 `data` 字段和 `dataUnit` 字段拼接组成的。当 `dataUnit` 字段值为 `m` 时,需要将 `data` 除以 60 并与 `H` 拼接,否则直接将两个字段拼接。下面是一个示例代码,供您参考:
```html
<template>
<div>
<el-table :data="tableData">
<el-table-column
prop="data"
width="120"
align="center"
label="数据"
/>
<el-table-column
prop="dataUnit"
width="120"
align="center"
label="数据单位"
/>
<el-table-column
prop="displayData"
width="120"
align="center"
label="运行时间"
/>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: []
};
},
mounted() {
// 使用axios或者fetch等工具从后端获取数据,假设数据为response
const response = [
{ data: 120, dataUnit: 'm' },
{ data: 30, dataUnit: 's' },
{ data: 240, dataUnit: 'H' }
];
this.tableData = response.map((item) => {
if (item.dataUnit === 'm') {
item.displayData = `${item.data / 60}H`;
} else {
item.displayData = `${item.data}${item.dataUnit}`;
}
return item;
});
}
};
</script>
```
在上述代码中,使用 `map` 方法遍历 `response` 数组中的每个元素,使用 `if` 语句对 `dataUnit` 字段进行判断,如果为 `m` 则将 `data` 除以 60 并与 `H` 拼接,否则直接将 `data` 和 `dataUnit` 拼接。最终将新的 `displayData` 字段赋值给 `tableData` 数组中的每个元素,用于在表格中展示运行时间。
阅读全文