iView实现可编辑表格的方法介绍（附代码）

本篇文章给大家带来的内容是关于iView实现可编辑表格的方法介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

组件

实现方式：

• 记录当前需要编辑的列的id，默认为空

• 需要编辑的列与当前需要编辑的id进行匹配，成功则将该列渲染为包含input标签组件，并绑定input事件

数据处理

export default {
    data () {
        return {
            currentId: &＃39;&＃39;,
            currentScore: &＃39;&＃39;,
            columns: [
                { title: &＃39;名称&＃39;, key: &＃39;name&＃39;, align: &＃39;center&＃39; },
                {
                title: &＃39;班级&＃39;,
                align: &＃39;center&＃39;,
                render: (h, p) => {
                    const { id, score } = p.row
                    const inp = h(&＃39;input&＃39;, {
                    style: {
                        width: &＃39;30%&＃39;,
                        padding: &＃39;4px 2px&＃39;,
                        borderRadius: &＃39;4px&＃39;,
                        border: &＃39;1px solid #e9eaec&＃39;,
                        textAlign: &＃39;center&＃39;
                    },
                    attrs: {
                        maxlength: 16
                    },
                    domProps: {
                        value: score
                    },
                    on: {
                            input: (event) => {
                            this.currentScore = event.target.value
                        }
                    }
                    })
                    return this.currentId === p.row.id ? inp : h(&＃39;span&＃39;, score)
                }
                },
                {
                title: &＃39;操作&＃39;,
                align: &＃39;center&＃39;,
                render: (h, p) => {
                    const { currentId } = this
                    const { id } = p.row
                    const btnEdit = h(&＃39;i-button&＃39;, {
                    on: {
                        click: () => {
                            this.currentId = id
                        }
                    }
                    }, &＃39;编辑&＃39;)

                    const btnSaveCancel = [
                        h(&＃39;i-button&＃39;, {
                            on: {
                            click: () => {
                                this.handleSave(id)
                            }
                            }
                        }, &＃39;保存&＃39;),
                        h(&＃39;i-button&＃39;, {
                            on: {
                            click: () => {
                                this.currentId = &＃39;&＃39;
                                this.currentScore = &＃39;&＃39;
                            }
                            }
                        }, &＃39;取消&＃39;)]
                    return currentId === id ? h(&＃39;p&＃39;, 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 = &＃39;&＃39;
            this.currentScore = &＃39;&＃39;
        }
    }
}

注意： 如果采用的是在 head 标签中引入 iView，该方法在项目中会失效；通过编译开发的项目可行；

以上就是iView实现可编辑表格的方法介绍（附代码）的详细内容，更多请关注 第一PHP社区 其它相关文章！