el-table结合sortablejs使用

问题:

当el-table开启了border属性后,进行列的拖拽时会触发sortablejs的拖拽事件, 此时sortablejs视为拖拽动作无结束，导致拖拽功能卡死.

解决方案:

sortablejs中有一个handle(使列表单元中符合选择器的元素成为拖动的手柄)的属性,可以给el-table的表头添加一个类名('sortable-handle'), 并在sortablejs中的handle中设置这个类名('sortable-handle')

代码如下:

<template>  
  <el-table :data="tableData" border style="width: 100%">  
    <el-table-column prop="date" label="Date" width="180" :sortable="true">  
      <template #header="{ column, $index }">  
        <div class="sortable-handle">{{ column.label }}</div>  
      </template>  
    </el-table-column>  
    <el-table-column prop="name" label="Name" width="180">  
      <template #header="{ column, $index }">  
        <div class="sortable-handle">{{ column.label }}</div>  
      </template>  
    </el-table-column>  
    <el-table-column prop="address" label="Address">  
      <template #header="{ column, $index }">  
        <div class="sortable-handle">{{ column.label }}</div>  
      </template>  
    </el-table-column>  
  </el-table>  
</template>  
  
<script lang="ts" setup>  
import { onMounted } from 'vue';  
import sortablejs from 'sortablejs';  
  
const tableData = [  
  {  
    date: '2016-05-03',  
    name: 'Tom',  
    address: 'No. 189, Grove St, Los Angeles'  
  },  
  {  
    date: '2016-05-02',  
    name: 'Tom',  
    address: 'No. 189, Grove St, Los Angeles'  
  },  
  {  
    date: '2016-05-04',  
    name: 'Tom',  
    address: 'No. 189, Grove St, Los Angeles'  
  },  
  {  
    date: '2016-05-01',  
    name: 'Tom',  
    address: 'No. 189, Grove St, Los Angeles'  
  }  
];  
onMounted(() => {  
 createSort();  
});  
const createSort = () => {  
  const table = document.querySelector('.el-table thead tr') as HTMLElement;  
  sortablejs.create(table, {  
    handle: '.sortable-handle'  
  });  
};  
</script>  
  
<style lang="scss">  
.sortable-handle {  
  height: 100%;  
}  
</style>