el-table中数据的动态加载

<template>
  <div>
    <el-button @click="hahahah">转换数据</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        v-for="(item, index) in propsArray"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      >
        <template slot-scope="scope">
          {{ scope.row[item.prop] }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

  <script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      propsArray: [
        {
          prop: "date",
          label: "日期",
        },
        {
          prop: "name",
          label: "姓名",
        },
        {
          prop: "address",
          label: "地址",
        },
      ],
      list: [
        {
          iphone: "苹果",
          price: "8999",
          color: "红色",
        },
        {
          iphone: "华为",
          price: "8999",
          color: "绿色",
        },
        {
          iphone: "oppop",
          price: "3000",
          color: "金色",
        },
        {
          iphone: "vivo",
          price: "2300",
          color: "蓝色",
        },
      ],
      listArray: [
        {
          prop: "iphone",
          label: "品牌",
        },
        {
          prop: "price",
          label: "价格",
        },
        {
          prop: "color",
          label: "颜色",
        },
      ],
    };
  },
  methods: {
    hahahah() {
      this.tableData = [];
      this.propsArray = [];
      this.propsArray = this.listArray;
      this.tableData = this.list;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

效果：

点击“转换按钮”之后，数据变化