使用vxe-table实现一个从后端拿到数据并显示到表格中的vue代码

以下是一个简单的使用vxe-table插件的vue代码示例，可以实现从后端获取数据并在表格中显示：

<template>
  <div>
    <vxe-table :data="tableData" :columns="columns"></vxe-table>
  </div>
</template>

<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

Vue.use(VXETable)

export default {
  data () {
    return {
      tableData: [],
      columns: [
        {
          title: 'ID',
          key: 'id'
        },
        {
          title: '名称',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age'
        },
        {
          title: '性别',
          key: 'gender'
        }
      ]
    }
  },
  created () {
    // 从后端获取数据
    this.getTableData()
  },
  methods: {
    async getTableData () {
      try {
        const response = await this.$axios.get('/api/data') // 假设后端接口地址为/api/data
        this.tableData = response.data
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

以上代码中，我们使用了vxe-table插件来渲染表格，并使用了axios库来从后端获取数据。在created生命周期中调用了getTableData方法来获取数据并更新表格。注意，这里的接口地址仅作示例，实际应根据实际情况修改。