Реализация vue перетаскивается в таблице. Laravel - PullRequest
Новая
       2

Реализация vue перетаскивается в таблице. Laravel

0 голосов
/ 12 февраля 2020

Я пытаюсь создать опрос с возможностью упорядочить вопросы, которые отображаются в таблице при создании опроса.

Я использую vue перетаскиваемый и пример работает, но я не знаю, как использовать это с таблицей и все же заставить строки быть перетаскиваемыми

Пример 

<draggable v-model="section" @start="drag=true" @end="drag=false">
    <div v-for="section in surveySections" :key="section.id">{{section.title}}</div
</draggable>

Это таблица 

<el-table
    :data="form.question_id"
        border>
    <draggable v-model="surveyQuestions" @start="drag=true" @end="drag=false">
        <el-table-column prop="title" label="Pregunta"></el-table-column>
                <el-col :xs="5">
                <el-table-column fixed="right" label="Operaciones">
                <template slot-scope="scope">
                    <el-button
                        @click.native.prevent="deleteRow(scope.$index, form.question_id)"
                        type="text" size="small">
                        <span class="icon-create">Eliminar</span>
                        <i class="el-icon-delete-solid"></i>
                    </el-button>
                </template>
            </el-table-column>
        </el-col>
    </draggable>
</el-table>

Как мне заставить это работать?

1 Ответ

0 голосов
/ 12 февраля 2020

У меня должна быть 50 репутация, чтобы комментировать！ ТАК.

вы можете видеть elementUI Table 组件 实现 拖拽 效果

например 

npm install sortablejs --save

// Element table must specify row-key . Otherwise, the order will be wrong

import Sortable from 'sortablejs'



  

    
      
      
    
    
      {{dropCol}}
{{}} TableData импортируемый из 'сортируемый js' экспорт по умолчанию { данные() { возвращение { col: [ { ярлык: «日期», опора: «дата» }, { ярлык: «姓名», опора: «имя» }, { ярлык: «地址», опора: «адрес» } ], dropCol: [ { ярлык: «日期», опора: «дата» }, { ярлык: «姓名», опора: «имя» }, { ярлык: «地址», опора: «адрес» } ], tableData: [ { id: «1», дата: '2016-05-02', название: '虎小虎 1', адрес: '上海市 普陀 区 金沙江 路 100 弄' }, { id: '2', дата: '2016-05-04', название: '虎小虎 2', адрес: '上海市 普陀 区 金沙江 路 200 弄' }, { id: «3», дата: '2016-05-01', название: '虎小虎 3', адрес: '上海市 普陀 区 金沙江 路 300 弄' }, { id: «4», дата: '2016-05-03', название: '虎小虎 4', адрес: '上海市 普陀 区 金沙江 路 400 弄' } ] } }, mount () { this.rowDrop () this.columnDrop () }, методы: { // 行 拖拽 rowDrop () { const tbody = document.querySelector ('. el-table__body-wrapper tbody') const _this = this Sortable.create (tbody, { onEnd ({newIndex, oldIndex}) { const currRow = _this.tableData.splice (oldIndex, 1) [0] _this.tableData.splice (newIndex, 0, currRow) } }) }, // 列 拖拽 columnDrop () { const wrapperTr = document.querySelector ('. el-table__header-wrapper tr') this.sortable = Sortable.create (wrapperTr, { анимация: 180, задержка: 0, onEnd: evt => { const oldItem = this.dropCol [evt.oldIndex] this.dropCol.splice (evt.oldIndex, 1) this.dropCol.splice (evt.newIndex, 0, oldItem) } }) } } }
...