JavaWeb：前端工程化-ElementPlus

介绍

快速入门

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-select
          v-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-select
          v-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-picker
          v-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: ...ormInline.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();
})

import { reactive, onMounted, ref } from 'vue'

插槽