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"> ...
随机推荐
- Cause: org.apache.ibatis.builder.BuilderException: Error creating document instance. Cause: org.xml.sax.SAXParseException; lineNumber: 49; columnNumber: 17; 元素类型为 "configuration" 的内容必须匹配 "
问题现象: Cause: org.apache.ibatis.builder.BuilderException: Error creating document instance. Cause: o ...
- Python 闭包,生成式,推导式
闭包概念 闭包,又称闭包函数或者闭合函数,其实和前面讲的嵌套函数类似, 不同之处在于,闭包中外部函数返回的不是一个具体的值,而是一个函数.一般情况下,返回的函数会赋值给一个变量,这个变量可以在后面被继 ...
- oracle收缩表和表空间
oracle shrink space收缩表 segment shrink分为两个阶段: 1).数据重组(compact):通过一系列insert.delete操作,将数据尽量排列在段的前面.在这个过 ...
- CF生化全模式全装备单机版安装教程(基于CSOL)
喜欢玩CF单机版的朋友平时应该接触过一些基于CS1.6的单机版,但是这种版本有些特性就是:改了分辨率就容易进不去游戏:变为幽灵时被枪射击时会出现视角乱晃的情况:游戏过程中场景宏大变数多时容易突然退出回 ...
- wget 和 curl的区别
原文 https://www.codenong.com/s1190000022301195/ https://geek-docs.com/linux/linux-ask-answer/differen ...
- Flask + PyInstaller = 客户端
Flask + PyInstaller = 客户端 有些特殊情况需要开发客户端,Python有几个常用的几个GUI框架,如 PyQt.wxPython等 但使用这些GUI框架往往界面比较丑,而且GUI ...
- 蓝牙mesh组网实践(节点功能介绍)
目录 未配网设备在配好网,被纳入网络后,可称之为节点. 蓝牙mesh网络中,节点可以有选择地支持四大功能--朋友.低功耗.转发.代理功能,可以复用多个功能(由于单片机硬件限制,ch582除了复用转发功 ...
- CTreeView和CTreeCtrl的使用方法(转)
(一)树控制的主要功能 树控制和视(Tree Control&View)主要用来显示具有一定层次结构的数据项,如资源管理器中的磁盘目录等,以供用户在其中进行各种选择.树控制中的每个数据项包括数 ...
- @Async 注解的使用
1.@Async介绍 在Spring中,基于@Async标注的方法,称之为异步方法:这些方法将在执行的时候,将会在独立的线程中被执行,调用者无需等待它的完成,即可继续其他的操作 例如, 在某个调用中, ...
- ssh登录、scp传送文件
一.ssh 1.远程登陆服务器 ssh user@hostname user: 用户名hostname: IP地址或域名 第一次登录时会提示:The authenticity of host '123 ...