Introduction to the method of implementing editable tables in iView (with code)

This article brings you an introduction to the method of implementing editable tables in iView (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Component

<i-table highlight-row ref="currentRowTable" :columns="columns" :data="tableData"></i-table>

Implementation method:

• Record the id of the column that currently needs to be edited, the default is empty

• The column that needs to be edited matches the current ID that needs to be edited. If successful, the column will be rendered as an input tag component and bound to the input event

Data processing

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 = ''
        }
    }
}

Note: If iView is introduced in the head tag, this method will be invalid in the project; projects developed through compilation are feasible;

The above is the detailed content of Introduction to the method of implementing editable tables in iView (with code). For more information, please follow other related articles on the PHP Chinese website!