WakuwakuP / element-ui-el-table-draggable

Make 'el-table' of 'element UI' sortable.
https://www.npmjs.com/package/element-ui-el-table-draggable
MIT License
111 stars 19 forks source link

Draggable tale between 2 tables or more #3

Open NaturalDevCR opened 5 years ago

NaturalDevCR commented 5 years ago

First than all, thanks in advance for this implementation, it's really great.

It would be great if we could drag items between 2 or more tables.

i have this example where i generate an el-table for each command to group orders:

            <div class="card" v-for="(item, index) in orders">
                <div class="card-header">
                    <h4 class="card-subtitle">Comanda #{{index}}</h4>
                </div>
                <div class="pt-4">
                    <el-table-draggable>
                        <el-table
                                class="table-responsive table-condensed"
                                height="250"
                                style="width: 100%"
                                :data="item"
                                :row-class-name="tableRowClassName"
                                :default-sort = "{prop: 'row.meal.name', order: 'descending'}">
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <p><b>Descripción:</b> {{ props.row.meal.description }}</p>
                                    <br>
                                    <p><b>Precio:</b> {{ props.row.meal.price }}</p>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    min-width="250"
                                    prop="row.meal.name"
                                    label="Orden">
                                <div class="td-name" slot-scope="{ row }">
                                    <p @click="editOrder(row)">{{ row.meal.name }}</p>
                                </div>
                            </el-table-column>
                        </el-table>
                    </el-table-draggable>
                </div>
            </div>
WakuwakuP commented 5 years ago

I did not support multiple tables because I did not need them yet. I will add the option "group".

<div class="card" v-for="(item, index) in orders">
  <div class="card-header">
    <h4 class="card-subtitle">Comanda #{{index}}</h4>
  </div>
  <div class="pt-4">
    <el-table-draggable group="orders">
      <el-table
          class="table-responsive table-condensed"
          height="250"
          style="width: 100%"
          :data="item"
          :row-class-name="tableRowClassName"
          :default-sort = "{prop: 'row.meal.name', order: 'descending'}">
        <el-table-column type="expand">
          <template slot-scope="props">
            <p><b>Descripción:</b> {{ props.row.meal.description }}</p>
            <br>
            <p><b>Precio:</b> {{ props.row.meal.price }}</p>
          </template>
        </el-table-column>
        <el-table-column
            min-width="250"
            prop="row.meal.name"
            label="Orden">
          <div class="td-name" slot-scope="{ row }">
            <p @click="editOrder(row)">{{ row.meal.name }}</p>
          </div>
        </el-table-column>
      </el-table>
    </el-table-draggable>
  </div>
</div>
NaturalDevCR commented 5 years ago

Thanks WakuwakuP! it will be great!

WakuwakuP commented 5 years ago

I tried a little, but it didn't work.
It will take time. 🤔