vue.js - 修复第一列时vue可拖动问题我无法移动列

Question

修复第一列时vue可拖动问题我无法移动列我该如何解决这个问题

我有一个 4 列的表，一列有一个静态值列表，下一列我需要可拖动，以便我可以移动第二列中的单元格等，而不会影响第一列。

<script>
    import draggable from 'vuedraggable'
    export default {
        name: "table-column-example",
        components: {
            draggable
        },
        data() {
            return {
                headers: ["id", "name", "sport"],
                list: [
                    { id: 1, name: "Abby", sport: "basket" },
                    { id: 2, name: "Brooke", sport: "foot" },
                    { id: 3, name: "Courtenay", sport: "volley" },
                    { id: 4, name: "David", sport: "rugby" }
                ],
                dragging: false
            };
        }
    };
</script>

<style scoped>
    .ghost {
        opacity: 0.5;
        background: #fb1b27;
    }
</style>

<template>
    <div class="row">
        <div class="col-8">
            <h3>Draggable table</h3>
            <table class="table table-striped">
                <thead class="thead-dark">
                <draggable  :list="headers"  v-model="headers" :options="{draggable:'.item'}"  tag="tr">
                    <th>#</th>
                    <th class="item" v-for="header in headers" :key="header" scope="col">
                        {{ header }}
                    </th>
                </draggable>
                </thead>
                <tbody>
                <tr v-for="item in list" :key="item.name">
                    <td>dddddd</td>
                    <td v-for="header in headers" :key="header">{{ item[header] }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

标签： vue.js