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

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>

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. 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>