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>
                        }
                    }
                })