vue重新获取表格

在使用Vue修改表格数据时，有时候我们需要重新获取表格数据，以便重新渲染表格。下面我们将详细介绍Vue重新获取表格的具体实现方法。

VUE获取远程接口数据并渲染到表格中，通常会使用axios进行接口请求，然后通过v-for指令渲染数据到表格中，代码示例如下：

  mounted() {
    this.$nextTick(() => {
      this.getData()
    })
  },methods: {
    async getData() {
      const res = await axios.get('/api/data')
      this.tableData = res.data.dataList
    }
  }

在这个示例中，我们使用了Vue的生命周期方法mounted()来获取远程接口数据，并使用this.tableData绑定表格数据。接下来，我们将介绍如何重新获取表格数据。

第一种方法是在页面中添加按钮，点击按钮时重新获取表格数据，代码如下：

  重新获取数据
  methods: {
    async getData() {
      const res = await axios.get('/api/data')
      this.tableData = res.data.dataList
    }
  }

以上代码中，我们为按钮添加@click事件，当按钮被点击时调用getData()方法重新获取表格数据。这个方法将使用axios重新请求接口数据，并重新绑定表格数据。

第二种方法是使用watch监听表格数据，当表格数据发生变化时重新获取数据并重新渲染表格，代码如下：

  watch: {
    tableData: {
      handler() {
        this.getData()
      },deep: true
    }
  },methods: {
    async getData() {
      const res = await axios.get('/api/data')
      this.tableData = res.data.dataList
    }
  }

以上代码中，我们使用watch监听tableData变量的变化。当tableData发生变化时，watch的handler函数将会重新调用getData()方法获取最新的表格数据，并更新tableData值。

总结：以上两种方法都可以重新获取表格数据，具体使用哪一种方法取决于实际情况。如果我们只需要重新获取数据，并不需要重新渲染表格，那么第一种方法是更加合适的。如果我们需要在表格数据发生变化时重新渲染表格，那么第二种方法则更为适用。