create at：2019-02-20
组件
<i-table highlight-row ref=”currentRowTable” :columns=”columns” :data=”tableData”></i-table>
实现方式：
记录当前需要编辑的列的 id，默认为空
需要编辑的列与当前需要编辑的 id 进行匹配，成功则将该列渲染为包含 input 标签组件，并绑定 input 事件
数据处理
export default {
data () {
return {
currentId: ”,
currentScore: ”,
columns: [
{title: ‘ 名称 ’, key: ‘name’, align: ‘center’},
{
title: ‘ 班级 ’,
align: ‘center’,
render: (h, p) => {
const {id, score} = p.row
const inp = h(‘input’, {
style: {
width: ‘30%’,
padding: ‘4px 2px’,
borderRadius: ‘4px’,
border: ‘1px solid #e9eaec’,
textAlign: ‘center’
},
attrs: {
maxlength: 16
},
domProps: {
value: score
},
on: {
input: (event) => {
this.currentScore = event.target.value
}
}
})
return this.currentId === p.row.id ? inp : h(‘span’, score)
}
},
{
title: ‘ 操作 ’,
align: ‘center’,
render: (h, p) => {
const {currentId} = this
const {id} = p.row
const btnEdit = h(‘i-button’, {
on: {
click: () => {
this.currentId = id
}
}
}, ‘ 编辑 ’)
const btnSaveCancel = [
h(‘i-button’, {
on: {
click: () => {
this.handleSave(id)
}
}
}, ‘ 保存 ’),
h(‘i-button’, {
on: {
click: () => {
this.currentId = ”
this.currentScore = ”
}
}
}, ‘ 取消 ’)]
return currentId === id ? h(‘div’, btnSaveCancel) : btnEdit
}
}
],
tableData: [
{id: 1, name: 1, score: 1},
{id: 2, name: 2, score: 2}]
}
},
methods: {
handleSave (id) {
const {currentScore, tableData} = this
this.tableData = tableData.map(v => {
return v.id === id ? {…v, score: currentScore} : v
})
this.currentId = ”
this.currentScore = ”
}
}
}
注意：如果采用的是在 head 标签中引入 iView，该方法在项目中会失效；通过编译开发的项目可行；
若有问题请指正 Github blog issues