這篇文章帶給大家的內容是關於iView實作可編輯表格的方法介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
元件
<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，則方法在專案中會失效；透過編譯開發的專案可行；
以上是iView實作可編輯表格的方法介紹（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
