el-table表格数据通过js动态生成

可以通过以下步骤动态生成 el-table 表格数据：

1. 创建表格数据对象数组

var tableData = [
  { name: 'John', age: 22, gender: 'Male' },
  { name: 'Jane', age: 26, gender: 'Female' },
  { name: 'Bob', age: 30, gender: 'Male' }
];

2. 定义表格列属性

var tableColumns = [
  { prop: 'name', label: 'Name' },
  { prop: 'age', label: 'Age' },
  { prop: 'gender', label: 'Gender' }
];

3. 在 HTML 中添加 el-table 标签并绑定数据和列属性

<el-table :data="tableData" :columns="tableColumns"></el-table>

4. 在 Vue 实例中声明数据和列属性

new Vue({
  el: '#app',
  data: {
    tableData: tableData,
    tableColumns: tableColumns
  }
})

5. 可以通过 JavaScript 动态修改表格数据

// 添加一行数据
tableData.push({ name: 'Tom', age: 28, gender: 'Male' });

// 删除第一行数据
tableData.splice(0, 1);

// 修改第二行数据的姓名
tableData[1].name = 'Mary';