Bootstrap Vue表：按钮列与表的其余部分不排序

编程问答 2022-08-13

问题描述

我在引导vue b表中具有以下列/类型分配：

  • （c1）包含在运行中，复选框
  • （c2）名称，字符串
  • （c3） ID ，整数
  • （c4）模式，字符串
  • （c5）目标类型，字符串
  • （c6）角度On ，整数
  • （c7）角度偏角，整数
  • （c8）纬度，浮动
  • （c9）经度，浮点数
  • （c10）状态，字符串
  • （c11）“编辑” ，按钮（弹出模式）

大多数列都是“可排序的”，但是 Edit 列不会与表的其余部分进行排序。 Edit 列是一列按钮，它们会弹出一个模式框，允许用户修改行的字段。当表格在列上排序并且行位置发生变化时，编辑仍然严格分配给原始行，从而导致错误的行被修改。

我尝试将 Edit 列设置为“可排序”，但这没有效果。复选框的包含在运行中列将与其余行进行排序，但是令人讨厌的 Edit 列不会让步。下表是模板中定义的表：

<b-table bordered
         id="customTable"
         striped hover
         :items="this.mittTargets"
         class="fontSize"
         :fields="fields">
    <template v-slot:cell(selected)="row">
        <b-form-group>
            <input type="checkBox"
                   v-model="row.item.selected"
                   :id="row.item.ID"
                   class="fontSize"
                    @change="updateTargets(row.item)"/>
        </b-form-group>
    </template>
    <template v-slot:cell(actions)="row">
        <b-button size="sm"
                  @click="editModalConnect(row.item,row.index,$event.target)"
                  id="button-gradient"
                  v-b-tooltip.hover
                  title="single click">
             Edit
        </b-button>
    </template>
</b-table>

我很高兴能对此提供帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-vuevue.js