[英]Split table result by column value vue
Right now I can display data but they're all in one table. 现在我可以显示数据,但它们都在一个表中。
What I want somehow is that, every Code, there should be one table. 我想要的是,每个代码都应该有一个表。 like All code 1 should have in separate table, all code 2 in separate table and so on.. This is my code in displaying the table: 例如所有代码1应该在单独的表中,所有代码2应该在单独的表中,依此类推。这是我在显示表时的代码:
<template>
<div class="panel-con">
<ui-basic-table
ref="table"
:store="table.store"
:apiUrl="table.apiUrl"
:dataKey="table.dataKey"
:columns="table.columns"
:loadOnMount="true"
>
</ui-basic-table>
<template>
export default {
name: 'area-cost',
data() {
return {
}
},
computed:{
table(){
var table = {
apiUrl: this.$api.areacost.resource,
dataKey: this.$api.areacost.plural_key,
store:{
namespace:'AreaCost',
mutation:'set',
},
columns: [
{ name: 'area_id', label:'Code',width:40},
{ name: 'expected_cost', label: 'Target', width: 40 , format:'number' },
{ name: 'created_date',label:'Date',width:40, type:'text',format:'date'},
],
actions: [
{name: 'viewitem', label: '', icon: 'search', icon_color:
'primary',routelink:{}}
],
}
return table;
},
},
}
Is this possible in any way? 这有可能吗?
UPDATE 更新
<div class="panel-con">
<div v-for="(value, index) in areas" :key="index" >
{{ value.label }}
<ui-basic-table
ref="table"
:store="table.store" //tried :store="table.store[value.label]" or :store="table.store[index]"
:apiUrl="table.apiUrl"
:dataKey="table.dataKey"
:columns="table.columns"
:loadOnMount="true"
:searchparam="value.key"
>
</ui-basic-table>
<br/>
</div>
</div>
Sure. 当然。 Make a computed that returns a list of unique codes. 进行计算以返回唯一代码列表。 Make a separate store for each code. 为每个代码单独存储。 Then iterate like: 然后像这样迭代:
<template>
<div v-for="code in uniqueCodes" :key="code">
<div class="panel-con">
<ui-basic-table
ref="table"
:store="table.store[code]"
:apiUrl="table.apiUrl"
:dataKey="table.dataKey"
:columns="table.columns"
:loadOnMount="true"
>
</ui-basic-table>
</div>
</div
<template>
I made some assumptions about how your data and table work. 我对您的数据和表如何工作做了一些假设。 Even if this isn't quite right, I hope the idea is clear. 即使这不太正确,我也希望这个想法很明确。
Split your data by their codes into separate arrays, example: 通过它们的代码将数据拆分为单独的数组,例如:
new Vue({
el: "#app",
data: {
someData: [
{
code: 1,
name: 'test1'
},
{
code: 2,
name: 'test2'
},
{
code: 2,
name: 'test3'
},
{
code: 1,
name: 'test4'
},
{
code: 1,
name: 'test5'
},
{
code: 3,
name: 'test6'
}
]
},
computed: {
tables() {
let tabs = {};
this.someData.forEach((el, i) => (i = parseInt(el.code), tabs[i] ? tabs[i].push(el) : (tabs[i] = [el])));
return tabs;
}
}
})
https://jsfiddle.net/eywraw8t/24880/ https://jsfiddle.net/eywraw8t/24880/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.