【 iview 实践指南】之如何优雅地在Table中嵌套Input(代码篇)
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(代码篇)相关推荐
- Python机器学习实践指南pdf (中文版带书签)、原书代码、数据集
Python机器学习实践指南 目 录 第1章Python机器学习的生态系统 1 1.1 数据科学/机器学习的工作 流程 2 1.1.1 获取 2 1.1.2 检查和探索 2 1.1.3 清 ...
- 《WebAssembly 权威指南》(6)在浏览器中运行遗留代码
译者注:这篇文章是<WebAssembly 权威指南>一书的第六章,介绍了如何使用 WebAssembly 在浏览器中运行遗留代码,即已经存在的 C/C++ 代码库.文章以一个实际的例子, ...
- 优雅的在latex中插入MATLAB代码 | 解决MATLAB代码中文乱码问题
我们要使用的核心宏包是 listings 和 matlab-prettifier.其中 listings 是为了插入代码,matlab-prettifier 提供了很好的配色方案. 最小工作示例如下: ...
- iView UI库解决基于vue.js解决table中this的指向问题
this指向全局变量data的数据 html <i-table ref="tables" editable searchable search-place="top ...
- 如何优雅的在Word中插入格式化代码
需要用到一个格式化网站,步骤如下: 打开http://www.planetb.ca/syntax-highlight-word网站,如下图: 将你的代码复制进去,选择编译语言,点击"Show ...
- 《OpenGL ES应用开发实践指南:Android卷》—— 2.2 不要从头开始
本节书摘来自华章出版社<OpenGL ES应用开发实践指南:Android卷>一 书中的第2章,第2.2节,作者:(美)Kevin Brothaler ,更多章节内容可以访问云栖社区&qu ...
- 《妥协的完美主义:优秀产品经理的实践指南(卷二)》一1.2 交互设计不是横空出世...
本节书摘来自异步社区<妥协的完美主义:优秀产品经理的实践指南(卷二)>一书中的第1章,第1.2节,作者 陈洁,更多章节内容可以访问云栖社区"异步社区"公众号查看 1.2 ...
- 《妥协的完美主义—优秀产品经理的实践指南(卷一)》一2.4 分工常见的错误...
本节书摘来自异步社区<妥协的完美主义-优秀产品经理的实践指南(卷一)>一书中的第2章,第2.4节,作者 陈洁,更多章节内容可以访问云栖社区"异步社区"公众号查看 2.4 ...
- 《OpenGL ES应用开发实践指南:Android卷》—— 3.7 练习
本节书摘来自华章出版社<OpenGL ES应用开发实践指南:Android卷>一 书中的第3章,第3.7节,作者:(美)Kevin Brothaler ,更多章节内容可以访问云栖社区&qu ...
最新文章
- Realm的简单使用
- MIT自动驾驶船下水!可乘坐5人,阿姆斯特丹运河航行3小时误差不到0.17米
- 浏览器左上角的网站图标
- String.charAT的运用
- 主流or消亡?2016年大数据发展将何去何从
- Cactiz中文版安装使用
- GolVe向量化做文本分类
- Ext.chart.Chart 显示图标 -- 本地数据
- Docker容器图形界面显示(运行GUI软件)的配置方法
- linux日志关键词高亮,【转载】Linux使用tailf高亮显示关键字
- BetterZip 4.2.4 激活版下载安装– Mac上最快速的压缩工具
- 微服务--API网关
- 计算机word无法打开,电脑中office文件无法打开的三种解决方法
- dfuse 现在提供持币人的完整视图及其历史
- mysql1062错误 gtid_Mysql基于gtid的主从复制错误:1062
- EXCEL如何批量调整图片大小?
- Python爬虫爬取表情包
- Android录音,PCM音频数据打包成AAC
- Node.js——npm_包的概念与操作
- 上一代ERP是什么?