Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draggable tale between 2 tables or more #3

Open
NaturalDevCR opened this issue Apr 9, 2019 · 3 comments
Open

Draggable tale between 2 tables or more #3

NaturalDevCR opened this issue Apr 9, 2019 · 3 comments
Labels
enhancement New feature or request

Comments

@NaturalDevCR
Copy link

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 WakuwakuP added the enhancement New feature or request label Apr 11, 2019
@WakuwakuP
Copy link
Owner

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
Copy link
Author

Thanks WakuwakuP! it will be great!

@WakuwakuP
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants