【VUE】easytable单元格编辑和单元格内嵌套组件

老大提出了一个一个设想，我们编辑记录的时候就不要打开弹框了，直接在表格里编辑吧~~~

(╯‵□′)╯︵┻━┻ 让一个后端java开发工程师来写后台管理页面已经很不容易了，这这这这是人能提出的要求吗！！老娘已经不做前端hin！多！年！了！呀！前端的语法我都记不囫囵了！

但是老大是不可能不是人的，作为一只猫球球只能含泪在老大的殷切嘱咐下奋力的滚动起来。

1. 实现单元格编辑

这个和前端同学们咨询了一下以后还是挺好解决的，因为easytable自带控件可以实现。

资料链接：http://doc.huangsw.com/vue-easytable/app.html#/table/cellEdit

引入easytable的<v-table>标签以后我们只要在配置columns的时候增加一个属性：

isEdit:true,
isResize:true

就大功告成了，当然修改以后还要使用方法把修改过的数据保存到数据库里：

 <v-table
            is-horizontal-resize
            style="width:100%"
            :columns="columns"
            :table-data="tableData"
            row-hover-color="#eee"
            row-click-color="#edf7ff"
            :cell-edit-done="cellEditDone"
    ></v-table>

然后在v-table的标签里设置':cell-edit-done="cellEditDone"'这个属性就可以在单元格编辑的时候出发方法，cellEditDone方法和其他方法一起定义在method里：

methods:{

            // 单元格编辑回调
            cellEditDone(newValue,oldValue,rowIndex,rowData,field){

                this.tableData[rowIndex][field] = newValue;

                // 接下来处理你的业务逻辑，数据持久化等...
            }
        }

一切遵照文档里的样例来，还可以自己动手操作一把。

2. 单元格里嵌套组件

主要是我们对某一个字段是有限制的，数据库里存的就是1和0，在前台展示就是和否，如果这里也使用单元格编辑的话，那么在操作的时候无法控制操作人员到底输了一些什么进去，我又不是很想用校验来控制。所以我就和新人小学弟说，我们能不能把下拉列表或者单选做到表格里，默认值就是数据库里取出的值，只要用户操作了就更新一把。

小学弟研究了一个下午告诉我不行。

但是作为一只技术程序媛！我这样是没法和老大交代的！毕竟老大最常说的一句话就是”没有什么是技术实现不了的“，我要是这么和他说只怕明天我就成了一只猫饼。

不能姓这个邪啊，于是我亲自操刀上阵，终于找到了解决方法。

资料：http://doc.huangsw.com/vue-easytable/app.html#/table/customColumns

1> 其实在一开始我就想过直接把原始的按钮或者是option组合到column的返回值里，但是发现因为我们在外面包了easytable的框架，所以用原始的代码掉不到我们写在vue框架里的方法。->无奈这条放弃。

2> 既然原始的js代码掉不到，我用iview的代码来可不可以 ->当然是不可以的，所以洗洗碎吧。

3> 可不可以在column里直接return写好的外部组件。->easytable连这个都不支持。

4> easytable有没有自带的方法可以嵌入组件。->有，果然我已经不是一个合格的前端开发了，这点居然弄了半天才想到。

既然找到了嵌入的方法，我第一个想到的是嵌入外部组件，但是到现在也没有成功，如果有谁成功了可以通知我学习一下。

但是嵌入在这个页面定义的自定义组件，还是ok没有问题的。

做法就是在column里定义componentName，通过它传递一个组件，然后在这个组件里写option代码，在这里可以使用@on-change来触发方法。我的组件是这样写的：

// 自定义列组件
    Vue.component('test',{
        template:`<div><Select v-model="rowData.quoteCss" @on-change="update(1,2)">
                  <Option v-for="item in booleanList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select></div>`,
        data:function(){
            return {booleanList:[
                    {
                        id:1,
                        name:"是"

                    },
                    {
                        id:0,
                        name:"否"
                    }
                ]}},
        props:{
            rowData:{
                type:Object
            },
            field:{
                type:String
            },
            index:{
                type:Number
            }
            
        },
        methods:{
            update(i, j) {
                console.log(i*j);
            }
        }
    })

让我比较开心的是我们可以通过prop获取到rowData,还可以通过data定义一些自己的变量。使用结果完全ok，调用方法也可以调通。其他更多的内容可以参考资料网站。

 

做完以后发现也还好，但是真的好久不做前端了。