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指標(biāo)', key: 'target' },{ width: 140, align: 'center', title: '月度權(quán)重(%)', key: 'weight' },{ winWidth: 80, align: 'center', title: '考核結(jié)果', slot: 'result' },{ winWidth: 80, align: 'center', title: '備注', slot: 'remark' },],datalist: [{ target: '指標(biāo)1', weight: '10', result: '', remark: '', },{ target: '指標(biāo)2', weight: '20', result: '', remark: '', },{ target: '指標(biāo)3', weight: '30', result: '', remark: '', },{ target: '指標(biāo)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指標(biāo)', key: 'target' },{ width: 140, align: 'center', title: '月度權(quán)重(%)', key: 'weight' },{ winWidth: 80, align: 'center', title: '考核結(jié)果', 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: '指標(biāo)1', weight: '10', result: '', remark: '', },{ target: '指標(biāo)2', weight: '20', result: '', remark: '', },{ target: '指標(biāo)3', weight: '30', result: '', remark: '', },{ target: '指標(biāo)4', weight: '40', result: '', remark: '', },],tempDatalist: []} }, created () {this.tempDatalist = cloneObj(this.datalist) }

?

cloneObj：

// 克隆對(duì)象 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 }

?

轉(zhuǎn)載于:https://www.cnblogs.com/likwin/p/10572596.html

總結(jié)

以上是生活随笔為你收集整理的【 iview 实践指南】之如何优雅地在Table中嵌套Input（代码篇）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。