iView 实现可编辑表格

lcodecorex 发布于2019-08-23 15:19 / 2125人阅读

摘要：组件实现方式记录当前需要编辑的列的，默认为空需要编辑的列与当前需要编辑的进行匹配，成功则将该列渲染为包含标签组件，并绑定事件数据处理名称班级操作编辑保存取消注意如果采用的是在标签中引入，该方法在项目中会失效通过编译开发的项目

create at： 2019-02-20

组件

实现方式：

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

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

数据处理

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("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 = ""
        }
    }
}

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

欢迎交流 Github

云服务器 GPU云服务器 php实现表格可编辑可编辑表格 JQuery可编辑表格 html表格的可编辑

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101870.html

iView 发布后台管理系统 iview-admin，没错，它就是你想要的

摘要：简介是基于，搭配使用组件库形成的一套后台集成解决方案，由前端可视化团队部分成员开发维护。遵守设计和开发约定，风格统一，设计考究，并且更多功能在不停开发中。 showImg(https://segmentfault.com/img/remote/1460000011603206); 简介 iView Admin 是基于 Vue.js，搭配使用 iView UI 组件库形成的一套后台集成解...

HackerShell 2019-08-21 17:06 评论0 收藏0
iview Table表格组件无法拆分单元格的解决思路

摘要：因为我们项目中首要的是单元格拆分的，因此以拆分为例。使用函数对表格组件的表格列配置数据进行动态改造，普通单元格渲染标签呈现数据，要拆分的单元格渲染原生标签最后隐藏嵌套表格的边框及调整相关原生表格样式。最近在开发的Vue项目中，使用了iview第三方UI库;对于表格组件的需求是最多的，但是在一些特定场景下，发现iview的表格组件没有单元格合并与拆分的API，搜了一下发现很多同学提问关...

songze 2019-08-23 11:46 评论0 收藏0
vue+iview 实现可编辑表格

摘要：先简单说明一下这个引入的的方式是标签引入的没有用到之类的构建工具毕竟公司还在用这也是我第一次写文章大家看看思路就行了要是有大佬指点指点就更好了话不多说先来个效果图我们再看下极为简单的目录结构实现的可编辑表格首页首页相关与业务无关的纯工具函数先简单说明一下,这个Demo引入的vue,iview的方式是标签引入的,没有用到webpack之类的构建工具...毕竟公司还在用angularjs...

Anleb 2019-08-23 12:37 评论0 收藏0
VUE UI框架对比 element-ui 与 iView

摘要：而则是用到到指令结合的方式去生成，批量生成元素。表格操作列自定义渲染的时，使用的是的函数，直接在中插入对应模板表格分页都需要引入分页组件配合使用两者总体比较，要比简洁许多。 element VS iview(最近项目UI框架在选型，做了个分析，不带有任何利益相关）主要从以下几个方面来做对比使用率（npm 平均下载频率，组件数量，star, issue…)API风格打包优化与设计师友...

ZHAO_ 2019-08-20 17:25 评论0 收藏0