Element UI 使用 前后端数据对接 添加 删除 修改

最新推荐文章于 2023-07-27 21:25:50 发布
最新推荐文章于 2023-07-27 21:25:50 发布
阅读量1.7k 收藏 8
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shiqinghuan/article/details/107854147
版权 
<el-container style="height: 500px; border: 1px solid #eee">
        <!--  el-container  构建整个页面框架 -->
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
              el-aside  构建左侧菜单 
                    <el-menu :default-openeds="['1', '3']" :default-active="'1-1'">
                      <!--  el-menu  构建左侧菜单内容  常用属性如下 -->
                          <!--  :default-openeds  设置默认展开的选项 通过菜单的 index值来关联
                                :default-active 设置默认选中的选项  通过菜单的 index值来关联-->
                      <el-submenu index="1">
                        <!--  el-submenu：可展开的菜单，常用属性：
                            index：菜单下标，文本类型，不能是数组类型。
                        -->
                        <template slot="title"><i class="el-icon-message"></i>导航一</template>
                        <!--  template： 对应el-submenu的菜单名。-->
                        <!-- i：设置菜单图标：通过class属性实例 ：
                              el-icon-message，
                              el-icon-menu
                              el-icon-setting
                              -->
                        <el-menu-item-group>
                          <!--  el-menu-item-group:设置分组  此处可省略不写-->
                          <template slot="title">分组一</template>
                          <el-menu-item index="1-1">选项1</el-menu-item>
                          <!--  el-menu-item:菜单的子节点，不可再展开，常用属性：
                                  index： index：菜单下标，文本类型，不能是数组类型。 -->
                          <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>

                        <el-submenu index="1-3">
                          <template slot="title">选项3</template>
                          <el-menu-item index="1-3-1">选项3-1</el-menu-item>
                          <el-menu-item index="1-3-2">选项3-2</el-menu-item>
                        </el-submenu>
                      </el-submenu>
                    </el-menu>
        </el-aside>
        <el-main>
            <router-view></router-view>
        </el-main>
    </el-container>

vue router动态构建左侧菜单：

 <template>
    <el-container style="height: 500px; border: 1px solid #eee">
        <!--  el-container  构建整个页面框架 -->
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu router>
                <!--    $router.options.routes  $router.options读取到配置文件  然后 .routes 获取到数组routes-->
                <!--这里先获取到index下标  然后给el-submenu 设置属性index  给他动态的值index 防止点击时同时展开 +‘’ 是为了让他转换为字符串-->
                <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
                    <template slot="title">{{item.name}}</template>
                    <el-menu-item v-for="(item2,index2) in item.children" :index="item2.path">{{item2.name}}</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-main>
            <router-view></router-view>
        </el-main>
    </el-container>
</template>

menu与router的绑定：

 实现点击后跳转到对应页面

  1. <el-menu> 标签添加router属性

<el-menu router>
</el-menu>

  1. 在页面添加 <router-view></router-view>标签  他是一个容器，动态渲染你的router

<el-main>
   <router-view></router-view>
</el-main>

  1. <el-menu-item>标签的index值，就是要跳转的router。

<el-menu-item v-for="(item2,index2) in item.children" :index="item2.path">{{item2.name}}</el-menu-item>

设置默认加载的页面：

redirect: “/pageOne”,

const routes = [
  {
    path: '/',
    name: "导航一",
    component: Index,
    redirect: "/pageOne",
    children: [
      ·················
      ]
    }
]

设置选中的选项高亮显示：

$route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，
如 "/home/news" 。

<el-menu-item v-for="(item2,index2) in item.children"
        :index="item2.path"
        :class="$route.path == item2.path ? 'is-active' : '' ">
    {{item2.name}}</el-menu-item>

设置默认展开：

:default-openeds="[]"

<el-menu router :default-openeds="['0','1']">
</el-menu>

引入一个表格组件，并进行修改，放入到页面一

<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="编号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="用户名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="pwd"
                    label="密码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="perms"
                    label="权限"
                    width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

</template>

<script>
    export default {
        methods: {
            handleClick(row) {
                console.log(row);
            }
            ,
            page(currentPage){
                alert(currentPage);
            }
        },

        data() {
            return {
                tableData: [{
                    id: '2016-05-02',
                    name: '王小虎',
                    pwd: '上海',
                    perms: '普陀区'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 弄',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }]
            }
        }
    }
</script>

引用一个分页组件：

<el-pagination
      background
      layout="prev, pager, next"
      page-size="5"
      :total="50"
      @current-change="page"
      >
<!--  page-size设置每页的数据条数   
	:total="1000" 设置总记录数
@current-change：实现分页操作
      -->
</el-pagination>

写一个方法 page 实现分页切换：
这个方法在上面已经使用 ：@current-change=“page”

<script>
    export default {
        methods: {
            handleClick(row) {
                console.log(row);
            }
            ,
            page(currentPage){
                alert(currentPage);
            }
        },

        data() {
            return {
              
            }
        }
    }
</script>

修改springboot：

@Autowired
    private UserRepository userRepository;

//    @GetMapping("/findAll")
//    public List<User> findAll() {
//        return userRepository.findAll();
//    }
    //使用带分页查询的findAll方法
    @GetMapping("/findAll/{page}/{size}")
       public Page<User> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size) {
        PageRequest pageable = PageRequest.of(page-1,size);
        //因为是默认从0开始  所以把输入的page 进行-1操作
        //参数： page：要查询的页数   size每页的数据条数
        return userRepository.findAll(pageable);
       }
}

导入axios:
使用created()：

<script>
    export default {
        methods: {
            handleClick(row) {
                
            }
            ,
            page(currentPage){
                console.log(currentPage);
                })
            }
        },
        created() {
            axios.get('http://localhost:8181/user/findAll/1/1').then((resp) =>{
                console.log(resp)
                this.tableData = resp.data.content  //获取实际的数据内容
            })
        },
        data() {
            return {
               *********
            }
        }
    }
</script>

获取总数据数 在分页组件中使用：

<script>
    export default {
        methods: {
            handleClick(row) {
                console.log(row);
            }
            ,
            page(currentPage){
             
                })
            }
        },
        created() {
            axios.get('http://localhost:8181/user/findAll/1/1').then((resp) =>{
                console.log(resp)
                this.tableData = resp.data.content  //获取实际的数据内容
                this.total = resp.data.totalElements//获取总数据数
            })
        },
        data() {
            return {
                total: null,
                tableData: null
            }
        }
    }
</script>

<el-pagination
                background
                layout="prev, pager, next"
                page-size="1"
                :total="total"
                @current-change="page"
                >
<!--     page-size设置每页的数据条数   :total="1000" 设置总记录数      -->
        </el-pagination>

实现分页 切换数据：

methods: {
            handleClick(row) {
                console.log(row);
            }
            ,
            page(currentPage){
                axios.get('http://localhost:8181/user/findAll/'+currentPage+'/1').then((resp) =>{
                    console.log(resp)
                    this.tableData = resp.data.content  //获取实际的数据内容
                    this.total = resp.data.totalElements//获取总数据数
                })
            }
        },

使用表单组件实现添加数据：

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<!--     :model：用于绑定数据  :rules：用于绑定检验规则 和prop=""关联   -->
        <el-form-item label="用户名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
            <el-input v-model="ruleForm.pwd"></el-input>
        </el-form-item>
        <el-form-item label="权限" prop="perms">
            <el-input v-model="ruleForm.perms"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>

    </el-form>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    name: '',
                    pwd: '',
                    perms: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入用户名称', trigger: 'blur' },
                        //required 是否必填 message 提示信息 trigger 触发事件 blur 失去焦点时触发
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    pwd: [
                        { required: true, message: '请输入密码', trigger: 'change' }
                    ],
                    perms: [
                        { type: 'date', required: true, message: '请选择权限', trigger: 'change' }
                    ],
                    date2: [
                        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    type: [
                        { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                    ],
                    resource: [
                        { required: true, message: '请选择活动资源', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请填写活动形式', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                //this.$refs[formName] 获取表单
                //resetFields() 重置表单为空
            }
        }
    }
</script>

在springboot中 写添加代码：

@PostMapping("/save")
       public String save(@RequestBody User user) {
        //@RequestBody这里使用注解将 user转为 json格式
           User result = userRepository.save(user);
           if (result != null) {
               return "success";
           }else {
               return "error";
           }
       }

在前端进行调用 并设置：

<template>
    <el-form style="width: 40%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<!--     :model：用于绑定数据  :rules：用于绑定检验规则 和prop=""关联   -->
        <el-form-item label="用户名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
            <el-input v-model="ruleForm.pwd"></el-input>
        </el-form-item>
        <el-form-item label="权限" prop="perms">
            <el-input v-model="ruleForm.perms"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>

    </el-form>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    name: '',
                    pwd: '',
                    perms: '',
                },
                rules: {
                    ****************
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('http://localhost:8181/user/save',this.ruleForm).then((resp) =>{
                            if (resp.data == 'success'){
                                this.$router.push('/pageOne')
                                //跳转到查询页面
                                const h = this.$createElement;
                                this.$message({
                                    message: h('p', null, [
                                        h('i', { style: 'color: teal' }, '添加成功')
                                    ])
                                });
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                //this.$refs[formName] 获取表单
                //resetFields() 重置表单为空
            }
        }
    }
</script>

修改：

@GetMapping("/findById/{id}")
    public User findById(@PathVariable("id") Integer id) {

        return userRepository.findById(id).get();
    }

    @PutMapping("/update")
    public String update(@RequestBody User user) {
        User result = userRepository.save(user);
        if (result != null) {
            return "success";
        }else {
            return "error";
        }
    }

<el-button  @click="edit(scope.row)" type="text" size="small">修改</el-button>

<script>
    export default {
        methods: {
            edit(row) {
                //跳转到修改页面  并获取到当前点击的 id
                this.$router.push({
                    path: '/update',
                    query: {
                        id: row.id
                    }
                })
            }
    }
</script>

<template>
    <el-form style="width: 40%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <!--     :model：用于绑定数据  :rules：用于绑定检验规则 和prop=""关联   -->
       ********************
    </el-form>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    id: '',
                    name: '',
                    pwd: '',
                    perms: '',
                },
                rules: {
                   **********************
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.put('http://localhost:8181/user/update',this.ruleForm).then((resp) =>{
                            if (resp.data == 'success'){
                                this.$router.push('/pageOne')
                                //跳转到查询页面
                                const h = this.$createElement;
                                this.$message({
                                    message: h('p', null, [
                                        h('i', { style: 'color: teal' }, '修改成功')
                                    ])
                                });
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                //this.$refs[formName] 获取表单
                //resetFields() 重置表单为空
            }
        }
        ,created() {
            //拿到id
            //this.route.query.id
                axios.get('http://localhost:8181/user/findById/'+this.$route.query.id).then((resp) =>{
                this.ruleForm = resp.data

            })
        }
    }
</script>

删除：

@DeleteMapping("/deleteById/{id}")
    public void deleteById(@PathVariable("id") Integer id) {

        userRepository.deleteById(id);

    }

<el-button @click="deleteUser(scope.row)" slot="reference" type="text" size="small">删除</el-button>

deleteUser(row) {
    axios.delete('http://localhost:8181/user/deleteById/'+row.id).then((resp) =>{
       window.location.reload();//动态刷新一次

     })
     }
      ,
清欢·
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Axure Element UI元件库
05-14
通过将Element UI元件库集成到Axure中，设计师可以使用与最终产品相一致的组件进行设计，这确保了设计与开发之间的无缝对接，减少了沟通成本和后期调整的可能性。 **2. 导入Element UI元件库** 导入Element UI元件...
Element UI-2.15.1.zip
04-16
2. **Vue.js 集成**：Element UI 是为 Vue.js 设计的，与 Vue 的响应式机制无缝对接，方便开发者快速构建组件和页面。 3. **主题定制**：支持自定义主题，可以轻松改变颜色、字体等设计样式，满足个性化需求。 4. **...
ElementUI增加,删除,修改的实现及表单验证
Java炒饭的博客
07-27 3053
ElementUI增加,删除,修改的实现及表单验证
09，springboot整合elementui和mybatis_plus实现接口联调（完成后端接口）
w7635122886的博客
01-30 246
springboot整合elementui实现接口联调
【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑，点击单元格变成弹框修改数据
seeeeeeeeeee的博客
02-13 8519
这是继我另一个帖子就是单元格点击变成输入框后添加的功能因为考虑到有些时候修改单元格的信息可能点击后要修改很多，那一个输入框不好用所以这时候就需要一个弹框可以把所有表单都显示出来修改所以这里就专门又写了一个demo，用于处理这种情况如果需要看表格单元格点击后变成输入框，然后焦点消失后直接更改的模板，可以点击这个帖子点击单元格变输入框。
学习记录-mybatis+vue+elementUi实现新增数据
weixin_44239550的博客
12-23 456
和之前的学习一样，框架大体差不多，这里也是分为4步骤。
【Vue + ElementUI】实现前端调用接口传递 form-data 类型入参及总结遇到的问题记录（状态码 415 问题及记录如何生成 File 文件对象）
一个努力学习的程序猿
11-01 3981
（1）实现 Vue 前端组装一个 Form-Data 类型入参并解决 415 状态码问题； （2）解决如何根据文件路径转换成 File 文件对象，再拼接进 Form-Data 入参； （3）使用 ElementUI el-upload 组件，实现手动上传文件，并拼接进 Form-Data 入参。
使用Vue+Element-UI开发的Krpano全景漫游项目.zip
最新发布
10-21
在“使用Vue+Element-UI开发的Krpano全景漫游项目”中，开发者将Vue和Krpano结合，利用Vue的动态数据绑定和组件化特性，与Krpano的全景渲染能力相结合，实现了更加灵活和可定制化的全景漫游体验。 项目文件 ...
vue+element ui搭建后台业务系统
07-11
本教程将详细介绍如何使用Vue.js与Element UI搭建一个高效的后台业务系统。 1. **Vue.js入门**： Vue.js是一个渐进式的JavaScript框架，它允许开发者通过声明式的方式来处理数据绑定和事件处理。Vue的核心库专注于...
vue-element-table-edit:基于vue和element ui的table,在table内部进行每条数据编辑保存和删除 https
05-12
`vue-element-table-edit` 是一个基于 Vue.js 和 Element UI 的扩展项目，它专门针对表格数据操作进行了增强，允许用户在表格内部直接对每一条数据进行编辑、保存和删除操作，大大提升了数据管理的便利性。...
Element UI 在Table里进行直接新增和修改
adisMadman的博客
05-28 5342
最近做的一个项目，要求新增和修改不要用弹出框的形式，而是希望可以直接再表格中进行添加修改，做完后端的我，一脸懵逼，后来查看文档，总结如下，以便学习。 最终效果如下： 直接上代码： 前端： 1、三个按钮，新增、保存、批量新增的按钮： <el-row class="mb20" style="font-weight: bold">费用明细</el-row> <el-row :gutter="10" class="mb8"> &..
element-ui中表格中的Switch 开关如何使用及调接口
weixin_45369963的博客
08-05 4289
这是效果图 一、展示开关数据 1、要拿到当前行的数据在template标签中使用**slot-scope=“scope”**就可以了 2、使用时在 **v-model=“scope.row.字段”**就可以把后端返回的开关数据展示在表格中 二、调接口，修改开关数据 给el-waitch加上hcange事件 在methods中写上方法，去调接口 方法名(e,row,index) //e返回状态true或false，row当前行数据，index下标 下面附上代码 <!-- 表格 -->
【Vue】Element Plus和Element UI中插槽使用
SqlloveSyn的博客
06-06 1万+
今天和大家讲一下Element Plus和Element UI这两个组件库中表格的插槽使用方法，一般情况下vue2使用Element UI这个组件库，表格组件的插槽的话一般都是使用v-slot，而vue3使用Element Plus组件库，表格组件中插槽一般为#default，下面就来讲一下这两个。以上就是本章的全部内容，自己总结的，可能想法会有不同之处，希望能够帮助到您。
vue+elementui实现数据表格增删改操作纯前端
cxf_L的博客
11-15 1473
vue+elementui实现数据表格增删改操作纯前端
基于Element Plus二次封装的表格组件中添加插槽-实现内容自定义
alice9999999的博客
08-07 5113
element表格中具名插槽
关于el-main里的router-view跳转显示的一些逻辑
weixin_54682264的博客
05-18 757
关于el-main里的router-view跳转显示的图解~
element UI Form表单 input框.在数据回显之后值无法修改!
热门推荐
zhaluo_dehezi的博客
08-16 1万+
最近在写一个基于vue的前端;采用的elementUI框架; 场景: 编辑table[表格]中的某一行,在数据回显之后.发现 input 输入框无法修改 原因: 为了避免数据有缓存 在写代码的时候 将 定义好的 form 置为空.结果from 中定义的属性丢失 data(){ return { form: { name: ...
element的el-form表单数据回显后无法编辑修改
qq_30434271的博客
01-20 3908
这个问题真的很神奇，先贴上解决办法： _this.model = JSON.parse(JSON.stringify(_this.model)); 其他代码不用动，瞬间解决！
element ui watch el-input赋值之后无法删除或修改
emmmmmmm__的博客
11-29 1922
今天在开发过程中偶然返现这个小问题：watch监听父组件传过来的值并给el-input赋值 之后发现无法修改input得值 需要在input里添加 @input="change($event)"然后在methods里写上以下方法就ok了。
vue-element-admin 与数据库对接，数据显示在前台
06-09
要使 Vue-Element-Admin 与数据库对接，需要使用后端框架进行开发，例如使用 Spring Boot 或 Node.js 等。下面以 Spring Boot 为例进行说明： 1. 首先，需要在 Spring Boot 中配置数据库相关信息，例如数据库类型、连接地址、用户名、密码等。可以使用 Spring Boot 提供的配置文件进行配置。 2. 在 Spring Boot 中创建 DAO 层，用于与数据库进行交互。可以使用 MyBatis 或 JPA 等框架进行开发。 3. 在 DAO 层中定义对数据库的操作方法，例如查询、插入、更新、删除等。 4. 在 Spring Boot 中创建 Service 层，用于处理业务逻辑，并调用 DAO 层进行数据操作。 5. 在 Spring Boot 中创建 Controller 层，用于处理前端请求，并调用 Service 层进行业务处理。 6. 在 Vue-Element-Admin 中创建前端页面，使用 Element UI 组件库进行开发，并通过 AJAX 请求调用后端接口获取数据。 7. 在 Vue-Element-Admin 中使用 Vuex 进行状态管理，将后端返回的数据存储在状态中，并在页面中进行显示。 以上是大致的开发流程，需要根据具体的需求和技术栈进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值