黑马程序员技术交流社区

标题: 【上海校区】关于iview中table组件实现编辑单元格功能 [打印本页]

---

作者: 不二晨    时间: 2019-1-18 09:17
标题: 【上海校区】关于iview中table组件实现编辑单元格功能
先上效果图：

上代码：

{
                        title: '姓名',
                        key: 'name',
                        render: (h, params) => {
                            if (params.row.$isEdit) {
                              return h('Input', {

                                props: {
                                    type: "text",
                                    value: params.row.name
                                },

                                on: {
                                  "on-blur": event => {
                                      debugger
                                      params.row.name = event.target.value;
                                      this.$set(params.row, '$isEdit', false);
                                  },

                                }
                              });
                            } else  {  
                              return h('div', {
                                on: {
                                    click: () => {
                                        this.$set(params.row, '$isEdit', true);
                                    },                           
                                }
                              },params.row.name);
                            }
                        }
                    },

使用iviewrender函数既可以实现，点击的时候更改标识符的状态。但是这种只是实现展示的数值改变，要实现table绑定的data值改变还需加上代码：

<template>
    <div>
        <Table border :columns="columns5" :data="data5"></Table>
    </div>
</template>
.......
return h('Input', {

                                props: {
                                    type: "text",
                                    value: params.row.name
                                },

                                on: {
                                  "on-blur": event => {
                                      debugger
                                      params.row.name = event.target.value;
                                      this.data5[params.index].name = event.target.value;
                                      this.$set(params.row, '$isEdit', false);
                                  },

                                }
                              });

这样就能实现点击更改单元格的效果了，但是，需要表单验证怎么办呐？
如果用的是iview 3.0版本，可以参考https://dev.iviewui.com/articles/1040179759335739392 ，
而笔者当时使用的iview 2.0版本，没有slot-scope属性，故而笔者用了span标签实现的，上代码：

data5: [
                    {
                        name: '王小明',
                        age: 18,
                        address: '北京市朝阳区芍药居',
                        date: '2016-10-03',
                        valid:""
                    },
                    {
                        name: '张小刚',
                        age: 25,
                        address: '北京市海淀区西二旗',
                        date: '2016-10-01',
                        valid:""
                    },
                    {
                        name: '李小红',
                        age: 30,
                        address: '上海市浦东新区世纪大道',
                        date: '2016-10-02',
                        valid:""
                    },
                    {
                        name: '周小伟',
                        age: 26,
                        address: '深圳市南山区深南大道',
                        date: '2016-10-04',
                        valid:""
                    }
                ]

给table绑定的data加上虚拟字段valid，

render: (h, param) => {
                            let vm = this;
                            return h(
                            "div",
                            {
                                props: {}
                            },
                            [
                                h("Input", {
                                    props: {
                                        type: "text",
                                        value: param.row.name
                                    },

                                    on: {
                                        "on-blur": event => {
                                                //判断输入框是否为空，为空的话虚拟字段变成“不能为空”
                                            if(event.target.value == ""){
                                                this.data5[param.index].valid = "不能为空";
                                            }else{
                                                    //不为空，即通过验证，将值附上去，然后把虚拟字段置空
                                                params.row.name = event.target.value;
                                                this.data5[param.index].name = event.target.value;
                                                this.data5[param.index].valid = "";
                                            }

                                        },

                                    }
                                }),
                                h(
                                    "span",
                                    {
                                        attrs: {
                                        title: param.row.valid
                                        },
                                        style: {
                                        color: "red"
                                        }
                                    },
                                    param.row.valid
                                )
                            ]
                            );
                        },

在render函数中加上input框的判断与下面的span验证文字，这样的话一旦为空，即可实现效果：

样式方面可以自己调整，如果需要上面的点击效果，加上上面的判断代码即可
---------------------
【转载，仅作分享，侵删】
作者：flydesigner
原文：https://blog.csdn.net/flydesigner/article/details/86480028

---

作者: 一个人一座城0.0    时间: 2019-1-21 08:49
看一看。

---

作者: 不二晨    时间: 2019-1-23 17:27
奈斯，感谢分享

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2