方法一 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框,且校验的更多相关文章

  1. h5 页面点击添加添加input框

    h5 页面点击添加添加input框 前段时间有个需求,页面要能点击添加按钮控制input框的个数,当时感觉有点难,就没做,这两个又遇到了,没办法写了个简单的 效果图,加号增加,减号减少 直接上代码, ...

  2. iview Table表格单选框互斥

    表格中添加单选框,并且互斥 首先带data中定义   currentid : 0 :表示默认不选中 { title: "名称", key: "name", re ...

  3. js修改页面动态添加input框显示与按钮可编辑

    1. <%@ page language="java" contentType="text/html;charset=UTF-8"%> <%@ ...

  4. el-mement表单校验-校验失败时自动聚焦到失败的input框

    思路:调用input的focus()事件,聚焦到失败的input框上, 问题:如何获取失败的input框,结合element的校验方法,查看可以提供入口的地方 调用this.$refs[formNam ...

  5. 类似input框内最右边添加图标,有清空功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. 让单选input框,不在被选中,添加disabled即可。输入框input的一些技巧

    1.让单选input框,不在被选中,添加disabled即可 2.input的file文件对象的清空,只需要input.val("");就可以了.

  7. element 表单校验失败自动聚焦到失败的input框

    1.在对应的input框上添加ref属性,直接根据ref就可精确地获取到元素 <el-form-item label="课程名称" :label-width="fo ...

  8. 根据select不同的选项实现相应input框添加项的显示

    实现效果: @1.单击包时,显示包时的添加项 @2.单击包里程,显示包里程的添加项 二  代码实现: 给select添加change事件 获取当前select的value 根据value判断对象显示其 ...

  9. 用JS添加文本框案例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. js动态给table添加/删除tr的方法

    js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...

随机推荐

  1. Oracle备份脚本(数据泵)-Windows平台

    将以下内容根据自己想要备份的库修改后保存为expdp.bat,加入到计划任务中 set NLS_LANG=AMERICAN_AMERICA.AL32UTF8set filename=%date:~0, ...

  2. Wifi Display

    wifi display常用术语 AP:wifi access point Primary Sink: a device that supports rendering video content o ...

  3. linux top 指令各列含义

    Linux 的 top 指令用于显示机器上正在运行的进程的信息.下面是 top 指令各列的含义: PID:进程 ID,用于标识进程. USER:进程所有者的用户名. PR:进程优先级. NI:进程的& ...

  4. Lnmp切换PHP版本

    进入lnmp的安装目录 cd /root/lnmp1.8 执行 ./install.sh mphp 然后选择你要变更的版本

  5. 发誓要学会wepack

    9.9 学习资料: http://webpack.wuhaolin.cn/   <深入浅出Webpack> https://github.com/zshno1/wepack-study w ...

  6. ubuntu安装cuda、cudnn和nvidia-docker

    目录 安装前的工作 要安装的cuda和cudnn版本说明 安装cuda 检查cuda的安装情况 安装cudnn 安装nvidia-docker 在红米book14上的实践 本文参考自Ubuntu18. ...

  7. 课程表及事件提醒app-界面原型设计

    前端设计: 暂定为8个主要界面:程序初始界面.主界面(首页).课表界面."我的"界面.登录界面.注册界面.创建事件界面.新建课表界面 设计思路: 项目结构 三个主要界面 首页: 课 ...

  8. SSB调制与解调(Simulink&Matlab)

    题目:基于Simulink的SSB信号调制与解调仿真 参考文章 一.实验目的与要求 目的:学习SSB信号的调制与解调仿真 要求: 具有MATLAB的仿真结果并附上代码 具有基于Simulink的模块的 ...

  9. BlendCAC: A Smart Contract Enabled Decentralized Capability-Based Access Control Mechanism for the IoT

    摘要 BlendCAC,它是一种分散的.基于联合能力的 AC 机制,可有效保护大规模物联网系统中的设备.服务和信息.引入了基于联合能力的委托模型 (FCDM) 以支持分层和多跳委托.探索了委托授权和撤 ...

  10. Gitbook部署之nodejs踩坑

    title: Gitbook部署之nodejs踩坑 date: 2020-11-06 16:34:30 summary: Gitbook部署和NVM的使用.hexo失效 Gitbook部署之nodej ...