iview table row.loading 行级 按钮loading 可编辑表格

能看到这个问题，相信你对vue ,iview有了一定了解，细节不多说，记一下关键点吧

前一段时间做过这个功能，后来时间久了，忘记了，又慢慢整理出来。

还是做个笔记，加深一下印象

好了，废话不多说。

上干货。

一，按钮加载

{
                            title: '修改价格',
                            align: 'center',
                            width: 100,
                            render: (h, params) => {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                        loading:params.row.$isLoading,
                                        type: 'success',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            if(params.row.$isEdit) {
                                                this.handleSave(params.row)
                                            }else {
                                                this.handleEdit(params.row)
                                            }
                                        }
                                    }
                                },params.row.$isEdit ? '保存' : '编辑')
                            ]);
                        }
},

二， table编辑

{
                    title: '产品价格',
                    align: 'center',
                    width: 120,
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h('input', {
                                attrs:{
                                    maxlength:'10',
                                    border:'1px solid #c8cccf',
                                    color:'#6a6f77'
                                },
                                domProps: {
                                    value: params.row.goodsPrice
                                },
                                on: {
                                    input: function (event) {
                                        params.row.goodsPrice = event.target.value
                                    }
                                }
                            });
                         } else  {
                            if(params.row.goodsPrice){
                                return h('div', [
                                    h('Icon', {
                                        props: {
                                            type: 'social-yen'
                                        }
                                    }),
                                    h('strong', params.row.goodsPrice)
                                ]);
                            }else{
                                return h('div', "无");
                            }
                        }
                    }
                 
  },

三， methods 方法

handleEdit (row) {
            this.$set(row, '$isEdit', true)

        },
        handleSave (row) {
            if(row.goodsPrice){
                var reg = new RegExp("^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)|(0+))$");
                if(!reg.test(row.goodsPrice)){
                    this.$Message.error("请输入正确的价格数字（含小数）!");return;
                }else{
                        this.$set(row, '$isLoading', true)
                        this.$http.post(
                                "url",
                                {"id":row.id,
                                  "goodsPrice":row.goodsPrice,
                                 },
                                {emulateJSON: true}
                        ).then(
                                function (res) {
                                    var result = JSON.parse(res.bodyText);
                                    if (result.code == "1") {
                                        this.$set(row, '$isEdit', false)
                                        this.$set(row, '$isLoading', false)
                                    } else {
                                        var errorStr="保存出错!";
                                        this.$Message.error(errorStr);
                                    }
                                }, function (res) {
                                    this.$Message.error('请求服务器出错!');
                                }
                        );
                }
            }else{
                this.$Message.error("价格不能为空");return;
            }
        },

 有点乱。希望能帮到懵懂的你。