vue3最基础的数据加载,表格,table 电脑版发表于:2022/6/29 16:15 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> ```