极客观点
项目管理
HarmonyOS
问题
iview更新到最新版rc18后，表格绑定数据出现 Avoid using non-primitive value as key, use string/number value instead 问题
代码
<i-table stripe
border
v-bind:height="750"
v-bind:data="tableData"
v-bind:columns="tableColumns"
v-on:on-row-dblclick="showDetail"
v-on:on-selection-change="changeSelection"></i-table>var app = new Vue({
data: {
showSupplierModal: false,
distributeId: 0,
tableData: [],
tableColumns: [
{ type: 'selection', width: 40, align: 'center' },
{ type: 'index', width: 40, align: 'center' },
{ title: '订单号', key: 'Tid', width: 180 },
{
title: '商品信息',
key: 'ProductInfo',
width: 500,
render: function (h, params) {
var hArray = [];
params.row.Details.forEach(function (n) {
hArray.push(
h('p', {
style: {
color: '#DC143C'
}
}, `${n.SpecSku}：${n.SkuName} (${n.ProductNum})`)
);
});
return h('div', hArray);
}
},
{ title: '供销商', key: 'SupplierName', width: 150 },
{
title: '订单金额',
key: 'Payment',
width: 150,
renderHeader: function (column, index) {
return `<span>${column.title}</span>
<span class ="ivu-table-sort">
<i class ="ivu-icon ivu-icon-arrow-up-b" onclick="app.sortOrder('${column.key}','asc')"></i>
<i class ="ivu-icon ivu-icon-arrow-down-b" onclick="app.sortOrder('${column.key}','desc')"></i>
</span>`;
}
},
{
title: '运费',
key: 'PostFee',
width: 100,
renderHeader: function (column, index) {
return `<span>${column.title}</span>
<span class ="ivu-table-sort">
<i class ="ivu-icon ivu-icon-arrow-up-b" onclick="app.sortOrder('${column.key}','asc')"></i>
<i class ="ivu-icon ivu-icon-arrow-down-b" onclick="app.sortOrder('${column.key}','desc')"></i>
</span>`;
}
},
{
title: '付款日期',
key: 'PayTime',
width: 150,
renderHeader: function (column, index) {
return `<span>${column.title}</span>
<span class ="ivu-table-sort">
<i class ="ivu-icon ivu-icon-arrow-up-b" onclick="app.sortOrder('${column.key}','asc')"></i>
<i class ="ivu-icon ivu-icon-arrow-down-b" onclick="app.sortOrder('${column.key}','desc')"></i>
</span>`;
}
},
{
title: '买家信息',
key: 'ReceiverNick',
width: 150,
render: function (h, params) {
return h('div',
[
h('p',
{
style: {
color: '#0070ff'
}
},
params.row.ReceiverNick),
h('p', params.row.StoreName)
]);
}
},
{ title: '快递',key: 'LogisticsCompany',width: 150 },
{
title: '收货信息',
key: 'ReceiverName',
width: 300,
render: function (h, params) {
return h('div',
[
h('p',
{
style: {
color: '#0070ff'
}
}, params.row.ReceiverName),
h('p', params.row.ReceiverFullAddress)
]);
}
},
{ title: '买家留言', key: 'BuyerMemo',width:200 },
{ title: '卖家备注', key: 'SellerMemo', width: 200 }
],
query: {},
page: {
Page: 1,
Rows: 20,
total: 0,
Sort: "Id",
Order: "desc"
}
},
methods: {
changeSelection: function (selection) {
this.selectItems = selection;
},
showDetail:function(item) {
var url = "@Url.Action("OrderView", "Order")/" + item.Tid;
SanPoss.AddTab("订单：" + item.Tid, url);
},
search: function(item) {
this.query = item;
this.page.Page = 1;
this.changePage(1);
},
sortOrder: function (key,type) {
this.page.Sort = key;
this.page.Order = type;
this.changePage(this.page.Page);
},
changePage: function(page) {
var url = "@Url.Action("GetOrderList", "Order", new {Status = StatusEnum.待采购订单})";
this.page.Page = page;
this.$Loading.start();
this.selectItems = [];
var _this = this;
axios.post(url, { "search": this.query, "cmd": this.page }).then(function (rsp) {
if (rsp.data) {
_this.tableData = rsp.data.rows;
_this.page.total = rsp.data.total;
_this.$Loading.finish();
} else {
_this.$Modal.error({ title: '提醒', content: rsp.data.Message });
_this.$Loading.error();
}
}).catch(function(rsp) {
_this.$Loading.error();
console.log(rsp);
});
},
changePageSize: function(pageSize) {
this.page.Rows = pageSize;
this.changePage(this.page.Page);
},
showSupplierSelect:function() {
if (!this.selectItems.length) {
this.$Modal.info({ title: "提醒", content: "请选择数据" });
return;
}
this.distributeId = this.selectItems[0].ClientId;
this.showSupplierModal = true;
},
selectSupplier: function (item) {
console.log(item);
}
},
created: function() {
this.changePage(1);
}
}).$mount("#divOrderPurchases");[
{
"Id": 1299,
"ClientId": 78,
"Tid": "58728486439",
"Payment": 130.4,
"CodPayment": 0,
"CodFee": 0,
"Iscod": false,
"RetainPayment": 130,
"ProductMoney": 247,
"ProductNum": 2,
"PostFee": 0,
"CreatedTime": "2017-06-18 10:31:43",
"PayTime": "2017-06-18 10:32:06",
"ModifiedTime": "2017-06-18 10:32:15",
"EndTime": "1970-01-01 00:00:00",
"AuditTime": null,
"DeliveryTime": null,
"BuyerMemo": "",
"SellerMemo": "",
"ReceiverName": "李刚",
"ReceiverState": "四川",
"ReceiverNick": "",
"ReceiverCity": "成都市",
"ReceiverDistrict": "郫县",
"ReceiverAddress": "四川成都市郫县犀浦镇围城南路300号(两江鱼府)",
"ReceiverFullAddress": "四川 成都市 郫县 四川成都市郫县犀浦镇围城南路300号(两江鱼府)",
"ReceiverZip": "",
"ReceiverMobile": "13880426950",
"ReceiverPhone": "13880426950",
"OrderState": 0,
"OrderStateName": "待审核",
"PlatformState": 3,
"OriginalPlatformState": "WAIT_SELLER_STOCK_OUT",
"StoreName": "巴布豆橙叶专卖店",
"StoreId": 5,
"PlatformId": 5,
"OrderType": 1,
"PayStatus": 1,
"OrderRemarks": null,
"WarehouseId": 25,
"WarehouseName": "泉州发货仓",
"LogisticsCompanyId": 86,
"LogisticsCompany": "百世汇通",
"LogisticsNo": "",
"DeliveryAddressId": 0,
"UnusualRemark": "匹配不到商品,匹配不到商品",
"UnusualStatus": 0,
"StockStatus": 1,
"SplitedOrderNum": 0,
"IsSplit": false,
"DeliveryOrderNum": 0,
"MergeOrderNum": 0,
"IsMerge": false,
"RemainProductNum": 2,
"IsSuspend": false,
"IsShuadan": false,
"IsOnline": true,
"AfterSaleNum": 0,
"IsCanEdit": true,
"SkuNum": 0,
"RelatonId": null,
"IsPurchases": true,
"SupplierId": 0,
"SupplierName": "",
"SkuInfo": null,
"Details": [
{
"Id": 1419,
"ClientId": 78,
"Oid": "",
"Tid": "58728486439",
"ProductNum": 1,
"PlatformProductNum": 1,
"RemainProductNum": 1,
"ModifyProductNum": 1,
"SpecId": 0,
"ProductId": 0,
"SpecSku": "BW92301780228",
"ProductSku": "10204447207",
"ProductName": "",
"SkuName": null,
"Status": 0,
"StatusName": "正常",
"ProductUnitPrice": 89,
"ProductTotalPrice": 89,
"Source": 1,
"IsGift": 0,
"GiftName": "",
"IsStockout": 1,
"StockoutName": "有货",
"AfterSaleNum": 0,
"IsCanDelete": false,
"IsCanAfterSale": true,
"Stock": 0,
"SysUnitPrice": 0,
"SysTotalPrice": 0,
"Payment": 0,
"ImgUrl": null,
"Owner": 1,
"MatchFailure": true,
"MatchResult": null
},
{
"Id": 1420,
"ClientId": 78,
"Oid": "",
"Tid": "58728486439",
"ProductNum": 1,
"PlatformProductNum": 1,
"RemainProductNum": 1,
"ModifyProductNum": 1,
"SpecId": 0,
"ProductId": 0,
"SpecSku": "CY92303530335",
"ProductSku": "1499313967",
"ProductName": "",
"SkuName": null,
"Status": 0,
"StatusName": "正常",
"ProductUnitPrice": 158,
"ProductTotalPrice": 158,
"Source": 1,
"IsGift": 0,
"GiftName": "",
"IsStockout": 1,
"StockoutName": "有货",
"AfterSaleNum": 0,
"IsCanDelete": false,
"IsCanAfterSale": true,
"Stock": 0,
"SysUnitPrice": 0,
"SysTotalPrice": 0,
"Payment": 0,
"ImgUrl": null,
"Owner": 1,
"MatchFailure": true,
"MatchResult": null
},
{
"Id": 770680556,
"ClientId": 78,
"Oid": "",
"Tid": "58728486439",
"ProductNum": 1,
"PlatformProductNum": 1,
"RemainProductNum": 1,
"ModifyProductNum": 1,
"SpecId": 0,
"ProductId": 0,
"SpecSku": "BW92301780228",
"ProductSku": "10204447207",
"ProductName": "巴布豆童鞋 女童凉鞋夏款时尚蝴蝶结公主鞋儿童凉鞋女 粉色 28码/内长17.5cm",
"SkuName": "粉色-28码/内长17.5cm",
"Status": 0,
"StatusName": "正常",
"ProductUnitPrice": 89,
"ProductTotalPrice": 89,
"Source": 1,
"IsGift": 0,
"GiftName": "",
"IsStockout": 1,
"StockoutName": "有货",
"AfterSaleNum": 0,
"IsCanDelete": false,
"IsCanAfterSale": true,
"Stock": 0,
"SysUnitPrice": 0,
"SysTotalPrice": 0,
"Payment": 0,
"ImgUrl": "",
"Owner": 1,
"MatchFailure": true,
"MatchResult": null
},
{
"Id": 770680557,
"ClientId": 78,
"Oid": "",
"Tid": "58728486439",
"ProductNum": 1,
"PlatformProductNum": 1,
"RemainProductNum": 1,
"ModifyProductNum": 1,
"SpecId": 0,
"ProductId": 0,
"SpecSku": "CY92303530335",
"ProductSku": "1499313967",
"ProductName": "巴布豆童鞋 男童凉鞋2017新款潮夏儿童凉鞋男中大童沙滩鞋女 353荧光绿 35码内长22.5cm",
"SkuName": "353荧光绿-35码内长22.5cm",
"Status": 0,
"StatusName": "正常",
"ProductUnitPrice": 158,
"ProductTotalPrice": 158,
"Source": 1,
"IsGift": 0,
"GiftName": "",
"IsStockout": 1,
"StockoutName": "有货",
"AfterSaleNum": 0,
"IsCanDelete": false,
"IsCanAfterSale": true,
"Stock": 0,
"SysUnitPrice": 0,
"SysTotalPrice": 0,
"Payment": 0,
"ImgUrl": "",
"Owner": 1,
"MatchFailure": true,
"MatchResult": null
}
],
"Logs": []
}
]
我的npm update iview --save 就好了，更新到2.0.0-rc.19