【 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
}