Element UI(简称 EL UI)是一个基于 Vue.js 的桌面端组件库,非常适合快速构建企业级应用的前端界面。下面我会为你展示如何使用 Element UI 创建一个简单的增删改查功能的前端页面。
首先确保你的项目中已经安装了 Element UI 和 Vue.js。如果没有安装,你可以通过 npm 或 yarn 安装它们:
npm install element-ui --save
1. HTML 结构
我们需要创建一个简单的 HTML 页面,并引入 Vue.js 和 Element UI 的 CSS 和 JS 文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Employee Commission Management</title>
<link rel="stylesheet" href="path/to/element-ui/css/index.css">
</head>
<body>
<div id="app">
<el-button type="primary" @click="showAddModal">添加员工提成</el-button>
<el-table :data="employeeCommissions" style="width: 100%">
<el-table-column prop="id" label="ID" width="180"></el-table-column>
<el-table-column prop="jobLevel" label="职级" width="180"></el-table-column>
<el-table-column prop="operatorName" label="运营姓名" width="180"></el-table-column>
<el-table-column prop="actualTurnover" label="实际流水" width="180"></el-table-column>
<el-table-column prop="performanceTurnover" label="业绩流水" width="180"></el-table-column>
<el-table-column prop="validTurnover" label="有效流水" width="180"></el-table-column>
<el-table-column prop="actualProfit" label="实际毛利" width="180"></el-table-column>
<el-table-column prop="performanceProfit" label="业绩毛利" width="180"></el-table-column>
<el-table-column prop="commission" label="提成" width="180"></el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加员工提成的模态框 -->
<el-dialog title="添加员工提成" :visible.sync="addVisible" width="50%">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="职级">
<el-input v-model="form.jobLevel"></el-input>
</el-form-item>
<el-form-item label="运营姓名">
<el-input v-model="form.operatorName"></el-input>
</el-form-item>
<el-form-item label="实际流水">
<el-input v-model.number="form.actualTurnover"></el-input>
</el-form-item>
<el-form-item label="业绩流水">
<el-input v-model.number="form.performanceTurnover"></el-input>
</el-form-item>
<el-form-item label="有效流水">
<el-input v-model.number="form.validTurnover"></el-input>
</el-form-item>
<el-form-item label="实际毛利">
<el-input v-model.number="form.actualProfit"></el-input>
</el-form-item>
<el-form-item label="业绩毛利">
<el-input v-model.number="form.performanceProfit"></el-input>
</el-form-item>
<el-form-item label="提成">
<el-input v-model.number="form.commission"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addVisible = false">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</span>
</el-dialog>
</div>
<script src="path/to/vue.js"></script>
<script src="path/to/element-ui/js/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
employeeCommissions: [], // 员工提成列表
addVisible: false, // 添加模态框的可见性
form: {}, // 表单数据
};
},
created() {
this.fetchData(); // 加载数据
},
methods: {
fetchData() {
// 使用 AJAX 请求获取数据
axios.get('/api/employee-commissions')
.then(response => {
this.employeeCommissions = response.data;
})
.catch(error => console.error(error));
},
showAddModal() {
this.addVisible = true;
},
handleSubmit() {
// 发送 POST 请求添加新数据
axios.post('/api/employee-commissions', this.form)
.then(() => {
this.addVisible = false;
this.fetchData(); // 刷新数据
})
.catch(error => console.error(error));
},
handleEdit(index, row) {
// 编辑功能,这里可以弹出编辑模态框
console.log(index, row);
},
handleDelete(index, row) {
// 删除功能
axios.delete(`/api/employee-commissions/${row.id}`)
.then(() => {
this.fetchData(); // 刷新数据
})
.catch(error => console.error(error));
}
}
});
</script>
</body>
</html>
注意事项
- 在上面的示例中,我们假设你已经有了一个运行中的后端 API,其中
/api/employee-commissions
是获取所有员工提成数据的 GET 请求路径,而/api/employee-commissions
也是用于添加新记录的 POST 请求路径,以及/api/employee-commissions/:id
用于删除记录的 DELETE 请求路径。 - 上面的代码使用了
axios
来处理 HTTP 请求,你需要在项目中安装axios
:npm install axios --save
总结
以上就是一个基本的使用 Element UI 创建的增删改查页面。你可以根据自己的需求调整样式和逻辑。如果你有其他特定的需求或遇到问题,请告诉我,我会帮助你解决。