Elment Plus + Vue3 js table with dynamic table columns , input box inside the table - dynamic

Question

the actual display of the table
Got problems with data-binding under such circumstance. Input boxes from the whole row seems to be recognizede as one.
<h2>Vue3 + Element plus Dyanamic table</h2>
<el-table :data="tableData" style="width: 100%">
<el-table-column
:prop="index"
:label="item"
v-for="(item, index) in tableHeader"
:key="index"
>
<template v-slot="scope">
<el-input :name="item" v-model="scope.row.index"></el-input>
</template>
</el-table-column>
</el-table>
data() {
return {
tableHeader: {
1: "Name",
2: "Birthday",
3: "Address",
4: "Age",
5: "Tel",
},
tableData: [{
1:'',
2:'',
3:'',
4:'',
5:'',
}, {
1:'',
2:'',
3:'',
4:'',
5:'',
}]
I'm trying to load the table header(namely the number of the columns and each column's name) from back-end data. Input boxes is the main feature in this table. And i want to store the data fram input boxes into tableData and then send it back to back-end.How could i fix this?

Answer 1

Here is an example of a very basic Element+ Table from the Docs.
The way you are trying to bind props to index does not make sense to me.
<template>
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
</template>
<script lang="ts" setup>
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>