iview 版本 3.2.0 +
template 部分:

<template><div><Table class="data-manage-table"border:disabled-hover="true":columns="columns":data="datalist"><template slot-scope="{ row, index }" slot="result"><Input v-model="tempDatalist[index]['result']"/></template><template slot-scope="{ row, index }" slot="remark"><Input v-model="tempDatalist[index]['remark']"/></template></Table></div>
</template>

data 部分:

data () {return {columns: [{ winWidth: 120, align: 'center', title: 'KPI指标', key: 'target' },{ width: 140, align: 'center', title: '月度权重(%)', key: 'weight' },{ winWidth: 80, align: 'center', title: '考核结果', slot: 'result' },{ winWidth: 80, align: 'center', title: '备注', slot: 'remark' },],datalist: [{ target: '指标1', weight: '10', result: '', remark: '', },{ target: '指标2', weight: '20', result: '', remark: '', },{ target: '指标3', weight: '30', result: '', remark: '', },{ target: '指标4', weight: '40', result: '', remark: '', },],tempDatalist: []}
},
created () {this.tempDatalist = cloneObj(this.datalist)
}

iview 版本 3.2.0 -

template 部分:

<template><div><Table class="data-manage-table"border:disabled-hover="true":columns="columns":data="datalist"></Table></div>
</template>

data 部分:

data () { let vm = this;return {columns: [{ winWidth: 120, align: 'center', title: 'KPI指标', key: 'target' },{ width: 140, align: 'center', title: '月度权重(%)', key: 'weight' },{ winWidth: 80, align: 'center', title: '考核结果', key: 'result',render: (h, params) => {return h('div', [h('Input', {props: {value: vm.datalist[params.index].result},on: {input: function (event) {vm.$set(vm.tempDatalist[params.index], 'result', event)}}})])}},{ winWidth: 80, align: 'center', title: '备注', key: 'remark',render: (h, params) => {return h('div', [h('Input', {props: {value: vm.datalist[params.index].remark},on: {input: function (event) {vm.$set(vm.tempDatalist[params.index], 'remark', event)}}})])}},],datalist: [{ target: '指标1', weight: '10', result: '', remark: '', },{ target: '指标2', weight: '20', result: '', remark: '', },{ target: '指标3', weight: '30', result: '', remark: '', },{ target: '指标4', weight: '40', result: '', remark: '', },],tempDatalist: []}
},
created () {this.tempDatalist = cloneObj(this.datalist)
}

cloneObj:

// 克隆对象
export const cloneObj = function (obj) {let oif (typeof obj === 'object') {if (obj === null) {o = null} else {if (obj instanceof Array) {o = []for (let i = 0, len = obj.length; i < len; i++) {o.push(cloneObj(obj[i]))}} else {o = {}for (let j in obj) {o[j] = cloneObj(obj[j])}}}} else {o = obj}return o
}

转载于:https://www.cnblogs.com/likwin/p/10572596.html

【 iview 实践指南】之如何优雅地在Table中嵌套Input(代码篇)相关推荐

  1. Python机器学习实践指南pdf (中文版带书签)、原书代码、数据集

    Python机器学习实践指南 目 录  第1章Python机器学习的生态系统 1  1.1 数据科学/机器学习的工作  流程 2  1.1.1 获取 2  1.1.2 检查和探索 2  1.1.3 清 ...

  2. 《WebAssembly 权威指南》(6)在浏览器中运行遗留代码

    译者注:这篇文章是<WebAssembly 权威指南>一书的第六章,介绍了如何使用 WebAssembly 在浏览器中运行遗留代码,即已经存在的 C/C++ 代码库.文章以一个实际的例子, ...

  3. 优雅的在latex中插入MATLAB代码 | 解决MATLAB代码中文乱码问题

    我们要使用的核心宏包是 listings 和 matlab-prettifier.其中 listings 是为了插入代码,matlab-prettifier 提供了很好的配色方案. 最小工作示例如下: ...

  4. iView UI库解决基于vue.js解决table中this的指向问题

    this指向全局变量data的数据 html <i-table ref="tables" editable searchable search-place="top ...

  5. 如何优雅的在Word中插入格式化代码

    需要用到一个格式化网站,步骤如下: 打开http://www.planetb.ca/syntax-highlight-word网站,如下图: 将你的代码复制进去,选择编译语言,点击"Show ...

  6. 《OpenGL ES应用开发实践指南:Android卷》—— 2.2 不要从头开始

    本节书摘来自华章出版社<OpenGL ES应用开发实践指南:Android卷>一 书中的第2章,第2.2节,作者:(美)Kevin Brothaler ,更多章节内容可以访问云栖社区&qu ...

  7. 《妥协的完美主义:优秀产品经理的实践指南(卷二)》一1.2 交互设计不是横空出世...

    本节书摘来自异步社区<妥协的完美主义:优秀产品经理的实践指南(卷二)>一书中的第1章,第1.2节,作者 陈洁,更多章节内容可以访问云栖社区"异步社区"公众号查看 1.2 ...

  8. 《妥协的完美主义—优秀产品经理的实践指南(卷一)》一2.4 分工常见的错误...

    本节书摘来自异步社区<妥协的完美主义-优秀产品经理的实践指南(卷一)>一书中的第2章,第2.4节,作者 陈洁,更多章节内容可以访问云栖社区"异步社区"公众号查看 2.4 ...

  9. 《OpenGL ES应用开发实践指南:Android卷》—— 3.7 练习

    本节书摘来自华章出版社<OpenGL ES应用开发实践指南:Android卷>一 书中的第3章,第3.7节,作者:(美)Kevin Brothaler ,更多章节内容可以访问云栖社区&qu ...

最新文章

  1. Realm的简单使用
  2. MIT自动驾驶船下水!可乘坐5人,阿姆斯特丹运河航行3小时误差不到0.17米
  3. 浏览器左上角的网站图标
  4. String.charAT的运用
  5. 主流or消亡?2016年大数据发展将何去何从
  6. Cactiz中文版安装使用
  7. GolVe向量化做文本分类
  8. Ext.chart.Chart 显示图标 -- 本地数据
  9. Docker容器图形界面显示(运行GUI软件)的配置方法
  10. linux日志关键词高亮,【转载】Linux使用tailf高亮显示关键字
  11. BetterZip 4.2.4 激活版下载安装– Mac上最快速的压缩工具
  12. 微服务--API网关
  13. 计算机word无法打开,电脑中office文件无法打开的三种解决方法
  14. dfuse 现在提供持币人的完整视图及其历史
  15. mysql1062错误 gtid_Mysql基于gtid的主从复制错误:1062
  16. EXCEL如何批量调整图片大小?
  17. Python爬虫爬取表情包
  18. Android录音,PCM音频数据打包成AAC
  19. Node.js——npm_包的概念与操作
  20. 上一代ERP是什么?

热门文章

  1. Airbnb React/JSX 编码规范
  2. It's a start!
  3. 使用公用表表达式的递归查询
  4. 人的幸福感取决于什么
  5. 推荐系列文章:《DotText源码阅读》
  6. Rust 编程 前言
  7. windows下apache+php+mysql 环境配置方法
  8. ibator1.2.2
  9. 网吧电影服务器解决方案完全指南(一)
  10. 搞了个30天学习量化的数据资料,可以bt做全球。数据链接白送