时间戳

首页 > 解决方案 > b-table 中的可单击列在第一次单击时未注册排序图标

javascript - b-table 中的可单击列在第一次单击时未注册排序图标

问题描述

Vue 和 Vuex 还是有点新的。使用 Vue 2.0 和 bootstrap-vue 组件。服务器端呈现，因此 API 返回正确排序和分页的项目。我在 b-table 上设置了 no-local-sorting。

对不起，长度。很难形容。我用表格创建了一个组件并传入了 props，其中一个是来自父组件的 Fields 数组。在 b-table 子组件中，我通过插入 #cell 插槽并包含 b-link 标记将这些字段之一定义为可点击的。这是我插入到子项中的#cell 插槽的代码：

            <!-- Edit button (key field called 'action' in fields array) -->
            <template #cell(action)="row">
              <b-link
                size="sm"
                @click="showItemDetail(row.item, row.index, $event.target)"
              >
                <!-- Edit -->
                {{ row.item[keyField] }}
              </b-link>
            </template>

我在#cell() 中使用“动作”来匹配通过我想要单击以打开项目详细信息视图的道具传递到子组件的字段定义键。这是传入的字段数组：

      fields: [
        {
          key: "action",
          label: "Batch Id",
          sortable: true,
          sortBy: "batchId",
        }, ...

请注意，键“action”与 b-table 子组件中的 #cell(action) 相同。有了这个，批处理 id 列显示为一个链接，当我单击它时，会触发 showItemDetail 并显示项目视图。作品。该表显示为另一列作为初始排序。

问题：当我第一次单击批处理 id（操作列）列标题进行排序时，服务器正确返回，表格显示按批处理 id 排序的数据，但排序指示器未更新且不显示向上箭头 (上升）。除了数据的实际顺序外，不显示任何排序指示。显然，我可以看到以正确的排序顺序和排序方向发送的背景数据，因为服务器知道要返回什么。

当我第二次单击时，它会再次按升序对其进行排序（可能是因为它认为它尚未按该列排序）并且突出显示向上的向上箭头。再次单击，按降序排序并正确显示向下箭头。所以，这只是第一次箭头不亮并且它不承认它已被排序。

在此处输入图像描述

感谢您阅读本文。我很可能会解决这个问题，并且有一种更好的方法可以抽象出代码，单击一行以显示细节，并使用服务器端呈现。现在对我来说有点不知所措，我会很感激任何建议。谢谢。

标签： javascriptvue.jsvuexbootstrap-vue

解决方案

有点hack，但这是我设法解决这个问题的方法，以防它对其他人有帮助：

  1. 将以下 v-bind 添加到 b-table：
   @sort-changed="onSortChanged"

  1. 向 fields 数组中的“action”字段添加了类属性（这样我就可以使用 querySelectorAll 轻松找到它。

  2. 并添加了这个方法：

        async onSortChanged(ctx) {
      //Sort changed on Action colulmn:
      // Fix issue where sort indicator doesn't show ascending
      // the first time we click on the action column sort
      if (this.fixSortFlag) return;
      if (ctx.sortBy === "action") {
        this.fixSortFlag = true;
        try {
          const el = document.querySelectorAll(".colAction");
          const attr = el[0]?.getAttribute("aria-sort");

          if (ctx.sortDesc === false && attr !== "ascending") {
            // Set sort indicator up
            el[0].setAttribute("aria-sort", "ascending");
            // this.sortOrder = false;
          } else if (attr === "ascending") {
            // Set sort indicator down
            this.sortOrder = true;
            el[0].setAttribute("aria-sort", "descending");
          }
        } finally {
          this.fixSortFlag = false;
        }
      }
    },

推荐阅读