vue如何实现即点即改

最新推荐文章于 2024-05-23 13:27:05 发布
最新推荐文章于 2024-05-23 13:27:05 发布
阅读量226 收藏 1
点赞数
分类专栏： vue 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36381718/article/details/115020339
版权

vue即点即改

视图部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
        @import url("//unpkg.com/element-plus/lib/theme-chalk/index.css");
    </style>
</head>
<body>
<script src="//unpkg.com/vue@next"></script>
<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
<div id="app">
    <el-button type="text" @click="dialogFormVisible = true">添加</el-button>

    <el-dialog title="添加" v-model="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="用户名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" :label-width="formLabelWidth">
                <el-input v-model="form.tel" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="sub">确 定</el-button>
    </span>
        </template>
    </el-dialog>

    <el-dialog title="修改" v-model="updateFormVisible">
        <el-form :model="form">
            <el-form-item label="用户名称" :label-width="formLabelWidth">
                <el-input v-model="editForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" :label-width="formLabelWidth">
                <el-input v-model="editForm.tel" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
    <span class="dialog-footer">
      <el-button @click="updateFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="updateform">确 定</el-button>
    </span>
        </template>
    </el-dialog>

    <el-table
            :data="tableData"
            style="width: 100%;align-items: center">
        <el-table-column
                prop="id"
                label="ID"
                width="180">
        </el-table-column>
        <el-table-column
                prop="username"
                label="姓名"
                width="180">
            <template #default="scope">
                <div v-show="arr.indexOf(scope.row.id) == -1" @click="arr.push(scope.row.id)"  >
                    {{ scope.row.username }}
                </div>
                <div v-show="arr.indexOf(scope.row.id) != -1">
                    <el-input size="small" v-model="scope.row.username" @blur="updateUsername(scope.row.id,scope.row.username)"
                    ></el-input>
                </div>
            </template>
        </el-table-column>
        <el-table-column
                prop="tel"
                label="手机号码"
                width="180">
        </el-table-column>
        <el-table-column>
                fixed="right"
                label="操作"
                width="100">
            <template #default="scope">
                <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
                <el-button type="text" size="small" @click="edit(scope.row)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
</body>
</html>

js部分

<script>
    var Main = {
            data() {
                return {
                    arr:[],
                    updateFormVisible:false,
                    dialogFormVisible: false,
                    editForm:{
                        id:'',
                        name: '',
                        tel: '',
                        pageSize:5
                    },
                    form: {
                        date1: '',
                        date2: '',
                        delivery: false,
                        type: [],
                        resource: '',
                        desc: ''
                    },
                    formLabelWidth: '120px',
                    tableData: []
                }
            },
            // 初始化方法
            mounted(){
                this.table();
            },
            methods: {
                handleEdit(index, row) {
                    console.log(index, row);
                },
                handleDelete(index, row) {
                    console.log(index, row);
                },
                table(){
                    axios
                        .get('indexData')
                        .then(res => (this.tableData = res.data.data))
                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                },
                sub(){
                    // 关闭表单
                    this.dialogFormVisible = false;
                    // 异步请求
                    axios
                        .post('save',{name:this.form.name,tel:this.form.tel})
                        .then(res => {
                            if (res.data.code == 200){
                                this.table()
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                });
                            }else {
                                this.$message({
                                    type: 'error',
                                    message: '添加失败!'
                                });
                            }
                        })
                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                },
                edit(data){
                    this.updateFormVisible = true
                    this.editForm.name = data.username
                    this.editForm.tel = data.tel
                    this.editForm.id = data.id
                },
                updateform() {
                    // 关闭表单
                    this.updateFormVisible = false;
                    // 异步请求
                    axios
                        .post('update',{id:this.editForm.id,username:this.editForm.name,tel:this.editForm.tel})
                        .then(res => {
                            if (res.data.code == 200){
                                this.table()
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                });
                            }else {
                                this.$message({
                                    type: 'error',
                                    message: '修改失败!'
                                });
                            }
                        })
                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                },
                del(id){
                    axios
                        .get('delete?id='+id)
                        .then(res => {
                            if (res.data.code == 200){
                                this.table()
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            }else {
                                this.$message({
                                    type: 'error',
                                    message: '删除失败!'
                                });
                            }
                        })
                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                },
                updateUsername(id,username){
                    axios
                        .post('updateUsername',{id:id,username:username})
                        .then(res => {
                            if (res.data.code == 200){
                                this.arr = [];
                            }else {
                                this.$message({
                                    type: 'error',
                                    message: '修改失败!'
                                });
                            }
                        })
                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                }
            }
        }
    ;const app = Vue.createApp(Main);
    app.use(ElementPlus);
    app.mount("#app")
</script>
随缘哇
关注
专栏目录
vue实现 修改密码
lwg112233的博客
02-05 5037
1.定义一个对话框并绑定数据 <el-dialog title="重置密码" :visible.sync="ResetPwdDialogVisible" width="40%" @close="resetForm('pwdForm')"> <el-form :model="resetPwdForm" status-icon :rules="resetPwdRules
即点即改
郝云博客
04-18 2964
">                $(document).on('click','.num',function(){         var id=$(this).attr('id');         var _this=$(this);         var new_val=$(this).html();         _this.parent().html("");
tp5 实现即点即改
猪年大吉的博客
04-08 404
功能描述： 需求：利用即点即改完成用户名修改 知识点：ajax javascript jquery 点击名称弹出一个文本框，并且将文本框中的值显示出来，直接通过onblur 失去焦点事件，与此同时利用ajax将id 和 用户名的字段传到控制器，在控制器的基础上完成修改工作，成功返回参数1否则失败返回参数2； 第一步： <p class="content" onclic...
jq 即点即改
baiyawen1的博客
07-10 428
 思路： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; 新问题目&amp
基于SpringBoot+Vue实现增删改查和分页查询DEMO（源码+数据库)
04-17
springboot项目,基于SpringBoot+Vue实现增删改查分页DEMO（源码+数据库) 技术栈 数据库：MySQL 后端框架：SpringBoot+Spring Data JPA 前端框架：Vue-ElementUI
Vs Code Vue实现增删改查
01-07
通过以上步骤，你可以在Vs Code中利用Vue实现一个完整的增删改查功能。在实际开发中，还可以结合其他插件和工具，如Prettier进行代码格式化，Eslint进行代码规范检查，提高开发效率和代码质量。不断学习和实践，将使...
利用vue3+ts实现管理后台（增删改查）
01-18
简单的管理后台基本上就是数据的增删改查。主要就是 列表 + form 表单。每个页面的逻辑基本上都相同。不同的地方就是每个页面需要调用的具体 API 及参数。 以前 vue2 的时候最简单的做法是写出来一个页面的逻辑，...
前后端 spring+vue 实现后台系统的增删改查
07-17
注意啊，这个项目只能实现增删改查功能，以及基本的分页功能，之后的登录，注册跳转到后台还有点问题(尽情期待)
vue 数组中那些是值改变就刷新即响应式
jjw_zyfx的博客
10-04 265
第一种：push方法 以上的几种方式除了直接通过索引方式修改不了，其他的方式都能引起响应式
vue修改值之后 会重新创建vue对象 即重新给网页复制
weixin_30335575的博客
05-02 218
转载于:https://www.cnblogs.com/classmethond/p/10801889.html
Vue 父组件使用refs来直接访问和修改子组件的属性或调用子组件的方法
最新发布
chengmin123456789的博客
05-23 1072
首先，在子组件中定义你想要父组件能够修改或调用的属性或方法。: 在父组件的方法中使用refs修改子组件数据然后，在父组件的JavaScript部分，你可以通过this.$refs来访问子组件的实例，并调用其方法或修改其属性。: 在父组件模板中绑定ref在父组件的模板中，你需要给子组件添加一个ref属性，这样你就可以通过这个引用访问到子组件的实例。直接修改子组件的data属性虽然可以工作，但通常推荐使用公开的方法来改变状态，以保持组件的封装性和可维护性。: 在子组件中定义要被修改的属性或方法。
Vue基础学习
wwwbaiduccom的博客
02-03 112
Vue基础使用 1、Vue简介 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的JavaScript框架。封装了原生的DOM操作，无需进行任何手动的DOM编码即可完成页面数据的渲染 2、MVVM模式 MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。就是通过ViewModel把Model和View关联起来，ViewModel负责把Model的数据同步到Vie
每日记录 2016-4-28
weixin_33778778的博客
04-28 135
HTML5 一、Meta标签中的format-detection属性及其含义 意为：格式检测 或许你会有这样的经历：当你在制作手机端的页面中，点击了没有加任何链接的格式的数字时，这时手机会进行自动拔号提示操作！ 1、禁止自动拨号 <meta name="format-detection" content="telephone=no"> 2、禁止跳转邮箱 <meta ...
vue中怎么点击修改文字_vue中如何实时修改输入的值
weixin_39657521的博客
12-19 1841
vue中如何实时修改输入的值经常看到需要对用户输入的值进行实时修改，有时是需要修改为指定的展示内容，有时候是用来校验，禁止用户输入非法数据，总之是一个常见的需求吧，只是自己一直没有特意去关注。思来想去还是有必要了解一下。操作方法一直听说各种方式，记得最深的便是利用computed的计算属性，通过set 和 get 来进行修改，其他的也有所见闻。先实现一种，再进行其他其他深究，以及使用好坏。vue文...
vue去掉严格开发，即去掉vue-cli安装时的eslint或者修改配置
热门推荐
开心大表哥
09-12 2万+
vue去掉严格开发，即去掉vue-cli安装时的eslint 1.vue-cli书写规范（主要是js规范） a、逗号、冒号后面要加空格 b、不能使用双引号，一律使用单引号 webpack的语法检查eslint，即安装项目时我选择了安装eslint（http://blog.csdn.net/a419419/article/details/77938751） 2.那么只需要删掉 bu
el-table点击单元格自动聚焦可编辑，且失去焦点即修改成功的实现方法
宝贝QY的博客
01-14 1万+
如何让表格单击可修改单元格，失去焦点即保存修改内容
vue 插槽的作用,用插槽slot-scope获取表格中的数据
前端程序员、项目经理、人工智能博主
12-04 5458
这里我用了elementui的表格组件去做表格,如图 我在编辑和删除的组件用template去包裹，然后在这个标签去写上slot-scope="scope" 然后在需要点击的按钮去添加一个@click事件，在方法中去写上两个参数，第一个参数是当前点击按钮获取的表格在第几行的id,第二个参数是获取表格中当前行的全部参数 如图： 我们看看打印出来的数据 现在我们是拿到了当前行的全部数据,大功告成 ...
vue实现双击div修改
04-25
Vue 实现双击 div 修改内容的原理是通过绑定双击事件，在事件处理函数中切换当前 div 的显示状态，并使用 v-model 指令将 div 内容与一个响应式数据绑定。此时用户可以直接在 div 内编辑内容，并通过相应的事件处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值