个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
27
4
我构建了一个 Vue.js 组件，它从 Woocommerce 商店获取订单。这些订单包含产品的产品变体，并作为对象接收。
在表格中，我需要在对象显示之前对其进行格式化。
我的代码是这样的:
<template>
<div>
<vue-good-table
title=""
:columns="columns"
:rows="variationOrders"
:paginate="true"
:lineNumbers="true"/>
</div>
</template>
<script>
export default {
data: function() {
return {
variationOrders: [],
columns: [
{
label: 'Order#',
field: 'order_id',
filterable: true,
},
{
label: 'Customer',
field: 'customer_name',
//type: 'number',
html: false,
filterable: true,
},
{
label: 'QTY',
field: 'qty',
type: 'number',
//inputFormat: 'YYYYMMDD',
//outputFormat: 'MMM Do YY',
},
{
label: 'Product',
field: 'product_name',
//type: 'percentage',
html: false,
},
{
label: 'Variations',
field: this.formatVariations(self.variationOrders),
//type: 'percentage',
html: true,
},
{
label: 'Timeslot',
field: 'timeslot',
//type: 'percentage',
html: false,
},
{
label: 'Transportation',
field: 'store_id',
//type: 'percentage',
html: false,
},
],
}
},
methods: {
getTotals: function() {
var self = this;
var productId = document.getElementById('product-id').getAttribute('data-id');
axios.get('/api/v1/order_variations/' + productId)
.then(function (response) {
self.variationOrders = response.data.order_variations;
//console.log(response.data);
})
.catch(function(error) {
//
});
},
formatVariations: function(variationOrders) {
console.log(variationOrders);
},
},
mounted: function() {
this.getTotals();
// call the API every 30 seconds to fetch new orders
setInterval(function () {
this.getTotals();
}.bind(this), 5000);
}
}
</script>
在Variations 列中，我传递了一个负责格式化字符串的函数。该函数本身工作正常，但我无法将接收到的对象从 API 传递给该函数。
我在控制台中收到以下错误消息:
如果我传递 this.formatVariations(this.variationOrders) 和 console.log，我得到 undefined
如果我传递 this.formatVariations(variationOrders) 和 console.log，我会得到 [Vue warn]: Error in data(): "ReferenceError: variationOrders is not defined"
我怀疑在函数被调用时，那个变量还不存在。
有什么我想念的吗？
更新 1
我已将代码更新为以下内容。我更近了，但不幸的是， View 没有更新。
我的代码是这样的:
<template>
<div>
<vue-good-table
title=""
:columns="formattedColumns"
:rows="variationOrders"
:paginate="true"
:lineNumbers="true"/>
</div>
</template>
<script>
export default {
data: function() {
return {
variationOrders: [],
columns: [
{
label: 'Order#',
field: 'order_id',
filterable: true,
},
{
label: 'Customer',
field: 'customer_name',
//type: 'number',
html: false,
filterable: true,
},
{
label: 'QTY',
field: 'qty',
type: 'number',
//inputFormat: 'YYYYMMDD',
//outputFormat: 'MMM Do YY',
},
{
label: 'Product',
field: 'product_name',
//type: 'percentage',
html: false,
},
{
label: 'Variations',
field: 'variation',
//type: 'percentage',
html: true,
},
{
label: 'Timeslot',
field: 'timeslot',
//type: 'percentage',
html: false,
},
{
label: 'Transportation',
field: 'store_id',
//type: 'percentage',
html: false,
},
],
}
},
methods: {
getTotals: function() {
var self = this;
var productId = document.getElementById('product-id').getAttribute('data-id');
axios.get('/api/v1/order_variations/' + productId)
.then(function (response) {
self.variationOrders = response.data.order_variations;
})
.catch(function(error) {
//
});
},
formatVariations: function(variationOrders) {
var variationsString = '';
variationOrders.forEach(function(item) {
var variations = JSON.parse(item.variation);
for(var i = 0; i < variations.length; i++) {
variationsString = variationsString + variations[i].key + ': ' + variations[i].value + '<br />';
}
});
return variationsString;
},
},
computed: {
formattedColumns(){
const formattedVariations = this.formatVariations(this.variationOrders);
console.log(formattedVariations);
return this.columns.map(c => {
if (c.label == "Variations") {
return {label: "Variations", field: formattedVariations , html: true}
}
return c;
})
}
},
mounted: function() {
this.getTotals();
// call the API every 30 seconds to fetch new orders
setInterval(function () {
this.getTotals();
}.bind(this), 5000);
},
}
</script>
更新 2
formatVariations() 函数返回一个样本集，如下所示:
choose-your-cake: Naked<br />choose-sugar: Yes<br />choose-your-cake: Naked<br />choose-sugar: No<br />choose-your-cake: Naked<br />choose-sugar: No<br />choose-your-cake: Naked<br />choose-sugar: Yes<br />choose-your-cake: Naked<br />choose-sugar: Yes<br />choose-your-cake: Coated<br />choose-sugar: No<br />choose-your-cake: Naked<br />choose-sugar: Yes<br />choose-your-cake: Naked<br />choose-sugar: Yes<br />choose-your-cake: Coated<br />choose-sugar: Yes<br />choose-your-cake: Naked<br />choose-sugar: Yes<br />choose-your-cake: Naked<br />choose-sugar: Yes<br />choose-your-cake: Naked<br />choose-sugar: Yes<br />
更新 3
这是 API 返回的数组项之一:
:
customer_name
:
(...)
order_id
:
(...)
product_name
:
(...)
qty
:
(...)
store_id
:
(...)
variation
:
"[{"id": 35, "key": "choose-your-cake", "value": "Naked"}, {"id": 36, "key": "choose-sugar", "value": "Yes"}]"
最佳答案
self.variationOrders 在数据方法中未定义； self 仅在 getTotals 方法的范围内可用。
相反，使用 computed property格式化列。
computed:{
formattedColumns(){
const formattedVariations = this.formatVariations(this.variationOrders)
return this.columns.map(c => {
if (c.label === "Variations")
return {label: "Variations", field: formattedVariations , html: true}
return c
})
}
}
并在模板中使用计算属性。
<vue-good-table
title=""
:columns="formattedColumns"
:rows="variationOrders"
:paginate="true"
:lineNumbers="true"/>
只要 variationOrders 发生变化，就应该更新计算属性。
编辑
上面回答了被问到的问题，但实际上并没有呈现所需的表格(据我所知)。这是因为对 vue-good-table 的工作方式存在误解。
如果我没理解错的话，OP真正想要的是表格中单元格的内容用HTML格式化。为此，您只需使用作用域插槽 table-row。以下是模板的外观(本示例中的列已缩写)。
<vue-good-table
title=""
:columns="columns"
:rows="variationOrders"
:paginate="true"
:lineNumbers="true">
<template slot="table-row" scope="props">
<td>{{ props.row.order_id }}</td>
<td>{{ props.row.customer_name }}</td>
<td><span v-html="formatVariations(props.row.variation)"></span></td>
</template>
</vue-good-table>
我还更新了 formatVariations 方法:
formatVariations: function(variationOrders) {
let parsed = JSON.parse(variationOrders).map(order => {
return `${order.key} : ${order.value} <br>`
})
return parsed.join('');
},
这是假设数据格式如下所示:
[
{
order_id: 1,
customer_name: "Bob NewHart",
qty: 10,
product_name: "Hats",
variation: '[{"id": 35, "key": "choose-your-cake", "value": "Naked"}, {"id": 36, "key": "choose-sugar", "value": "Yes"}]'
},
{
order_id: 2,
customer_name: "Mary Lamb",
qty: 10,
product_name: "Necklaces",
variation: '[{"id": 35, "key": "choose-your-cake", "value": "Naked"}, {"id": 36, "key": "choose-sugar", "value": "Yes"}]'
},
]
关于javascript - 在传递给 Vue Good-Table 之前格式化列数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46709142/
27
4
0
这个问题在这里已经有了答案: What is the best way to parse html in C#? [closed] (15 个答案) 关闭 3 年前。 string input =
为什么 wrapper #4 没有继承其父表容器的高度？表格嵌套在一个显示 block 包装器中，每个嵌套的div是显示表格，每个表格继承到最里面的一个。是什么原因造成的，我该如何解决？ jsfidd
我正在使用带有 Bootstrap 的自定义 css 作为外边框。但顶部边框不可见，除非我将其大小设置为 2 px。 我该如何解决这个问题？ HTML #name 1.one 2.two 3.thr
我正在逻辑层面上设计一个数据库，以便稍后将其传递给程序员来交付。我只是粗略地了解它们的工作原理，所以我很难简洁地表达我的问题。这是我的问题: 我有一个名为 MEANINGS 的表。 我有一个名为 WO
在 Laravel 上，我们可以使用 DB::table('table')->get(); 或使用 model::('table')->all() 进行访问;我的问题是它们之间有什么区别？ 谢谢。 最
我试图从以下内容中抓取 URL从 WorldOMeter 获取 CoVid 数据，在此页面上存在一个表，id 为:main_table_countries_today其中包含我希望收集的 15x225
这是我的图表数据库:/image/CGAwh.png 我用 SEQUELIZE 制作了我的数据库模型: 型号:级别 module.exports = (sequelize, DataTypes) =>
我真的不明白为什么我的代码不能按预期工作。当我将鼠标悬停在表格的每一行上时，我想显示一个图像(来 self 之前加载的 JSON)。每个图像根据行的不同而不同，我想将它们显示在表格之外的另一个元素中。
假设我的数据库中有一张地铁 map ，其中每条线路的每个站点都是一行。如果我想知道我的线路在哪里互连: mysql> SELECT LineA.stop_id FROM LineA, LineB WH
我最近经常使用这些属性，尤其是 display: table-cell。它在现代浏览器中得到了很好的支持，并且它对某些网格有很多好处，并且可以非常轻松地对齐内容，而无需棘手的标记。但在过去的几天里，我
在 CSS 中，我可以这样做: http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png http://s1.ipicture.ru/uploads/20
问题作为标题，我正在学习sparkSQL，但我无法很好地理解它们之间的区别。谢谢。 最佳答案 spark.table之间没有区别& spark.read.table功能。 内部 spark.read.
我正在尝试根据 this answer 删除表上的非空约束.但是，它似乎没有在 sqlite_sequence 中创建条目。这样做之后，即使我可以在使用测试表时让它正常工作。 有趣的是，如果我备份我的
var otable = new sap.m.Table();//here table is created //here multiple header I'm trying to create t
下面两种方法有什么区别: 内存 性能 答: select table.id from table B: select a.id from table a 谢谢(抱歉，如果我的问题重复)。 最佳答案 完
我尝试在表格后添加点，方法是使用 table::after 选择器创建一个点元素并使用 margin: 5px auto 5px auto; 将其居中。它有效，但似乎在第一个表格列之后添加了点，而不是
我正在设计一个可以标记任何内容的数据库，我可能希望能够选择带有特定标记的所有内容。 我正在为以下两个选项而苦苦挣扎，希望得到一些建议。如果有更好的方法请告诉我。 选项A 多个“多对多”连接表。 tag
"center" div 中的下表元素导致 "left" div 中的内容从顶部偏移几个像素(在我的浏览器中为 8 ).在表格之前添加一些文本可消除此偏移量。 为什么？如何在不要求在我的表格前添加“虚
我是一名优秀的程序员,十分优秀！