The implementation of editable table by iView

create at: 2019-02-20

assembly

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

Implementation mode:

  • Record the id of the current column to be edited. It is empty by default
  • The column to be edited matches the id to be edited currently. If it succeeds, the column will be rendered as containing the input tag component and the input event will be bound

data processing

export default {
    data () {
        return {
            currentId: '',
            currentScore: '',
            columns: [
                { title: 'Name', key: 'name', align: 'center' },
                {
                title: 'class',
                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: 'operation',
                align: 'center',
                render: (h, p) => {
                    const { currentId } = this
                    const { id } = p.row
                    const btnEdit = h('i-button', {
                    on: {
                        click: () => {
                            this.currentId = id
                        }
                    }
                    }, 'edit')

                    const btnSaveCancel = [
                        h('i-button', {
                            on: {
                            click: () => {
                                this.handleSave(id)
                            }
                            }
                        }, 'Preservation'),
                        h('i-button', {
                            on: {
                            click: () => {
                                this.currentId = ''
                                this.currentScore = ''
                            }
                            }
                        }, 'cancel')]
                    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 = ''
        }
    }
}

Note: if you use iView in the head tag, this method will fail in the project; the project developed by compiling is feasible;

If you have any questions, please correct them Github blog issues

Tags: Javascript github

Posted on Tue, 03 Dec 2019 10:35:04 -0500 by Mohammad