[TOC] ### 代码如下，创建页面的时候方便复制 ``` <template> <div class="app-container"> <el-card> <div> {{ state.title }} </div> <div> <el-select v-model="state.schoolID" class="select-level" size="default" placeholder="请选择校区" clearable> <el-option v-for="item in schoolList" :key="item.id" :value="item.id" :label="item.name" /> </el-select> </div> </el-card> </div> </template> <script setup lang="ts" name="tasks"> import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue'; const state = reactive({ title: '更新', schoolID:null, schoolList: [ { id: 1, name: "小" }, { id: 2, name: "大" } ], }) // 这样暴露出来后页面可以直接使用schoolList,而不需要state.schoolList const { schoolList } = toRefs(state) // 表格数据 const tableData = ref<any[]>([]); const loading = ref(false); const pageIndex = ref(1); // 详情弹窗 const dialogVisible = ref(false); const detailLoading = ref(false); const detail = ref<any>({}); onMounted(() => { pageIndex.value = 1; }) </script> <style scoped="scoped" lang="scss"> .app-container { padding: 15px } </style> ``` ### 更丰富一点的模板可以参考这个 里边包括弹窗以及暴露方法出去，父组件调用，也是一个格子报表统计的模板，基础的请求，变量的定义等 https://www.tnblog.net/xiuxin3/article/details/8631