本文代碼適合iView 3.2.0以下的版本來實現可編輯表格，iView 3.2.0版本以上支持 slot-scope 寫法，可以用 slot-scope 來實現可編輯表格，詳見https://run.iviewui.com/50ahQHrs。
組件
<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('p', 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，該方法在項目中會失效。
想更好理解此段代碼，要格外留意render 函數的return部分。
