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"> ...
随机推荐
- windows运行xcopy计划任务 结果是0x4解决方案
近几天发现一直好好的数据备份计划任务一直返回0x4失败,直接执行bat又是正常的. bat命令中使用的是xcopy,到处找方案没解决. 今天意外在使用另一个命令时,发现提示:网络连接数据超过最大值. ...
- (app笔记)Memory Fill内存填充
Memory Fill 是实现app内存填充工具(运行内存,物理内存,网络空间内存) Used:已用内存 filled:未回收内存 Free:自由内存 1.Ram(Total Ram):手机运行内存 ...
- mysql函数实现oracle的序列
1.创建一张伪序列表 CREATE TABLE sequence ( seq_name VARCHAR (50) NOT NULL,-- 序列名称 current_val INT NOT NULL,- ...
- jenkins-构建触发器之定时构建和轮询 SCM
前言 最近搭建自动化框架,跑自动化用例每次都得用手工点击构建任务,我们希望能每天固定时间跑,这样就不用管了,坐等收测试报告结果就行 定时构建语法 五颗星,中间用空格隔开 * * * * * 第一颗*表 ...
- CAM更改起始直径为直径
Session* theSession = Session::GetSession(); Part* workPart(theSession->Parts()->Work()); UI* ...
- 教你快速理解Linux虚拟化网络的全脉络,正确配置网络联通性。
https://www.bilibili.com/video/BV1iy4y177f4?p=12 实用的干货快先码起来,说不定以后会用到哟
- 关于.net core连接数据库字符串加密查询 (DES加密)
des加密获取的乱码是相对一致的 所以只需要获取到加密乱码在api后台解密就好 1.创建一个控制台用来获取加密后的乱码 using System; using System.Collections. ...
- Python-numpy基本用法
import numpy as np import numpy as np #导入numpy库 _version_显示版本号 show_config() 显示配置文件 print(np.__versi ...
- Python-闭包(Closure)
一.认识闭包 有时候需要在函数外部得到函数内部的局部变量,但是由于Python作用域的关系,这一点是无法实现的. def f(): n = 22 print(n) #NameError:name 'n ...
- RocketMQ 如何保证消息不丢失,重复消费
RocketMQ 如何保证消息不丢失 Producer 提供SYNC的发送消息方式,等待broker处理结果. 发送消息如果失败或者超时,则重新发送. // 同步发送消息,如果5秒内没有发送成功,则重 ...