vue+element 实现基本的增删改查页面

已于 2024-04-16 14:24:24 修改
阅读量2.8k 收藏 35
点赞数 6
文章标签： vue.js 前端 javascript html
于 2020-04-18 11:55:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45576895/article/details/105595902
版权

功能点：

  1. Form表单验证
  2. 重置表单
    在这里插入图片描述
    在这里插入图片描述
    功能点代码
//表单校验规则，dataRule()是form表单中需要引用的。见下方源码的form表单写法。
        computed:{
            dataRule(){
                return {
                    stationCode: [
                        {required: true, message: '车站编码不能为空'}
                    ],
                    lineCode: [
                        {required: true, message: '线路编码不能为空' }
                    ],
                    stationNameCN: [
                        {required: true, message: '中文名称不能为空' }
                    ],
                    stationNameEN: [
                        {required: true, message: '英文名称不能为空' }
                    ],
                    stationState: [
                        {required: true, message: '车站状态不能为空' }
                    ],
                    isHeadEnd: [
                        {required: true, message: '首末站不能为空' }
                    ],
                    isTransfer: [
                        {required: true, message: '换乘站不能为空' }
                    ],
                    isImportant: [
                        {required: true, message: '重点站不能为空' }
                    ],
                    turnBackFlag: [
                        {required: true, message: '折返站不能为空' }
                    ],
                    longitude: [
                        {required: true, message: '经度不能为空' }
                    ],
                    latitude: [
                        {required: true, message: '纬度不能为空' }
                    ],
                    atsLineId: [
                        {required: true, message: 'ATS线路编码不能为空' }
                    ],
                    atsStationId: [
                        {required: true, message: 'ATS车站编码不能为空' }
                    ],
                    telNum: [
                        {required: true, message: '电话号码不能为空' }
                    ],
                    shortName: [
                        {required: true, message: '简称不能为空' }
                    ],
                }
            }
        },


//一键重置表单，怎么用见下方源码
            dataFormResetHandle(formname){
                this.$refs[formname].resetFields();
            },

该页面完整源码：拿着上面的关键字直接ctrl+f搜，大家看看就明白了。

<template>
        <el-card shadow="never" class="aui-card-fill">
            <div style="margin-left: 20px;margin-right: 20px">

                <div>
                    <br>
                    <span style="font-size: 30px;">车站基本信息</span>
                </div>


                <div style="height: 60px;margin-top: 10px;font-size: 16px">



                    <el-row  >
                        <el-col :span="21">
                            <el-form :inline="true" ref="form" :model="form" label-width="80px">
                                <el-form-item >
                                    <span>开通状态</span>&nbsp;
                                </el-form-item>
                                <el-form-item>
                                    <el-radio-group v-model="form.stationStateRadio">
                                        <el-radio :label="0" >全部</el-radio>
                                        <el-radio :label="1" >已开通</el-radio>
                                        <el-radio :label="2" >未开通</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item>
                                    <el-input v-model="form.searchMessage" placeholder="请输入关键字搜索"  ></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" style="margin-left: 15px;" icon="el-icon-search"  @click="searchHandle()">搜索</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>


                        <el-col :span="3" style="text-align: right">
                            <el-button type="primary" @click="add()" icon="el-icon-plus" >新增</el-button>
                            <el-button type="danger" class="my-icon" icon="el-icon-delete"  @click="deleteStation()">删除</el-button>
                        </el-col>
                    </el-row>
                </div>


                <!--            第二行table-->
                <div style="margin-top: 10px">
                    <el-table
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%;"
                            header-cell-style="background:#E3EDF7"
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                width="30">
                        </el-table-column>
                        <el-table-column
                                label="序号"
                                width="52"
                                prop="id"
                                type="index">
                        </el-table-column>
                        <el-table-column
                                prop="stationCode"
                                label="站点编号"
                                width="82">
                        </el-table-column>
                        <el-table-column
                                prop="lineCode"
                                label="所属线路"
                                width="82">
                        </el-table-column>
                        <el-table-column
                                prop="stationNameCN"
                                label="中文名称"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="stationNameEN"
                                label="英文名称"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="stationState"
                                label="开通状态"
                                width="82">
                        </el-table-column>
                        <el-table-column
                                prop="isHeadEnd"
                                label="首末站"
                                width="72">
                        </el-table-column>
                        <el-table-column
                                prop="isTransfer"
                                label="换乘站"
                                width="72">
                        </el-table-column>
                        <el-table-column
                                prop="isImportant"
                                label="重点站"
                                width="72">
                        </el-table-column>
                        <el-table-column
                                prop="turnBackFlag"
                                label="折返站"
                                width="72">
                        </el-table-column>
                        <el-table-column
                                prop="longitude"
                                label="经度"
                                width="95">
                        </el-table-column>
                        <el-table-column
                                prop="latitude"
                                label="纬度"
                                width="90">
                        </el-table-column>
                        <el-table-column
                                prop="updateTime"
                                label="更新日期"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="atsLineId"
                                label="ATS线路编码"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="atsStationId"
                                label="ATS车站编码"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="telNum"
                                label="车站电话"
                                show-overflow-tooltip>
                        </el-table-column>

                        <el-table-column
                                prop="shortName"
                                label="车站简称"
                                width="140">
                        </el-table-column>

                        <el-table-column
                                label="操作"
                                width="110">
                            <template slot-scope="scope">
                                <el-button  size="mini" type="text" @click="update(scope.row.stationCode)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--          分页      -->
                <div><pagination ref="paginationRef" @refreshDataList="getData"></pagination></div>

            </div>



            <!-- 弹窗添加车站-->
            <el-dialog
                    :title="insertUpdatetag=='insert' ? '新增车站信息' : '编辑车站信息'"
                    :visible.sync="dialogVisible"
                    width="50%"
                    :before-close="handleClose">

                <!--   form表单         -->
                <el-form :model="dataForm" :rules="dataRule" ref="dataForm"  label-width="120px">

                    <el-row>
                        <el-col :span="12"><div class="grid-content bg-purple">
                            <el-form-item label="车站编码:" prop="stationCode" >
                                <el-input style="width: 95%" v-model="dataForm.stationCode" placeholder="请输入车站编码"></el-input>
                            </el-form-item>

                            <el-form-item label="中文名称:" prop="stationNameCN">
                                <el-input style="width: 95%" v-model="dataForm.stationNameCN" placeholder="请输入中文名称"></el-input>
                            </el-form-item>

                            <el-form-item label="车站电话:" prop="telNum">
                                <el-input style="width: 95%" v-model="dataForm.telNum" placeholder="请输入车站电话"></el-input>
                            </el-form-item>

                            <el-form-item label="开通状态:" prop="stationState" style="height: 18px">
                                <el-radio-group v-model="dataForm.stationState" >
                                    <el-radio :label="0">已开通</el-radio>
                                    <el-radio :label="1">未开通</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="首末站:" prop="isHeadEnd" style="height: 18px">
                                <el-radio-group v-model="dataForm.isHeadEnd" >
                                    <el-radio :label="0">首末站</el-radio>
                                    <el-radio :label="1">中间站</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="换乘站:" prop="isTransfer" >
                                <el-radio-group v-model="dataForm.isTransfer">
                                    <el-radio :label="0">换乘站</el-radio>
                                    <el-radio :label="1">普通站</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="经度:" prop="longitude">
                                <el-input style="width: 95%" v-model="dataForm.longitude" placeholder="请输入经度"></el-input>
                            </el-form-item>

                            <el-form-item label="ATS线路编码:" prop="atsLineId">
                                <el-input style="width: 95%" v-model="dataForm.atsLineId" placeholder="请输入ATS线路编码"></el-input>
                            </el-form-item>

                        </div></el-col>


                        <el-col :span="12"><div class="grid-content bg-purple-light">
                            <el-form-item label="所属线路:" prop="lineCode">
                                <el-input style="width: 95%" v-model="dataForm.lineCode" placeholder="请输入所属线路"></el-input>
                            </el-form-item>
                            <el-form-item label="英文名称:" prop="stationNameEN" >
                                <el-input style="width: 95%" v-model="dataForm.stationNameEN" placeholder="请输入英文名称"></el-input>
                            </el-form-item>
                            <el-form-item label="简称:" prop="shortName">
                                <el-input style="width: 95%" v-model="dataForm.shortName" placeholder="请输入简称"></el-input>
                            </el-form-item>

                            <el-form-item label="重点站:" prop="isImportant" style="height: 18px">
                                <el-radio-group v-model="dataForm.isImportant">
                                    <el-radio :label="0">重点站</el-radio>
                                    <el-radio :label="1">普通站</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="折返站:" prop="turnBackFlag" style="height: 18px">
                                <el-radio-group v-model="dataForm.turnBackFlag">
                                    <el-radio :label="0">折返站</el-radio>
                                    <el-radio :label="1">普通站</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item  prop="turnBackFlag">
                                &nbsp;
                            </el-form-item>

                            <el-form-item label="纬度:" prop="latitude">
                                <el-input style="width: 95%" v-model="dataForm.latitude" placeholder="请输入纬度"></el-input>
                            </el-form-item>

                            <el-form-item label="ATS车站编码:" prop="atsStationId">
                                <el-input style="width: 95%" v-model="dataForm.atsStationId" placeholder="请输入ATS车站编码"></el-input>
                            </el-form-item>



                        </div></el-col>
                    </el-row>

                    <!--                    <el-form-item style="margin-top: 20px;margin-left: 0px">-->
                    <!--                        -->
                    <!--                    </el-form-item>-->


                </el-form>
                <el-row  style="margin-top: 15px;text-align: right">
                    <el-button type="primary"  @click="dataFormSubmitHandle('dataForm')">立即提交</el-button>
                    <el-button type="primary"   @click="dataFormResetHandle('dataForm')">重 置</el-button>

                </el-row>

            </el-dialog>

        </el-card>
</template>

<script>
    import pagination from '../programme/Pagination'

    export default {
        name: 'Station',
        components:{
            pagination
        },
        data() {
            return {
                dialogVisible: false,
                dataForm:{
                    stationCode:'',
                    lineCode:'',
                    stationNameCN:'',
                    stationNameEN:'',
                    stationState:0,
                    isHeadEnd:0,
                    isTransfer:0,
                    isImportant:0,
                    turnBackFlag:0,
                    longitude:'',
                    latitude:'',
                    atsLineId:'',
                    atsStationId:'',
                    telNum:'',
                    shortName:''
                },
                form:{
                    stationStateRadio:0,
                    searchMessage:'',
                },
                stationStateRadio:3,
                checkBoxData: [],
                InfoUnitData:[],
                unitsort:'',
                searchMessage:'',
                tableData: [],
                multipleSelection: [],
                insertUpdatetag:'insert',
                isFirstResetForm:'0',
            }
        },
        mounted(){
            this.getData();
        },
        //校验规则
        computed:{
            dataRule(){
                return {
                    stationCode: [
                        {required: true, message: '车站编码不能为空'}
                    ],
                    lineCode: [
                        {required: true, message: '线路编码不能为空' }
                    ],
                    stationNameCN: [
                        {required: true, message: '中文名称不能为空' }
                    ],
                    stationNameEN: [
                        {required: true, message: '英文名称不能为空' }
                    ],
                    stationState: [
                        {required: true, message: '车站状态不能为空' }
                    ],
                    isHeadEnd: [
                        {required: true, message: '首末站不能为空' }
                    ],
                    isTransfer: [
                        {required: true, message: '换乘站不能为空' }
                    ],
                    isImportant: [
                        {required: true, message: '重点站不能为空' }
                    ],
                    turnBackFlag: [
                        {required: true, message: '折返站不能为空' }
                    ],
                    longitude: [
                        {required: true, message: '经度不能为空' }
                    ],
                    latitude: [
                        {required: true, message: '纬度不能为空' }
                    ],
                    atsLineId: [
                        {required: true, message: 'ATS线路编码不能为空' }
                    ],
                    atsStationId: [
                        {required: true, message: 'ATS车站编码不能为空' }
                    ],
                    telNum: [
                        {required: true, message: '电话号码不能为空' }
                    ],
                    shortName: [
                        {required: true, message: '简称不能为空' }
                    ],
                }
            }
        },
        methods:{
            getData(){
                let formData=new FormData();
                this.$http.post('/station/listStation',formData,{baseURL:this.global.apis1}).then(({data:res})=>{
                    if (res.IsError =="false"){
                        this.tableData=res.Data;
                        this.$refs.paginationRef.total = res.total
                    }else{
                        return this.$message.error(res.Message)
                    }
                })
            },

            //新增按钮
            add(){
                this.insertUpdatetag='insert';
                this.dialogVisible=true;
                this.dataFormResetHandle('dataForm');
                this.isFirstResetForm='1'
            },

            //修改按钮
            update(updateStationId){
                this.insertUpdatetag='update';
                this.dialogVisible=true;
                if (this.isFirstResetForm=='1'){
                    this.dataFormResetHandle('dataForm');
                }
                this.getDataById(updateStationId);
                },

            //查找某一值
            getDataById(updateLineId){
                let formData=new FormData();
                formData.append('stationId',updateLineId);
                this.$http.post('/station/getDataById',formData,{baseURL:this.global.apis1}).then(({data:res})=>{
                    if (res.IsError =="false"){
                        this.dataForm=res.Data;
                    }else{
                        return this.$message.error(res.Message)
                    }
                })
            },

            //提交按钮
            dataFormSubmitHandle(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let formData=new FormData();
                        formData.append('stationCode',this.dataForm.stationCode);
                        formData.append('lineCode',this.dataForm.lineCode);
                        formData.append('stationNameCN',this.dataForm.stationNameCN);
                        formData.append('stationNameEN',this.dataForm.stationNameEN);
                        formData.append('stationState',this.dataForm.stationState);
                        formData.append('isHeadEnd',this.dataForm.isHeadEnd);
                        formData.append('isTransfer',this.dataForm.isTransfer);
                        formData.append('isImportant',this.dataForm.isImportant);
                        formData.append('turnBackFlag',this.dataForm.turnBackFlag);
                        formData.append('longitude',this.dataForm.longitude);
                        formData.append('latitude',this.dataForm.latitude);
                        formData.append('atsLineId',this.dataForm.atsLineId);
                        formData.append('atsStationId',this.dataForm.atsStationId);
                        formData.append('telNum',this.dataForm.telNum);
                        formData.append('shortName',this.dataForm.shortName);
                        if(this.insertUpdatetag=='insert'){
                            this.$http.post('/common/insertStation',formData,{baseURL:this.global.apis1}).then(({data:res})=>{
                                if (res.IsError =="false"){
                                    this.dialogVisible=false;
                                    this.getData();
                                    this.$message({
                                        message: '新增成功',
                                        type: 'success'
                                    });
                                }else{
                                    return this.$message.error(res.Message)
                                }
                            })
                        }else {
                            // 修改
                            this.$http.post('/common/updateStation',formData,{baseURL:this.global.apis1}).then(({data:res})=>{
                                if (res.IsError =="false"){
                                    this.dialogVisible=false;
                                    this.getData();
                                    this.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    });
                                }else{
                                    return this.$message.error(res.Message)
                                }
                            })
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },
            //重置按钮
            dataFormResetHandle(formname){
                this.$refs[formname].resetFields();
            },
            //删除项目
            deleteStation(){
                if (this.checkBoxData!=0){
                    this.$confirm('确认删除？')
                        .then(_ => {
                            let formData=new FormData();
                            formData.append('checkBoxData',this.checkBoxData);
                            this.$http.post('/common/deleteStation',formData,{baseURL:this.global.apis1}).then(({data:res})=>{
                                if (res.IsError =="false"){
                                    this.getData();

                                    this.$message({
                                        message: '删除成功',
                                        type: 'success'
                                    });
                                }else{
                                    return this.$message.error(res.Message)
                                }
                            })
                        })
                        .catch(_ => {});
                } else {
                    this.$message({
                        message: '请选择至少一条数据',
                        type: 'warning'
                    });
                }

            },
            //搜索按钮
            searchHandle(){
                let formData=new FormData();
                    this.$http.post('/common/searchStation',formData,{baseURL:this.global.apis1}).then(({data:res})=>{
                        if (res.IsError =="false"){
                            this.tableData=res.Data;
                        }else{
                            return this.$message.error(res.Message)
                        }
                    })
            },
            handleSelectionChange(val){
                this.checkBoxData = val;

            },
        }



    }
</script>

<style >

</style>

【最怕一生碌碌无为，安慰自己平凡可贵】

一半惊喜一半遗憾
关注
登录、增删改查的页面
Allure_heart的博客
01-21 3205
闲的没事，用Servlet、jsp、JDBC、数据库写了登录、注册、增加、删除、修改、查询这些页面，我用了两个数据库来写，一个用来登录和注册，一个用来进行增加、删除、修改、查询，在进行增删改查这些操作之前，要进行登录和注册， ...
vue+element实现增删改查
weixin_49257048的博客
10-15 779
vue+element实现增删改查。曾经在这载过坑，纪念一下。
vue+vue-resource+elementUI table组件实现增删改查和分页源码
08-30
实现功能：1.表格增删改查 2.表格分页3.excel导入导出
Vue2 基本增删改查界面
最新发布
山顶听风的博客
09-12 483
本文是前端一个基本的增删改查的例子，供自己梳理思路，不涉及复杂业务操作。
Vue3【六】实现页面简单的增删改查
SpringHASh的博客
10-24 1669
vue3 + elementPlus 实现简单的增删改查，多选框批量删除。
Vue页面实现简单的增删改查
热门推荐
小道仙的后宫
08-16 1万+
目的：用vue实现简单的增删该查 注：我自己测试的后台是java+mysql。 这里提供前端页面。 只需要连接你的后台url就好了 需要准备 vue.js 和 bootstrap.css 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title...
Vue实现增删改查功能
weixin_46381442的博客
03-23 4988
最近公司新接了一个项目，要求没有后端前端画页面写假数据并且相应的功能展示。 分给我的大多数都是增删改查一些类似的页面。 接下来我们就开始上代码！ HTML： <div class="header pad" style="padding: 20px 0"> <el-form ref="formInline" :inline="true" :model="formInline" label-width="100px"
vue-element-ui-demo:一个基于vue+element的后台增删查改小demo
04-28
一个基于vue+element(饿了么团队开发的vueui框架)的增删查改小demo Build Setup npm install npm run dev phpdemo在index.php中,实际运行需要为php文件设立域名,并修改ajaxurl 然后....是的,我懒到不想用数据库了......
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
10-19
本篇文档主要介绍了一个使用Spring Boot、MyBatis、Vue.js和ElementUI组合实现的增删改查实例。该实例包含后端的Spring Boot和MyBatis技术栈，以及前端的Vue.js框架和ElementUI组件库，目的是实现一个简单的数据管理...
vue+element ui搭建的DEMO增删改查+分页+导出
02-16
增删改查功能是Web应用的核心，Element UI提供了诸如表格（Table）、对话框（Dialog）、表单（Form）等组件，帮助开发者轻松实现这些功能。例如，Table组件可以显示数据列表，通过自定义列模板实现编辑按钮；Form...
简单html增删改查
06-05
简单html增删改查，适合初学者使用.包含两个文件
vue+element实现表单的增删改查
u010019566的博客
04-21 4766
vue+element实现表单的增删改查
VUE增删改查页面实例
Rockandrollman的博客
12-22 1349
main.js App.vue /router/index.js /store/index.js indexVue.vue Aside.vue Header.vue Home.vue /user/UserManager.vue
vue+element 前端实现增删查改+分页，不调用后端
SurepMan的博客
03-21 679
前端实现增删查改+分页，不调用后端
Flask+VUE 实现页面增删改查显示开发+测试（图文教程附源码）
全村的希望的博客
05-08 7711
环境搭建博文： Flask+mysql接口增删改查博文： 本篇文章接着上面的图书项目book增删改查实现 vue 创建新项目 ：vue create book 初始化 ：vue init webpack book 中间要是提示要安装脚手架，按照提示执行命令即可 新建项目成功后，目录结构如下： ...
Vue+elementUI实现增删改查（前端静态页面）
weixin_54446335的博客
04-01 885
BasePannel和BaseButton是自定义组件，需要删掉。配置完路由，建立好页面直接复制以下代码即可。
简单的vue增删改查
jlb240的博客
04-20 802
【代码】简单的vue增删改查。
springboot+vue+element-plus增删改查Demo
06-09
好的，这个Demo需要分为前端页面和后端代码两部分来实现，下面我将介绍具体的实现步骤。 ## 后端代码实现 1. 创建SpringBoot项目，引入相关依赖： ```xml <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.2.0</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.2.5</version> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.12</version> </dependency> </dependencies> ``` 2. 创建数据库表，并使用Mybatis进行数据访问操作，这里使用Druid作为数据源： ```java @Mapper public interface DemoMapper { List<Demo> getDemoList(); Demo getDemoById(Integer id); int addDemo(Demo demo); int updateDemo(Demo demo); int deleteDemo(Integer id); } ``` 3. 在Controller层编写接口，提供增删改查的功能： ```java @RestController @RequestMapping("/demo") public class DemoController { @Autowired private DemoMapper demoMapper; @GetMapping("/list") public List<Demo> getDemoList() { return demoMapper.getDemoList(); } @GetMapping("/{id}") public Demo getDemoById(@PathVariable Integer id) { return demoMapper.getDemoById(id); } @PostMapping("/add") public int addDemo(@RequestBody Demo demo) { return demoMapper.addDemo(demo); } @PutMapping("/update") public int updateDemo(@RequestBody Demo demo) { return demoMapper.updateDemo(demo); } @DeleteMapping("/{id}") public int deleteDemo(@PathVariable Integer id) { return demoMapper.deleteDemo(id); } } ``` ## 前端页面实现 1. 创建Vue项目，并引入相关依赖： ```javascript import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; ``` 2. 在页面中使用Element-Plus组件，实现增删改查的功能： ```vue <template> <div class="demo"> <el-button type="primary" @click="showAddDialog">添加</el-button> <el-table :data="tableData"> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="sex" label="性别"></el-table-column> <el-table-column label="操作"> <template #default="{ row }"> <el-button type="text" @click="showUpdateDialog(row)">编辑</el-button> <el-button type="text" @click="deleteDemo(row.id)">删除</el-button> </template> </el-table-column> </el-table> <el-dialog title="添加" :visible.sync="addDialogVisible"> <el-form :model="addForm" :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input v-model="addForm.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model="addForm.age"></el-input> </el-form-item> <el-form-item label="性别" prop="sex"> <el-radio-group v-model="addForm.sex"> <el-radio label="男"></el-radio> <el-radio label="女"></el-radio> </el-radio-group> </el-form-item> </el-form> <div slot="footer"> <el-button @click="addDialogVisible = false">取消</el-button> <el-button type="primary" @click="addDemo">确定</el-button> </div> </el-dialog> <el-dialog title="编辑" :visible.sync="updateDialogVisible"> <el-form :model="updateForm" :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input v-model="updateForm.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model="updateForm.age"></el-input> </el-form-item> <el-form-item label="性别" prop="sex"> <el-radio-group v-model="updateForm.sex"> <el-radio label="男"></el-radio> <el-radio label="女"></el-radio> </el-radio-group> </el-form-item> </el-form> <div slot="footer"> <el-button @click="updateDialogVisible = false">取消</el-button> <el-button type="primary" @click="updateDemo">确定</el-button> </div> </el-dialog> </div> </template> <script> import { reactive, toRefs } from 'vue'; import axios from 'axios'; export default { name: 'Demo', setup() { const state = reactive({ tableData: [], addDialogVisible: false, updateDialogVisible: false, addForm: { name: '', age: '', sex: '男' }, updateForm: { id: '', name: '', age: '', sex: '' }, rules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' } ], sex: [ { required: true, message: '请选择性别', trigger: 'change' } ] } }); const getDemoList = () => { axios.get('/demo/list').then(res => { state.tableData = res.data; }); }; const addDemo = () => { axios.post('/demo/add', state.addForm).then(() => { state.addDialogVisible = false; state.addForm = { name: '', age: '', sex: '男' }; getDemoList(); }); }; const updateDemo = () => { axios.put('/demo/update', state.updateForm).then(() => { state.updateDialogVisible = false; state.updateForm = { id: '', name: '', age: '', sex: '' }; getDemoList(); }); }; const deleteDemo = id => { axios.delete(`/demo/${id}`).then(() => { getDemoList(); }); }; const showAddDialog = () => { state.addDialogVisible = true; }; const showUpdateDialog = row => { state.updateDialogVisible = true; state.updateForm = Object.assign({}, row); }; getDemoList(); return { ...toRefs(state), getDemoList, addDemo, updateDemo, deleteDemo, showAddDialog, showUpdateDialog }; } }; </script> ``` 这样就完成了一个简单的增删改查Demo，前后端分离，前端使用Vue和Element-Plus实现。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值