vue2实现使用SortableJs插件进行表格内的数据项拖拽排序 加点击事件无反应

在Vue 2中，要使用SortableJS插件对表格内的数据项进行拖拽排序并添加点击事件，首先你需要安装SortableJS库以及Vue-Sortable-Table组件（如果你还没有安装的话）。你可以通过npm或yarn进行安装：

npm install sortablejs @vue/sortable-table
# 或者
yarn add sortablejs @vue/sortable-table

接下来，创建一个SortableTable组件，并在其中绑定SortableJS实例。同时，设置`handleClick`函数监听点击事件：

<template>
  <div>
    <table :sortable="options" @click="handleClick">
      <!-- 表格列和行 -->
      <tr v-for="(item, index) in items" :key="index">
        <!-- 数据项和拖拽操作 -->
        <td contenteditable="true" :class="{ dragged: draggingItem === item }"
            @mousedown.prevent="startDrag(item)" @mouseup="endDrag(item)">
          {{ item.value }}
        </td>
        <!-- 点击事件处理 -->
        <td @click="onRowClick(item)">点击</td>
      </tr>
    </table>
  </div>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  data() {
    return {
      items: [], // 初始化的数据数组
      draggingItem: null,
      options: {
        group: '__items__', // 组名
        animation: 150, // 动画效果时间
        onSortEnd: (evt) => {
          this.updateOrder(evt.newIndex, evt.oldIndex);
        },
      },
    };
  },
  methods: {
    startDrag(item) {
      this.draggingItem = item;
    },
    endDrag(item) {
      this.draggingItem = null;
    },
    updateOrder(newIndex, oldIndex) {
      const newItems = [...this.items];
      [newItems[newIndex], newItems[oldIndex]] = [newItems[oldIndex], newItems[newIndex]];
      this.items = newItems;
    },
    handleClick(item) {
      console.log('点击了第', item.index, '行');
      // 这里可以根据需要处理点击事件
    },
    onRowClick(item) {
      this.handleClick(item);
    },
  },
};
</script>

在这个例子中，`handleClick`函数会在点击数据项时打印日志，你可以根据需求自定义这个功能。注意要在组件内部注册Sortable实例，并在`@click`事件上监听`onRowClick`。