带引导程序的可拖动表

Posted 2023-05-08

【中文标题】带引导程序的可拖动表

【英文标题】：Draggable table with bootstrap

【发布时间】：2021-11-06 18:38:04

【问题描述】：

我想让表格中的行可拖动，但我尝试的一切都不起作用。 我对编程真的很陌生，必须尽快完成任务：） 我真的很感谢你的帮助` 我在 bootstrap 中阅读了有关 b-table 文档的所有内容，但它没有说明表格中的可拖动行。

<script>
  import BaseSafetyModal from '@/components/Base/BaseSafetyModal';
  import draggable from "vuedraggable";

  export default 
    components: 
      'safety-modal': BaseSafetyModal,
        draggable
    ,
    props: 
      fields: 
        type: Array,
        required: true
      ,
      items: 
        type: Array,
        required: true
      ,
      approved: 
        type: Boolean,
        default: false
      
    ,
    methods: 
      getModalId (item) 
        let name = Object.keys(item).find(
          itemKeys =>
            itemKeys.indexOf('id') > -1 &&
            itemKeys !== 'headline_id' &&
            itemKeys !== 'revision_id' &&
            itemKeys !== 'building_id'
        );
        if (
          Object.keys(item).indexOf('geometry_id') > -1 &&
          Object.keys(item).indexOf('level_id') > -1
        )
          name = 'level_id';

        return `$name-$item[name]`;
      ,
      showModal (item) 
        this.$root.$emit('bv::show::modal', `safety-modal-$this.getModalId(item)`);
      ,
      removeItem (item) 
        this.$emit('removeItem', item);
        this.$root.$emit('bv::hide::modal', `safety-modal-$this.getModalId(item)`);
      
    
  ;
</script>

<template>
  <div>
    <b-row>
      <b-col>
        <slot name="button1"></slot>
        <b-button
          v-if="$store.state.permissions.location_permission > 10 && !approved && items.length > 2"
          v-b-tooltip.hover
          title="Eintrag hinzufügen"
          class="float-right"
          variant="primary"
          @click="$emit('changeMode')"
        >
          <font-awesome-icon icon="plus"/>
        </b-button>
      </b-col>
    </b-row>
    <b-row>
      <b-col class="pt-3">
        <b-table fixed outlined striped hover stacked="md" :items="items" :fields="fields">
          <template v-slot:cell(actions)="row">
            <div class="text-md-right float-right">
              <b-button-group size="sm">
                  <slot :item="row.item"></slot>
                <b-button
                  v-b-tooltip.hover
                  title="Bearbeiten"
                  v-if="$store.state.permissions.location_permission > 10 && !approved"
                  type="button"
                  variant="primary"
                  @click="$emit('changeMode',row.item)"
                >
                  <font-awesome-icon icon="edit"/>
                </b-button>
                <b-button
                  @click="showModal(row.item)"
                  v-b-tooltip.hover
                  title="Löschen"
                  v-if="$store.state.permissions.location_permission > 10 && !approved"
                  type="button"
                  variant="danger"
                >
                  <font-awesome-icon icon="trash"/>
                </b-button>
                <safety-modal
                  :modal-id="`safety-modal-$getModalId(row.item)`"
                  @removeItem="removeItem(row.item)"
                ></safety-modal>
              </b-button-group>
            </div>

          </template>
        </b-table>

      </b-col>
    </b-row>

    <b-row>
      <b-col>
        <slot name="button2"></slot>
        <b-button
          v-if="$store.state.permissions.location_permission > 10 && !approved"
          v-b-tooltip.hover
          title="Eintrag hinzufügen"
          class="float-right"
          variant="primary"
          @click="$emit('changeMode')"
        >
          <font-awesome-icon icon="plus"/>
        </b-button>
      </b-col>
    </b-row>
  </div>
</template>

`

【参考方案1】：

您可能需要一些拖放包，例如SortableJS 或vue-smooth-dnd。

让我们现在！