iview table添加input框,且校验
方法一 render渲染
{
title: "用户名",
key: "stockPrice",
render: (h, params) => {
return h("Form", [
h("Input", {
style: {
marginLeft: "4px",
width: "150px"
},
props: {
type: "text",
value: params.row.stockPrice //使用data中的key
},
on: {
input: event => {
this.data1[params.index].stockPrice= event;//双向绑定
console.log(event,this.data1);
}
}
}),
]);
}
},
方法二 templete模板
<Table
:columns="columns1"
:data="data1"
style="margin-bottom: 20px;"
v-if="userForm.setUp == '否'"
ref="table"
>
<template slot-scope="{ row, index }" slot="name">
<Form :model="row">
<FormItem
prop="name"
:rules="{required:true , message: '必填项', trigger: 'change'}"
class="formRule"
>
<Input type="text" v-model="row.name" style="width:120px"/>
</FormItem>
</Form>
</template>
</template>
</Table> columns1 定义 " slot="name" data1中定义name
iview table添加input框,且校验的更多相关文章
- h5 页面点击添加添加input框
h5 页面点击添加添加input框 前段时间有个需求,页面要能点击添加按钮控制input框的个数,当时感觉有点难,就没做,这两个又遇到了,没办法写了个简单的 效果图,加号增加,减号减少 直接上代码, ...
- iview Table表格单选框互斥
表格中添加单选框,并且互斥 首先带data中定义 currentid : 0 :表示默认不选中 { title: "名称", key: "name", re ...
- js修改页面动态添加input框显示与按钮可编辑
1. <%@ page language="java" contentType="text/html;charset=UTF-8"%> <%@ ...
- el-mement表单校验-校验失败时自动聚焦到失败的input框
思路:调用input的focus()事件,聚焦到失败的input框上, 问题:如何获取失败的input框,结合element的校验方法,查看可以提供入口的地方 调用this.$refs[formNam ...
- 类似input框内最右边添加图标,有清空功能
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 让单选input框,不在被选中,添加disabled即可。输入框input的一些技巧
1.让单选input框,不在被选中,添加disabled即可 2.input的file文件对象的清空,只需要input.val("");就可以了.
- element 表单校验失败自动聚焦到失败的input框
1.在对应的input框上添加ref属性,直接根据ref就可精确地获取到元素 <el-form-item label="课程名称" :label-width="fo ...
- 根据select不同的选项实现相应input框添加项的显示
实现效果: @1.单击包时,显示包时的添加项 @2.单击包里程,显示包里程的添加项 二 代码实现: 给select添加change事件 获取当前select的value 根据value判断对象显示其 ...
- 用JS添加文本框案例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js动态给table添加/删除tr的方法
js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...
随机推荐
- v-if和v-show最重要一点
vif是新建与销毁标签 show是显示与隐藏标签 如果涉及到权限操作的话 必须使用vif 因为vshow中把标签改成display:none的话可以手动改成显示
- 前端如何给bearer token传值
Bearer token是一种常见的身份验证机制,通常用于Web API和其他Web服务.在前端中,Bearer token通常是通过HTTP头(HTTP header)发送的,具体来说是通过&quo ...
- Web Socket 长连接
服务 package com.kinth.basic.timetask.job.donghuan.socket; import java.io.IOException; import java.net ...
- JavaSE——.replace()方法替换内容
package com.zhao.stringtest; public class Test5 { //.replace()方法替换词汇 public static void main(String[ ...
- 以MPU6050为例的硬件IIC的使用
目录 参考调试MPU6050与EEPROM的经验,整合了目标内存/寄存器地址是否为16位的情况,合并了单字节与多字节间的操作,添加了返回值与读写超时功能:硬件IIC的7位从机地址查询方式读写参考代码 ...
- web开发(2): html标签/web语义化
chapter2 html 标签 在sublime中敲入!, 按tab 进行拓展,得到如下框架 <!DOCTYPE html> <html lang="en"&g ...
- vue 中使用 XLSX 和 xlsx-style 实现前端下载Excel表格
import XLSX from "xlsx-style" //ps 需要修改源码:在\node_modules\xlsx-style\dist\cpexcel.js 807行 ...
- MobaXterm汉化版教程
MobaXterm中文版是一款非常好用的远程连接.远程控制软件,它堪称全能终端神器,支持非常多的远程协议 ,如SSH,Telnet,Rsh,Xdmc,RDP,VNC,FTP,SFTP,串口(Seria ...
- open-local部署和使用
Open-Local简介 Open-local 是阿里巴巴开源,由多个组件构成的本地磁盘管理系统,目标是解决当前kubernetes本地存储能力缺失问题. Open-Local包含四大类组件: • S ...
- PHP 静态延迟绑定 static
PHP (self static parent 区别) self调用的方法和属性始终表示当前类的方法和属性 static调用的方法和属性为当前执行的类的方法和属性 parent调用的方法和属性为父类的 ...