Introduction à la méthode d'implémentation des tableaux modifiables dans iView (avec code)

Cet article vous présente la méthode d'implémentation de tableaux modifiables dans iView (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Composant

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

Méthode de mise en œuvre :

• Enregistrez l'identifiant de la colonne qui doit actuellement être modifiée, la valeur par défaut est vide

• Faites correspondre la colonne qui doit être modifiée avec l'ID actuel qui doit être modifié. En cas de succès, la colonne sera rendue en tant que composant de balise d'entrée et liée à. l'événement d'entrée

Traitement des données

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

Remarque : Si iView est introduit dans la balise head, cette méthode sera invalide dans le projet ; les projets développés grâce à la compilation sont réalisables ;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!