VOL表格动态添加操作按钮及弹窗确认方法

VOL表格动态添加操作按钮及弹窗确认方法

有好多方法，感觉这种方法最好，效果如下图

代码如下onInit()：

                //操作按钮
                this.columns.push({
                    title: '操作',
                    hidden: false,
                    align: "center",
                    fixed: 'right',
                    width: 120,
                    render: (h, { row, column, index }) => {
                        if(row.ConfirmState!=1){
                            return <div onClick={(e) => { e.stopPropagation();}}>
                                    <el-button 
                                        type="primary" plain size="small" style="padding: 10px !important;"
                                        onClick={(e) => { 
                                            e.stopPropagation()
                                            //弹窗确认窗口
                                            this.$confirm('确认该条数据吗?', '警告', {
                                                confirmButtonText: '确定',
                                                cancelButtonText: '取消',
                                                type: 'warning',
                                                center: true
                                            }).then(() => {
                                                let url = `/api/ST_MeterMonthVolMain/Confirm?id=${row.MonthCompMainID}`;
                                                this.http.post(url).then(x => {
                                                    if (!x.status) return this.$message.error(x.message);
                                                    this.$message.success(x.message);
                                                    this.search();
                                                });
                                            });
                                        }}
                                    >确认</el-button>
                                    <el-button 
                                        type="warning" plain size="small" style="padding: 10px !important;"
                                        onClick={(e) => { 
                                            e.stopPropagation()
                                            //弹窗确认窗口
                                            this.$confirm('确定要重新结算吗?', '警告', {
                                                confirmButtonText: '确定',
                                                cancelButtonText: '取消',
                                                type: 'warning',
                                                center: true
                                            }).then(() => {
                                                //this.showSettle(false)
                                                this.volbox.model=true;
                                                this.settleFlag=false;
                                                this.formFields.MeterMonth=row.MeterMonth;
                                                this.formFields.StartDate=row.StartDate;
                                                this.formFields.EndDate=row.EndDate;
                                            });
                                        }}
                                    >重新结算</el-button>
                                </div>
                        }
                    }
                })