element table中下拉框编辑事件

表格:


                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                            
                        
                        
                    

data中:

  selstu: {
                    stus: [],
                    stype: '',
                    ttype: '',
                    currentid: ''
                }

相关方法:

 srh: function () {
                var that = this;
                var p = this.formsrh;
                p.rows = this.tablestu.rows;
                p.page = this.tablestu.page;
                $.post('/admin_areas/examination/ListBuKaoStu', p, function (res) {
                    accecpResult(res, function () {
                        res.data.rows.forEach(item => {
                            item.iseditstype = false;
                            item.iseditttype = false;
                        })
                        that.tablestu.items = res.data.rows;
                        that.tablestu.total = res.data.total;
                    })
                })
            },
stustypechange: function (val) {
                var p = {
                    id: this.selstu.currentid,
                    stype: val
                }
                var that = this;
                $.post('/admin_areas/examination/editbkstype', p, function (res) {
                    accecpResult(res, function () {
                        that.tablestu.items.forEach(item => {
                            if (item.id == that.selstu.currentid) {
                                item.iseditstype = false;
                            }
                        })
                    }, function () {
                        that.$message.error(res.data);
                    })
                })

            },
            closestustype: function (val) {
                if (val == false) {
                    this.tablestu.items.forEach(item => {
                        if (item.id == this.selstu.currentid) {
                            item.iseditstype = false;
                        }
                    })
                }
            },

思路说明:
1、srh方法获取数据中,将各行数据增加属性iseditstype ,以此属性来切换正常显示与下拉框显示。
2、正常显示时,显示一个链接,点击后修改该行的iseditstype值,并记录下该行id,代码: {{scope.row.stype}}
3、下拉框显示时,处理两个事件:visible-change和change,前者是下拉面板显示状态,后者是值发送改变
下拉面板隐藏时,修改该行的iseditstype值为false,改为正常显示。
值改变时,向后端发送修改请求,响应成功后修改isedittype的值。
通过selstu.currentid来确定当前操作的行id

你可能感兴趣的:(vue-js)