vue3最基础的数据加载，表格,table

vue3表格加载一点静态数据

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="Date" prop="date"  width="180" />
    <el-table-column label="Name" prop="name"  width="180" />
    <el-table-column label="Address" prop="address"  />
  </el-table>
</template>
<script>
export default defineComponent({
    name: 'dynamicTable',
    setup() {
      const state = reactive({
        tableData: [
                    {
                      date: '2016-05-03',
                      name: 'Tom',
                      address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                      date: '2016-05-02',
                      name: 'Tom',
                      address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                      date: '2016-05-04',
                      name: 'Tom',
                      address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                      date: '2016-05-01',
                      name: 'Tom',
                      address: 'No. 189, Grove St, Los Angeles',
                    },
                  ]
      })
      onMounted(() => {
      })
      return {
        ...toRefs(state)
      }
    },
  })
</script>

数据从后台读取的

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="Id" prop="id"  width="180" />
    <el-table-column label="宗地位置" prop="landName"  width="180" />
    <el-table-column label="地块位置" prop="areaposition"  />
  </el-table>
</template>
<script>
import { getList } from '@/api/landInfo'
export default defineComponent({
    name: 'dynamicTable',
    setup() {
      const state = reactive({
        tableData: []
      })
      const fetchData = async () => {
        const result = await getList()
        state.tableData = result.data
      }
      const queryData = () => {
        fetchData()
      }
      onMounted(() => {
        fetchData()
      })
      return {
        ...toRefs(state),
        queryData,
      }
    },
  })
</script>