Vuejs上下文中从API接收后如何修改表格内容
[英] How to modify the table contents after receiving it from the API in the context of Vuejs
本文介绍了Vuejs上下文中从API接收后如何修改表格内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 REST API 显示表格，因此在我的 API 响应中，对象中的少量数据包含空数据，很少有数据包含负值，以下是我得到的响应:
为了更好地理解，我只显示了两个响应.
<代码>{id":778，日期":12/12/12"，低":175，高":176，per_low":78，per_high":89，得到":180"，损失":16，轻松":好"，状态":关闭"，挑战":-0.41//每当它是负数时，我想用红色文本显示它.},{id":779，日期":2/8/13"，低":135，高":186，per_low":58，per_high":99，gets": null,//每当它为空时我想显示-"损失":6，轻松":好"，状态":关闭"，挑战":2.41//每当它是肯定的时，我想用绿色文本显示它}如您所见，我希望在响应成功时修改来自 API 的一些输入，因此下面我展示了我的尝试方式:
<div id="ag-grid-demo"><vx-card><!-- 表操作行--><div class="flex flex-wrap justify-between items-center"><!-- 每页项目数--><div class="mb-4 md:mb-0 mr-4 ag-grid-table-actions-left"><vs-dropdown vs-trigger-click class="cursor-pointer"><div class="p-4 border-solid d-theme-border-grey-light rounded-full d-theme-dark-bg cursor-pointer flex items-center justify-between font-medium"><span class="mr-2">{{ currentPage * paginationPageSize - (paginationPageSize - 1) }} - {{ robots.length - currentPage * paginationPageSize >0 ?currentPage * paginationPageSize : robots.length }} of {{robot.length }}</span><feather-icon icon="ChevronDownIcon";svgClasses=h-4 w-4"/>
</vs-dropdown>
<ag-grid-vueref=agGridTable":gridOptions="gridOptions";class="ag-theme-material w-100 my-4 ag-grid-table";:columnDefs="columnDefs";:defaultColDef="defaultColDef";:rowData="机器人"rowSelection=多个"colResizeDefault=移位"；:animateRows="true";:floatingFilter="true";:分页=真":paginationPageSize="paginationPageSize";:suppressPaginationPanel="true";:enableRtl=$vs.rtl"></ag-grid-vue><vs-分页:total="totalPages";:max=maxPageNumbers"v-model=当前页面"/></vx-card>
<脚本>导出默认{数据 () {返回 {列定义:[{headerName: '日期',字段:'日期'，宽度:200，过滤器:真},{headerName: '低',字段:'低'，过滤器:真实，宽度:200},{headerName: '高',字段:'高'，过滤器:真实，宽度:200},{headerName: '每低',字段:'per_low'，过滤器:真实，宽度:200},{headerName: '每高',字段:'per_high'，过滤器:真实，宽度:200},{headerName: '获取',字段:'获取'，过滤器:真实，宽度:200},{headerName: '损失',字段:'损失'，过滤器:真实，宽度:200},{headerName: '轻松',字段:'轻松'，过滤器:真实，宽度:200},{headerName: '状态',字段:'状态'，过滤器:真实，宽度:200},{headerName: '挑战',领域:'挑战'，过滤器:真实，宽度:200}]， 机器人: []，}},方法: {表(ID，值){this.$http.get(`/database/${id}`).then((响应) => {this[value] = response.dataif (this[value].gets === null ){this[value].gets = '-'} 别的{这个[值].gets}如果 (this[value].challenge >= 0) {this[value].challenge = 'class='positive\''} 别的 {this[value].challenge = 'class='negative\''}}).catch((错误) => {控制台日志(错误)})}},挂载(){this.table(8, '机器人')}}
如您所见，我尝试修改来自 API 的数据，但只有来自 API 的数据显示在我的表中.我的表格中没有反映任何修改.(如果陈述没有反映)
请有人帮我解决这个问题，我想知道这是正确的方法.我应该做些什么改变才能让它反映在我的桌子上.
目标:我想在获取"时显示-"数据显示为空，我想在挑战"出现时显示绿色文本每当挑战"时显示正值和红色文本显示负值.
解决方案
您不应修改数据，而应使用 ag-grid api 来应用自定义样式、类或格式数据.请注意，我没有测试过它，但它应该可以工作.
- 只需将数据分配给
robot，不要对数据进行任何更改.
table(id, value) {this.$http.get(`/database/${id}`).then((响应) => {this.robot = response.data}).catch((错误) => {控制台日志(错误)})}
- 为
gets 和 challenge 这样的列添加 columnDefs
columnDefs = [{headerName: '获取',字段:'获取'，过滤器:真实，宽度:200，valueFormatter:函数(参数){返回 params.value ?params.value : '-'}},{headerName: '挑战',领域:'挑战'，过滤器:真实，宽度:200，valueFormatter:函数(参数){返回 params.value ?(params.value > 0 ? '+' : '') + params.value + '%' : ''},单元格样式:函数(参数){如果 (parseInt(params.value) > 0 ) {返回{颜色:'绿色'}；} 别的 {返回{颜色:'红色'}；}}]
I am displaying table by using REST API, so in my API response few data in objects contains null data and few data contains negative values, here below is my response that i am getting:
I have shown only two response for better understanding.
{
"id": 778,
"date": "12/12/12",
"low": 175,
"high": 176,
"per_low": 78,
"per_high": 89,
"gets": "180",
"loss": 16,
"ease": "ok",
"status": "Closed",
"challenge": -0.41 // Whenever it is negative i want to display it with red color text.
},
{
"id": 779,
"date": "2/8/13",
"low": 135,
"high": 186,
"per_low": 58,
"per_high": 99,
"gets": null, // Whenever it is null i want to display '-'
"loss": 6,
"ease": "ok",
"status": "Closed",
"challenge": 2.41 // Whenever it is positive i want to display it with green color text
}
As you can see my response, i am looking to modify some of the inputs coming from the API when the response is successful, so below i have shown how i tried it:
<template>
<div id="ag-grid-demo">
<vx-card>
<!-- TABLE ACTION ROW -->
<div class="flex flex-wrap justify-between items-center">
<!-- ITEMS PER PAGE -->
<div class="mb-4 md:mb-0 mr-4 ag-grid-table-actions-left">
<vs-dropdown vs-trigger-click class="cursor-pointer">
<div class="p-4 border border-solid d-theme-border-grey-light rounded-full d-theme-dark-bg cursor-pointer flex items-center justify-between font-medium">
<span class="mr-2">{{ currentPage * paginationPageSize - (paginationPageSize - 1) }} - {{ robot.length - currentPage * paginationPageSize > 0 ? currentPage * paginationPageSize : robot.length }} of {{ robot.length }}</span>
<feather-icon icon="ChevronDownIcon" svgClasses="h-4 w-4" />
</div>
</vs-dropdown>
</div>
</div>
<ag-grid-vue
ref="agGridTable"
:gridOptions="gridOptions"
class="ag-theme-material w-100 my-4 ag-grid-table"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:rowData="robot"
rowSelection="multiple"
colResizeDefault="shift"
:animateRows="true"
:floatingFilter="true"
:pagination="true"
:paginationPageSize="paginationPageSize"
:suppressPaginationPanel="true"
:enableRtl="$vs.rtl">
</ag-grid-vue>
<vs-pagination
:total="totalPages"
:max="maxPageNumbers"
v-model="currentPage" />
</vx-card>
</div>
</template>
<script>
export default {
data () {
return {
columnDefs: [
{
headerName: 'Date ',
field: 'date',
width: 200,
filter: true
},
{
headerName: 'Low',
field: 'low',
filter: true,
width: 200
},
{
headerName: 'High',
field: 'high',
filter: true,
width: 200
},
{
headerName: 'Per Low',
field: 'per_low',
filter: true,
width: 200
},
{
headerName: 'Per High',
field: 'per_high',
filter: true,
width: 200
},
{
headerName: 'Gets',
field: 'gets',
filter: true,
width: 200
},
{
headerName: 'Loss',
field: 'loss',
filter: true,
width: 200
},
{
headerName: 'Ease',
field: 'ease',
filter: true,
width: 200
},
{
headerName: 'Status',
field: 'status',
filter: true,
width: 200
},
{
headerName: 'Challenge',
field: 'challenge',
filter: true,
width: 200
}
], robot: [],
}
},
methods: {
table(id, value) {
this.$http.get(`/database/${id}`)
.then((response) => {
this[value] = response.data
if (this[value].gets === null ){
this[value].gets = '-'
} else{
this[value].gets
}
if (this[value].challenge >= 0) {
this[value].challenge = ' class=\'positive\''
} else {
this[value].challenge = ' class=\'negative\''
}
})
.catch((error) => {
console.log(error)
})
}
},
mounted () {
this.table(8, 'robot')
}
}
</script>
As you can see my code, i have tried to modify the data coming from the API, But only the data which is coming from API is displayed in my table. No modifications are reflecting in my table. (if statement are not reflecting)
Please someone help me with this, i want to know is this the right way to do it. And what changes should i do in order make it reflect on my table.
Objective: I want to display '-', whenever the "gets" data displays null, and i want display green color text whenever the "challenge" display positive value and red color text whenever the "challenge" display negative value.
解决方案
You should not modify data, rather use ag-grid apis to apply custom styles, class or format data. Please note i have no tested it but it should work.
- simply assign data to
robot, do not make any changes to the data.
table(id, value) {
this.$http.get(`/database/${id}`)
.then((response) => {
this.robot = response.data
})
.catch((error) => {
console.log(error)
})
}
- Add columnDefs for
gets and challenge cols like this
columnDefs = [
{
headerName: 'Gets',
field: 'gets',
filter: true,
width: 200,
valueFormatter: function(params){
return params.value ? params.value : '-'
}
},
{
headerName: 'Challenge',
field: 'challenge',
filter: true,
width: 200,
valueFormatter: function(params){
return params.value ? (params.value > 0 ? '+' : '') + params.value + '%' : ''
},
cellStyle: function(params) {
if (parseInt(params.value) >0 ) {
return { color: 'green'};
} else {
return { color: 'red'};
}
}
]
这篇关于Vuejs上下文中从API接收后如何修改表格内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
