打开新增、修改模态框

打开新增、修改模态框

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术:HTML CSS JavaScript

作者:爱吃章鱼烧的ChrisTina贺

撰写时间:2021/08/28

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Script:

保存新增:

  1. 获取页面数据:

 

  1. 函数构造、打开加载层:

 

  1. ajax发送请求,控制器链接,关闭加载层:

 

保存新增控制器:

  1. 实例化,再去空格,数据验证手机号最好使用正则表达式:

public ActionResult InserUser(S_User user)

        {

            ReturnJson returnJson = new ReturnJson();

            //去空格

            user.userName = user.userName.Trim();

            //数据验证

            if (!string.IsNullOrEmpty(user.userName))<

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,针对你的问题,我进行如下回答: 1. 新增模态框功能实现: (1)首先,在你的vue组件中,需要定义一个状态变量,用来判断是否显示新增模态框: ``` // 定义状态变量 data() { return { showAddModal: false // 是否显示新增模态框 } } ``` (2)在模板中,使用element-ui的el-dialog组件来展示新增模态框: ``` <template> <div> <!-- 展示新增按钮 --> <el-button @click="showAddModal = true">新增</el-button> <!-- 定义新增模态框 --> <el-dialog title="新增数据" :visible.sync="showAddModal" width="30%"> <!-- 在这里放置新增表单 --> <!-- 定义确认按钮 --> <span slot="footer" class="dialog-footer"> <el-button @click="showAddModal = false">取消</el-button> <el-button type="primary" @click="onAdd">确认</el-button> </span> </el-dialog> </div> </template> ``` (3)在onAdd方法中处理新增逻辑,并在成功后关闭新增模态框: ``` methods: { onAdd() { // 处理新增逻辑 // ... // 关闭新增模态框 this.showAddModal = false; } } ``` 2. 删除功能实现: (1)在vue组件中定义一个列表数据: ``` // 定义状态变量 data() { return { listData: [ { id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '王五' } ] } } ``` (2)在模板中,使用element-ui的el-table组件来展示列表,并添加删除按钮: ``` <template> <div> <!-- 定义数据表格 --> <el-table :data="listData"> <!-- 定义列 --> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column label="操作"> <!-- 定义删除按钮 --> <template slot-scope="scope"> <el-button type="danger" @click="onDelete(scope.$index)">删除</el-button> </template> </el-table-column> </el-table> </div> </template> ``` (3)在onDelete方法中处理删除逻辑: ``` methods: { onDelete(index) { // 获取待删除数据的id const id = this.listData[index].id; // 处理删除逻辑 // ... // 从列表中删除该数据 this.listData.splice(index, 1); } } ``` 以上是vue+element模态框新增模态框和删除功能的实现方法,希望对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值