Vue element-ui 表格列可拖动

问题描述

我现在用它做桌子。但是表格的标题现在可以拖动。如何拖动表格的列？

<el-table
ref="tableRef"
class="table-responsive table-flush"
:data=tableData"
row-key="id"
header-row-class-name="thead"
@sort-change="sortChange"

<el-table-column label="Address" min-width="200px" prop="address">
                <template #default="{ row }">
                    <span>{{ row.address }}</span>
                </template>
            </el-table-column>

            <el-table-column label="Amount" min-width="150px" prop="commitment">
                <template #default="{ row }">
                    <span>{{ row.amount }} {{ shortCurrency }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="Claimable"
                min-width="130px"
                prop="total"
            >
                <template #default="{ row }">
                    <span>
                        {{ row.amount / currentPrice }}
                    </span>
                </template>
            </el-table-column>
</el-table>


mounted() {
this.initializeTable()
},method: {
initializeTable() {
const theadColumn = this.$refs.tableRef.$el.querySelector(
'.el-table__header-wrapper .el-table__header thead tr'
)
Sortable.create(theadColumn,{
draggable: 'th',onEnd: this.dragReorderColumn,})
},

}

我想在拖动表格标题时同时移动表格的标题和正文。我正在使用 vue element-ui。可能吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

vue.js vuedraggable