vue中vxe-table表格填报及数据显现代码

以下是在 Vue 中使用 `vxe-table` 插件进行表格填报和数据显示的代码示例：

1. 安装 `vxe-table` 插件

npm install vxe-table --save

2. 在 Vue 中引入和注册 `vxe-table` 插件

import Vue from 'vue'
import 'vxe-table/lib/style.css'
import VXETable from 'vxe-table'
Vue.use(VXETable)

3. 在 Vue 组件中使用 `vxe-table` 插件

<template>
  <vxe-table :data="tableData">
    <vxe-table-column field="name" title="姓名"></vxe-table-column>
    <vxe-table-column field="age" title="年龄"></vxe-table-column>
    <vxe-table-column field="gender" title="性别"></vxe-table-column>
  </vxe-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' }
      ]
    }
  }
}
</script>

通过以上示例代码，你可以在 Vue 中使用 `vxe-table` 插件进行表格填报和数据显示。你可以根据自己的需要调整表格的列数、列宽、数据等属性。