Блог

У меня есть таблица, которая использует таблицу bootstrap Vue. Каждая строка таблицы соответствует элементу. Моя текущая проблема в том, что мне нужно добавить значок рядом с каждой строкой и отображать их каждый раз, когда я навожу курсор на эту строку, а затем выполнять какую-либо функцию, когда я нажимаю на этот значок. Но я не могу найти способ добавить значок. Я попытался следовать инструкциям на https://bootstrap-vue.org/docs/components/table с использованием слотов, но это работает только для #head и #cell . Нужна идея по этому вопросу. Это мой код и картинка, описывающая мою проблему

 <b-table
        ref="table"
        class="minh--30 mh--100 overflow-y-auto"
        bordered
        responsive
        :items="items"
        :fields="fields"
      >
        <template #head()="data">
          <span>{{ $t(data.field.label) }}</span>
        </template>

        <template #cell(field)="data">
          <span
            v-if="data.item.isDrag"
            class="d-block p-3"
          >{{ data.item.field }}</span>
          <b-dropdown
            v-else
            right
            no-caret
            variant="white"
            class="minw--40 w-100"
            menu-class="w-100 mh--24 overflow-auto minw-unset"
          >
            <template #button-content>
              <div
                class="flex-center minh--11 text-normal position-relative px-2"
              >
                <span class="pr-5 word-break text-line-clamp-1">{{ data.item.field }}</span>
                <i
                  class="fas fa-chevron-down position-absolute top-50 end--1 translate-middle-y px-2"
                />
              </div>
            </template>
            <b-dropdown-item
              v-for="item in listField"
              :key="item.id"
              variant="normal py-2"
              class="fs-12 fs-xl-15"
              @click="selectField(item, data)"
            >
              <span class="word-break text-line-clamp-1">{{ $t(item.text) }}</span>
            </b-dropdown-item>
          </b-dropdown>
        </template>

        <template #cell(action)="data">
          <b-dropdown
            right
            no-caret
            variant="white"
            class="minw--40 w-100"
            menu-class="w-100 mh--24 overflow-auto minw-unset"
          >
            <template #button-content>
              <div
                class="flex-center minh--11 text-normal position-relative px-2"
              >
                <span class="pr-5 word-break text-line-clamp-1">{{ data.item.action }}</span>
                <i
                  class="fas fa-chevron-down position-absolute top-50 end--1 translate-middle-y px-2"
                />
              </div>
            </template>
            <b-dropdown-item
              v-for="item in listDropdown"
              :key="item.id"
              variant="normal py-2"
              class="fs-12 fs-xl-15"
              @click="selectItem(item, data)"
            >
              <span class="word-break text-line-clamp-1">{{ $t(item.text) }}</span>
            </b-dropdown-item>
          </b-dropdown>
        </template>

        <template #cell(selectCharacter)="data">
          <b-dropdown
            right
            no-caret
            variant="white"
            class="minw--40 w-100"
            menu-class="w-100 mh--24 overflow-auto minw-unset"
          >
            <template #button-content>
              <div
                class="flex-center minh--11 text-normal position-relative px-2"
              >
                <span class="pr-5 word-break text-line-clamp-1">{{ data.item.selectCharacter }}</span>
                <i
                  class="fas fa-chevron-down position-absolute top-50 end--1 translate-middle-y px-2"
                />
              </div>
            </template>
            <b-dropdown-item
              v-for="item in listCharacter"
              :key="item.id"
              variant="normal py-2"
              class="fs-12 fs-xl-15"
              @click="selectCharacter(item, data)"
            >
              <span class="word-break text-line-clamp-1">{{ $t(item.text) }}</span>
            </b-dropdown-item>
          </b-dropdown>
        </template>

        <template #cell(inputCharacter)="data">
          <input
            v-model="data.item.inputCharacter"
            type="text"
            class="form-control h--11 border-0"
          >
        </template>

        <template #cell(startPosition)="data">
          <input
            v-model="data.item.startPosition"
            type="number"
            class="form-control h--11 border-0"
          >
        </template>

        <template #cell(characterCount)="data">
          <input
            v-model="data.item.characterCount"
            type="number"
            class="form-control h--11 border-0"
          >
        </template>

        <template #cell(needReplace)="data">
          <input
            v-model="data.item.needReplace"
            type="text"
            class="form-control h--11 border-0"
          >
        </template>

        <template #cell(replace)="data">
          <input
            v-model="data.item.replace"
            type="text"
            class="form-control h--11 border-0"
          >
        </template>

        <template #cell(delete)="data">
          <div class="flex-center pt-1">
            <input
              v-if="!data.item.isDrag"
              v-model="data.item.delete"
              type="checkbox"
            >
          </div>
        </template>
      </b-table>
 

Основываясь на чтении документации, компонент table не был разработан для этого варианта использования, потому что вы добавляете значки, которые находятся за пределами самой таблицы.

Одним из вариантов было бы использовать сеточную систему https://bootstrap-vue.org/docs/components/layout#layout-and-grid-system чтобы создать одну узкую колонку слева для значков и одну широкую колонку справа для таблицы. В узком столбце вы можете создавать строки, высота которых в точности равна высоте каждой строки таблицы, чтобы элементы оставались выровненными по каждой строке.

Другой альтернативой было бы использовать #cell слот и поместить внутрь элемент, который использует CSS, возможно transform , свойство (https://www.w3schools.com/cssref/css3_pr_transform.asp ), чтобы элемент отображался слева от того места, где он есть на самом деле.