Element前端黑马案例

App.vue

<!-- 定义js控制模板数据与行为 -->
<script setup>
import ApiDemo from './views/ApiDemo.vue'
</script><!-- 模板控制页面结构html -->
<template><ApiDemo></ApiDemo>
</template><!-- 当前组件css -->
<style scoped></style>

ApiDemo.vue<script setup>
//引入ref函数
import { ref,onMounted } from 'vue';
//创建一个响应式数据const count = ref(0);
//声明函数
function increment() {count.value++;
} //钩子函数
onMounted(() => {console.log("vue mounted...");})</script><template><button @click="increment">Count: {{ count }}</button></template><style scoped>
</style>

App.vue

<!-- 定义js控制模板数据与行为 -->
<script setup>
import EmpList from './views/EmpList.vue';
</script><!-- 模板控制页面结构html -->
<template><EmpList></EmpList>
</template><!-- 当前组件css -->
<style scoped></style>

EmpList.vue

<script setup>
//引入
import { ref } from "vue";
import axios from 'axios';
//声明相应数据
const name = ref(''); 
const gender = ref('');
const job = ref('');//声明函数
const userList = ref([]);
const search = async () => {//发送请求axios服务器加载数据const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${name.value}&gender=${gender.value}&job=${job.value}`);userList.value = result.data.data;
}
</script><template><div id="center">姓名: <input type="text" name="name" v-model="name">性别:<select name="gender" v-model="gender"><option value="1">男</option><option value="2">女</option></select>职位:<select name="job" v-model="job"><option value="1">班主任</option><option value="2">讲师</option><option value="3">其他</option></select><input class="btn" type="button" value="查询" @click="search"></div><table><tr><th>序号</th><th>姓名</th><th>头像</th><th>性别</th><th>职位</th><th>入职时间</th><th>更新时间</th></tr><!-- v-for 用于列表循环渲染元素 --><tr v-for="(user, index) in userList" :key="user.id"><td>{{index + 1}}</td><td>{{user.name}}</td><td> <img :src="user.image"> </td><td><span v-if="user.gender == 1">男</span><span v-else-if="user.gender == 2">女</span><span v-else>其他</span></td><td><span v-if="user.job == 1">班主任</span><span v-else-if="user.job == 2">讲师</span><span v-else-if="user.job == 3">学工主管</span><span v-else-if="user.job == 4">教研主管</span><span v-else-if="user.job == 5">咨询师</span><span v-else>其他</span></td><td>{{user.entrydate}}</td><td>{{user.updatetime}}</td></tr></table>
</template><style scoped>table,th,td {border: 1px solid #000;border-collapse: collapse;line-height: 50px;text-align: center;}#center,table {width: 60%;margin: auto;}#center {margin-bottom: 20px;}img {width: 50px;}input,select {width: 17%;padding: 10px;margin-right: 30px;border: 1px solid #ccc;border-radius: 4px;}.btn {background-color: #ccc;}
</style>

案例：

<script setup >
import { reactive } from 'vue';
import axios from 'axios';
import { ref } from 'vue';     const emp = reactive({name:'',gender:'',job:''})   const empList =  ref([{id: "1",name: "王小明",image:"C:\\Users\\zhaoming\\Desktop\\remain\\6c5f9df23a87e9504f50d84d56385343fbf2b429.jpg",gender: "1",job: "1",entrydate: "2016-05-02",update: "2016-05-02",},{id: "2",name: "廊开",image:"C:\\Users\\zhaoming\\Desktop\\remain\\6c5f9df23a87e9504f50d84d56385343fbf2b429.jpg",gender: "1",job: "2",entrydate: "2016-05-02",update: "2016-05-02",},
])
const Search = async () => {const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${emp.name}&gender=${emp.gender}&job=${emp.job}`)empList.value = result.data.data
}
const Clear = () => {emp.name = ''emp.gender = ''emp.job = ''Search()
}</script><template><div class="form-table-container"><el-form :model="emp"  label-position="top" style="max-width: 600px" ><el-row gutter="20" justify="flex-start" align="top"><el-col :span="6"><el-form-item label="姓名"><el-input v-model="emp.name" /></el-form-item></el-col><!-- // 活动区域 --><el-col :span="6"><el-form-item label="性别"><el-select v-model="emp.gender" placeholder="请选择"><el-option label="男" value="0" /><el-option label="女" value="1" /></el-select></el-form-item></el-col><!-- <el-col :span="6"><el-form-item label="出生日期"><el-date-pickerv-model="emp.value.job"type="date"placeholder="请选择"style="width: 100%"/></el-form-item></el-col> --><el-col :span="6"><el-form-item style="margin-top: 30px;"><el-space><el-button type="primary" @click="Search" >查询</el-button><el-button type="primary" @click="Clear">清空</el-button></el-space></el-form-item></el-col></el-row></el-form><el-table :data="empList" border style="width: 100%"><el-table-column prop="id" label="ID" width="60" align="center" /><el-table-column prop="name" label="姓名" width="80" align="center" /><el-table-column prop="image" label="头像" width="180" align="center" ><template #default="scope"><img :src="scope.row.image" style="width: 80px; height: auto;" /></template></el-table-column><el-table-column prop="gender" label="性别" width="60" align="center" /><el-table-column prop="job" label="职位" width="80" align="center"/><el-table-column prop="entrydate" label="入职日期" width="180" align="center"/><el-table-column prop="update" label="更新日期" width="180" align="center"/></el-table></div>
</template><style scoped>.el-form-item {margin-right: 20px; /* 调整表单项之间的间距 */
}.el-table {width: 100%;margin: 0 auto; /* 居中表格 */
}</style>