VSCode扩展点击按钮更新视图时界面异常问题求助

上下文 #

• 使用语言：TypeScript
• UI工具包：Svelte 和 Bootstrap

问题描述 #

开发VSCode扩展时，需实现点击按钮后按按钮类型更新视图中的HTML表格元素，但点击按钮后界面出现异常（附前后视图截图）。

初始点击事件代码 #

function updateOverview(op:string){
    // First we update overview table based on op
    let table:HTMLTableElement = <HTMLTableElement> document.getElementById("overview");
    let newRow=table.insertRow();
    newRow.classList.add("row");
    let insertCell=newRow.insertCell(0);
    let updateCell=newRow.insertCell(1);
    let deleteCell=newRow.insertCell(2);
    if(op=="update"){
      insertCell.innerHTML="&nbsp;";
      updateCell.innerHTML="update;";
      deleteCell.innerHTML="&nbsp;";
    }
    else if(op=="insert"){}
    else {} //Any other ops considered delete
}

待更新的HTML表格结构 #

<table class="table table-dark" id="overview">
              <thead>
                <tr>
                  <th scope="col" colspan="3" align="center">Overview</th>
                  <th scope="col">&nbsp;</th>
                  <th scope="col">&nbsp;</th>
                </tr>
                <tr>
                  <th scope="col">Insert</th>
                  <th scope="col">Update</th>
                  <th scope="col">Delete</th>
                </tr>
              </thead>
              <tbody>
                </tbody>
            </table>

按钮代码片段 #

<button  on:click={()=>{updateOverview("update")}}>Update <i class="fa fa-refresh" aria-hidden="true"></i></button>

已尝试方案 #

• 使用preventDefault事件修饰符
• 点击按钮时触发简单alert()测试交互

调整后代码（问题仍存在） #

根据建议改用数据驱动方式，修改了表单数据持有类和Svelte模板，但问题依旧。

表单数据类新增方法 #

public addAffectectedTable(name:string,what:string,count:number):void {
    if(this._tables){
        if(this._tables.length===0){
            let table:AffectedTable;
            this._tables[0].name=name;
            this._tables[0].what=what;
            this._tables[0].howMany=count;
        }
        else{
            for (let index = 0; index < this._tables.length; index++) {
                const element = this._tables[index];
                if(element.name===name&&element.what===what){element.howMany+=count;};
            }
            let newRowIndex=this._tables.length+1;
            this._tables[newRowIndex].name=name;
            this._tables[newRowIndex].what=what;
            this._tables[newRowIndex].howMany=count;
        }
    }
}

修改后的Svelte表格模板 #

<tbody>
            {#if formElements._tables}
              {#each formElements._tables as table}
              <tr>{#if table.what=="insert"}
                    <td>{table.name} -{table.howMany} </td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                {/if}
                {#if table.what=="update"}
                <td>&nbsp;</td>
                <td>{table.name} -{table.howMany} </td>
                <td>&nbsp;</td>
            {/if}

            {#if table.what=="delete"}
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>{table.name} -{table.howMany} </td>
                {/if}
              </tr>
              {/each}
            {/if}
            </tbody>

修改后的按钮代码 #

<button  on:click={()=>{formElements.addAffectectedTable("test","update",3)}}>Update <i class="fa fa-refresh" aria-hidden="true"></i></button>

2024-09-02更新 #

即使点击无任何绑定逻辑的按钮，同样会触发界面异常：

<span style="display: inline-block;"><button>Insert <i class="fa fa-plus" aria-hidden="true"></i></button></span>

预期目标 #

点击按钮时能正常更新视图中的overview表格部分。怀疑对VSCode扩展的生命周期和视图渲染存在误解，是否需要将表格封装为嵌套ViewPanel？寻求技术帮助和建议。

内容的提问来源于stack exchange，提问作者Laurent Morissette