iView에서 편집 가능한 테이블을 구현하는 방법 소개(코드 포함)

이 글은 iView에서 편집 가능한 테이블을 구현하는 방법(코드 포함)을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

Component

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

구현 방법:

• 현재 편집해야 하는 열의 ID를 기록합니다. 기본값은 비어 있습니다.

• 편집해야 하는 열이 현재 편집해야 하는 열의 ID와 일치합니다. 편집되고 성공하면 열이 렌더링됩니다. 입력 레이블 구성 요소를 포함하고 입력 이벤트를 바인딩하려면

데이터 처리

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

참고: 헤드 태그에 iView가 도입된 경우 이 방법은 다음과 같습니다. 프로젝트에서 유효하지 않습니다. 컴파일을 통해 개발된 프로젝트는 가능합니다.

위 내용은 iView에서 편집 가능한 테이블을 구현하는 방법 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!