add页面中传入模态框中输入的数据

实现的页面

 

1、模态框是实现就看医疗的项目,实现模态框中的传值问题

 

 

//模态框中的数据添加
       
       $('#addSpecification').click(function(){
    	 //获取输入框中的值
       	var num= $("#numerical").val();
		      if (num != null) {
       				var html = "";
       				html +='<tr>'
       					+'<td>'
       				+'<input type="checkbox" class="i-checks" name="ids" >'
       				+'</td>'
       				+'<td>'+num+'</td>'
                       +'<td>'
                       +'<a class="btn btn-info btn-xs btn-edit-loippi"   >'
                       +'<i class="fa fa-paste" ></i> ${message("admin.common.edit")} </a>'
			            +'<a class="btn btn-danger btn-xs btn-delete-loippi del-space"  onclick="delete_tr(this);" >'
			            +'<i class="fa fa-trash " ></i> ${message("admin.common.delete")} </a>'
			            +'</td>'
			            +'</tr>'
       				$("#t-body").append(html);
       				
       			}
    	   
       })

 2、实现的是模态框中数据提交后input输入框就刷新

$('#myModal').click(function(){
        	$('#numerical').val('');
        });

 

 

  • 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、付费专栏及课程。

余额充值