用el ui 生成前端页面的增删改查

于 2024-07-31 16:06:46 发布
阅读量504 收藏 10
点赞数 5
文章标签： ui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33240556/article/details/140825574
版权

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 创建的增删改查页面。你可以根据自己的需求调整样式和逻辑。如果你有其他特定的需求或遇到问题，请告诉我，我会帮助你解决。

用心去追梦
关注
  • 5
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
博客
在Java中实现发送短信的功能 通过第三方服务提供商（Alibaba Cloud, Tencent Cloud）
09-06 176
是的，通过第三方服务提供商实现短信发送功能是一种常见的方式。以下是使用阿里云（Alibaba Cloud）的短信服务SDK来发送短信的一个简单示例。你需要先注册阿里云账号，并在阿里云控制台上创建一个短信签名和模板，获取AccessKey ID和AccessKey Secret，以便能够调用其短信服务API。请确保在实际部署之前已经正确配置了阿里云账号，并且遵循所有相关的法律和条款。此外，不同的国家和地区可能有关于短信发送的不同规定，请确保你的操作符合当地法律法规。首先，你需要在项目中引入阿里云的SDK。
博客
Spring Cloud Alibaba中，如何使用Nacos实现服务的动态权重调整？
09-06 188
在Spring Cloud Alibaba中，使用Nacos实现服务的动态权重调整主要是指在服务发现阶段，根据一定的规则调整服务实例的权重，从而影响负载均衡策略。这有助于在不重启服务的情况下，动态调整各个服务实例的流量分配，以应对不同的业务需求和负载情况。
博客
Spring Cloud Alibaba中如何实现服务的弹性伸缩？
09-06 691
在Spring Cloud Alibaba中实现服务的弹性伸缩，需要结合使用多种技术和工具。Kubernetes是实现这一目标的首选平台，因为它提供了完整的自动化运维能力。同时，Nacos、Sentinel等组件也可以在服务发现、流量控制等方面发挥作用。最终，选择何种方案取决于你的具体需求、预算以及现有的基础设施。
博客
Spring Cloud Alibaba环境中，如何处理服务间的同步和异步通信？
09-06 451
在Spring Cloud Alibaba环境中，处理服务间的同步和异步通信是构建高效微服务架构的关键。同步通信意味着调用方必须等待被调用方返回结果后才能继续执行；而异步通信则允许调用方发送请求后立即返回，无需等待响应。下面将分别介绍这两种通信方式及其在Spring Cloud Alibaba环境中的实现方法。
博客
Spring Cloud Alibaba中的流量控制规则有哪些类型？
09-06 258
在Spring Cloud Alibaba中，Sentinel作为流量控制的主要工具，提供了多种类型的流量控制规则，以适应不同的业务场景和需求。这些规则可以帮助你实现限流、熔断、降级等目的。
博客
Spring Cloud Alibaba中，如何优化Sentinel的性能？
09-06 338
在Spring Cloud Alibaba中，优化Sentinel的性能可以从多个角度入手，包括但不限于配置调整、硬件资源优化、合理的资源分隔、减少不必要的资源占用等。
博客
Spring Cloud Alibaba中，如何使用Nacos实现动态路由？
09-06 700
在Spring Cloud Alibaba中，Nacos不仅可以作为服务注册中心和配置中心，还可以用来实现动态路由的功能。动态路由指的是可以根据运行时的条件来改变路由规则，这对于微服务架构来说是非常有用的特性，因为它允许你在不修改代码的情况下，灵活地控制流量的流向。
博客
Spring Cloud Alibaba的微服务之间如何进行安全通信？
09-06 470
在Spring Cloud Alibaba中，微服务之间的安全通信涉及多个层面，包括身份验证（Authentication）、授权（Authorization）以及加密传输等内容。
博客
Spring Cloud Alibaba中的流量控制如何与业务逻辑解耦？
09-06 421
在Spring Cloud Alibaba中，实现流量控制与业务逻辑的解耦通常涉及到将流量控制逻辑从业务逻辑中分离出来，使其成为一个独立的、可配置的模块。这样做的好处是可以让流量控制策略更加灵活，便于维护和扩展，同时也减少了对业务逻辑的影响。
博客
Spring Cloud Alibaba中实现服务的灰度发布？
09-06 440
通过上述方法，可以在Spring Cloud Alibaba中实现服务的灰度发布。选择哪种方法取决于具体的业务需求和技术栈的特点。通常情况下，结合使用多种技术可以达到更好的效果。例如，可以结合使用服务发现时的版本标签和API网关的路由规则来实现更为复杂的灰度发布策略。
博客
Spring Cloud Alibaba的Dubbo与传统Dubbo有何区别？
09-06 676
总的来说，Spring Cloud Alibaba Dubbo在继承了传统Dubbo强大功能的基础上，进一步加强了与Spring Cloud生态的整合，使得开发者可以更方便地在现代微服务架构中使用Dubbo作为服务间通信的解决方案。如果你正在使用Spring Boot和Spring Cloud构建微服务应用，并且希望采用Dubbo作为RPC框架，那么Spring Cloud Alibaba Dubbo将是更好的选择。
博客
Spring Cloud Alibaba中，如何使用Sentinel实现熔断和限流？
09-06 278
在你的服务中，你需要定义要进行限流或熔断保护的资源，并为其配置规则。你可以通过@GetMapping("/user/{id}") @SentinelResource(value = "getById" , fallback = "handleException") // 定义资源名称和异常处理方法 public User getById(@PathVariable Long id) {
博客
Spring Cloud Alibaba中，如何利用RocketMQ实现事务消息的处理？
09-06 158
在Spring Cloud Alibaba中，使用RocketMQ实现事务消息的处理涉及到两个主要步骤：配置RocketMQ事务消息相关的环境，以及编写相应的生产者和消费者代码来处理事务消息。事务消息在RocketMQ中是指那些需要等待本地事务确认后才能最终决定是否投递的消息。
博客
Spring Cloud Alibaba中如何使用Dubbo实现RPC调用？
09-06 403
定义一个服务接口，并使用@Service注解标记它。import com// 实现逻辑 return null;} }// 实现逻辑 return null;} }// 实现逻辑 return null;} }// 实现逻辑 return null;} }Service;@Override// 实现逻辑。
博客
Spring Cloud Alibaba中，Sentinel与Nacos如何集成实现动态规则配置？
09-06 319
为了让Sentinel能够从Nacos拉取规则，你需要注册一个自定义的规则提供者（Rule Provider）。这个提供者负责从Nacos中读取规则并将其转换为Sentinel可以理解的格式。// 自定义配置 return provider;} }// 自定义配置 return provider;} }// 自定义配置 return provider;} }// 自定义配置 return provider;} }// 自定义配置 return provider。
博客
Spring Cloud Alibaba Nacos如何支持灰度发布？
09-06 232
Spring Cloud Alibaba Nacos支持灰度发布的特性，使得在微服务架构中可以平滑地进行新旧版本的服务切换。灰度发布也称为金丝雀发布，是一种逐步将新版本软件引入生产环境的策略，目的是为了减少风险，确保新版本不会对现有系统造成负面影响。
博客
Spring Cloud Alibaba中如何使用RocketMQ实现消息的顺序消费？
09-06 158
在Spring Cloud Alibaba中，RocketMQ作为一个分布式消息中间件，提供了消息的顺序消费能力，这对于某些业务场景来说是非常重要的。例如，当你需要处理一系列必须按照特定顺序执行的任务时，顺序消费就显得尤为重要。
博客
Spring Cloud Alibaba中如何处理分布式事务问题？
09-06 173
在Spring Cloud Alibaba中处理分布式事务问题，主要依靠Seata这一组件。Seata是一个开源的高性能分布式事务解决方案，专门为微服务架构设计，支持AT模式、TCC模式等多种事务模式，能够很好地解决服务间的数据一致性问题。
博客
Spring Cloud Alibaba的Sentinel如何实现热点参数限流？
09-06 311
Spring Cloud Alibaba Sentinel 是一个开源的流量控制组件，旨在保护后端服务免受突发流量的影响。它提供了多种流量控制策略，包括QPS限流、熔断降级等。其中，“热点参数限流”是一种特别的限流方式，它可以根据请求中的某些参数值来进行限流。
博客
Spring Cloud Alibaba中使用Nacos作为配置中心有哪些优势？
09-06 250
Nacos为Spring Cloud Alibaba提供了良好的支持，可以通过简单的依赖引入和配置就能开始使用其功能。通过使用Nacos作为配置中心，不仅可以简化微服务架构中的配置管理任务，还能提高整个系统的可维护性和灵活性。这使得开发人员可以更方便地管理和维护配置，尤其是在微服务架构中，每个服务都可以共享相同的配置中心。当配置发生变化时，Nacos可以实时地推送新的配置给各个服务实例，而不需要重启服务。此外，它还提供了监控功能，可以实时查看配置的发布情况和客户端的状态。这有助于保护敏感配置信息的安全。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值