{ "searchValue": null, "createBy": "admin", "createTime": "2023-05-26 10:15:36", "updateBy": "", "updateTime": "2023-05-26 10:15:34", "remark": "53455", "params": {}, "freightRateId": "1111719298792947712", "freightRateNo": null, "freightRateType": null, "productType": "0", "startTime": "2023-05-26", "endTime": "2023-05-27", "supplierNo": null, "supplierName": null, "lineId": null, "lineNo": "0002", "freightRateStatus": "0", "delFlag": "0", "vehicleModelAmountData": "[{"vehicleModelId":1,"vehicleModelName":"4.2M","freightRate":55},{"vehicleModelId":2,"vehicleModelName":"5.2M","freightRate":66}]", "vehicleModelList": null }用vue+elementui的表格组件提取vehicleModelAmountData的vehicleModelName属性的值和freightRate的值组成表格的属性和值
时间: 2023-07-03 17:29:35 浏览: 101
javascript-strings:字符串问题的实际环境
可以使用Vue和Element UI的表格组件来提取vehicleModelAmountData的vehicleModelName属性的值和freightRate的值,组成表格的属性和值。具体步骤如下:
1. 将vehicleModelAmountData的值从字符串转换为数组,使用JSON.parse()方法来实现:
```
let vehicleModelAmountData = JSON.parse(data.vehicleModelAmountData);
```
2. 定义表格的列属性,包括vehicleModelName和freightRate:
```
const columns = [
{
label: '车型名称',
prop: 'vehicleModelName'
},
{
label: '运费',
prop: 'freightRate'
}
];
```
3. 遍历vehicleModelAmountData数组,将每个对象的vehicleModelName和freightRate属性的值存储到一个新的数组中:
```
const tableData = vehicleModelAmountData.map(item => ({
vehicleModelName: item.vehicleModelName,
freightRate: item.freightRate
}));
```
4. 在Vue模板中使用Element UI的表格组件,将columns和tableData传递给表格组件的props:
```
<template>
<el-table :data="tableData" :columns="columns"></el-table>
</template>
<script>
export default {
data() {
return {
columns: [
{
label: '车型名称',
prop: 'vehicleModelName'
},
{
label: '运费',
prop: 'freightRate'
}
],
tableData: []
};
},
mounted() {
let vehicleModelAmountData = JSON.parse(data.vehicleModelAmountData);
this.tableData = vehicleModelAmountData.map(item => ({
vehicleModelName: item.vehicleModelName,
freightRate: item.freightRate
}));
}
};
</script>
```
这样就可以在页面上展示一个包含vehicleModelName和freightRate两列的表格了。
阅读全文