当前位置：首页 > news >正文

JavaWeb：前端工程化-ElementPlus

news 来源：原创 2025/6/6 17:41:13

介绍

在这里插入图片描述

快速入门

npm install element-plus --save
在这里插入图片描述
main.js


```javascript
import { createApp } from 'vue'
import App from './App.vue'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

常见组件

表格

在这里插入图片描述

分页条

在这里插入图片描述

对话框

在这里插入图片描述

表单

在这里插入图片描述

案例：用户信息管理

在这里插入图片描述
1.进入D:\front\vue\ 执行cmd，初始化工程
npm init vue@latest

2.Vscode 打开

3.安装axios,element
npm install axios
npm install element-plus --save

4.创建views/EmpList.vue

<script setup>
</script><template></template><style scoped>
</style>

4.拷贝行内表单template、script，App.vue导入
main.ts注释样式

import App from './App.vue'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

<script setup lang="ts">
import EmpList from './views/EmpList.vue'
</script><template><emp-list />
</template><style scoped></style>

<script setup lang="ts">
</script><template><h1>EmpList...</h1>
</template><style scoped></style>

5.npm run dev

搜索框

<script setup lang="ts">
import { reactive } from 'vue'const formInline = reactive({id: '',name: '',image: '',gender: '',job: '',entrydate: '',updatetime: ''
})const search = () => {console.log('search!')
}
const clean = () => {console.log('clean!')
}
</script><template><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="formInline.name" placeholder="请输入姓名" clearable /></el-form-item><el-form-item label="性别"><el-selectv-model="formInline.gender"placeholder="请选择"clearable><el-option label="男" value="1" /><el-option label="女" value="2" /></el-select></el-form-item><el-form-item label="职位"><el-selectv-model="formInline.job"placeholder="请选择"clearable><el-option label="班主任" value="1" /><el-option label="讲师" value="2" /><el-option label="其它" value="3" /></el-select></el-form-item><el-form-item label="入职日期"><el-date-pickerv-model="formInline.entrydate"type="date"placeholder="请选择日期"clearable/></el-form-item><el-form-item><el-button type="primary" @click="search">查询</el-button><el-button type="primary" @click="clean">清空</el-button></el-form-item></el-form>
</template><style scoped>
.demo-form-inline .el-input {--el-input-width: 220px;
}.demo-form-inline .el-select {--el-select-width: 220px;
}
</style>

表格

Access to XMLHttpRequest at ‘https://web-server.itheima.net/emps/list?name= $KaTeX parse error: Expected 'EOF', got '&' at position 18: \dotsormInline.name}&̲gender=$ {formInline.gender}&job=${formInline.job}’ from origin ‘http://localhost:5173’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

跨域问题
vite.config.ts

server  : {proxy  : {'/api' : {target      : 'https://web-server.itheima.net',changeOrigin: true,rewrite     : (path) => path.replace(/^\/api/, ''),},},}

api就是https://web-server.itheima.net

    <!-- 表格 --><el-table :data="tableData" style="width: 100%"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="姓名" width="180" /><el-table-column prop="image" label="头像" width="180" /><el-table-column prop="gender" label="性别" width="180" /><el-table-column prop="job" label="职业" width="180" /><el-table-column prop="entrydate" label="入职日期" width="180" /><el-table-column prop="updatetime" label="更新时间" /></el-table>

/* 表格数据 */
// const tableData = [
//   {
//     id: 1,
//     name: '谢逊',
//     image: '',
//     gender: '1',
//     job: '1',
//     entrydate: '2025-05-29',
//     updatetime: '2025-05-29 12:00:00'
//   }
// ]
const tableData = ref([])
const search = () => {console.log('search!')axios.get('https://web-server.itheima.net/emps/list?name=' + formInline.name).then(res => {console.log(res.data.data)tableData.value = res.data.data}) 
}
// 钩子函数，通过axios获取数据
onMounted(() => {search();
})