iView 實現可編輯表格

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