here is the table of iview
< hr >< template >
<Table :columns="columns1" :data="data1"></Table> < / template >
< script >
export default {
data () {
return {
columns1: [
{
title: "Name",
key: "name"
},
{
title: "Age",
key: "age"
},
{
title: "Address",
key: "address"
}
],
data1: [
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
date: "2016-10-03"
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park",
date: "2016-10-01"
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park",
date: "2016-10-02"
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
date: "2016-10-04"
}
]
}
}
}< / script >
< hr > how does the key in the columns1 item above relate to the key in the data below
for example: the first key in columns1: "name" can be associated with the name:" John Brown" in the data below, and will be displayed in a column in table. I want to encapsulate a component similar to this table, which can achieve the simplest data presentation, but I don"t understand how the js of this component is implemented
=
wants to solve is (above)
the student name of the object passed in cannot correspond to the gray header (student name)
the effect above is directly misplaced
how to make it the same as the table of iview, no matter what order the objects are passed in the background, they can correspond to each other in table