elementui动态添加表格

在使用Element UI时，可以通过Vue的响应式特性来动态添加表格行。以下是一个简单的例子，展示了如何动态添加表格行：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
  <el-button @click="addRow">添加行</el-button>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        // ...可以添加更多行
      ]
    }
  },
  methods: {
    addRow() {
      const newRow = {
        date: '新日期',
        name: '新姓名',
        address: '新地址'
      };
      this.tableData.push(newRow);
    }
  }
}
</script>

在这个例子中，我们定义了一个tableData数组来存储表格的数据。el-table组件的:data属性绑定到了tableData上，以便表格能够显示其中的数据。

addRow方法通过push方法将一个新的对象添加到tableData数组中，Vue将自动响应这个变化，并更新表格来显示新的数据行。点击按钮时，addRow方法被触发，从而添加新行。