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.rowconst 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 } = thisconst { id } = p.rowconst 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} = thisthis.tableData = tableData.map(v => {return v.id === id ? { ...v, score: currentScore } : v})this.currentId = ''this.currentScore = ''}} }

注意： 如果采用的是在 head 標簽中引入 iView，該方法在項目中會失效；通過編譯開發的項目可行；

若有問題請指正 Github blog issues

轉載于:https://www.cnblogs.com/he-wei/p/10405132.html

總結

以上是生活随笔為你收集整理的iView 实现可编辑表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。