el-table 多级表头拖拽

---

场景

业务需求做多级表头拖拽，具体要求如下：
没有子表头的父表头不可拖拽，第一个序号不可拖拽，父表头拖拽换位，同一个父表头下的子表头拖拽时 子表头换位，不同父表头下子表头拖拽时子表头不变两个父表头换位。

一、代码

1.页面部分

我这里是多级表头的数据表格。使用了Element UI库来构建表格组件，并结合了sortable.js插件来实现表格列的拖拽排序功能。
在模板部分，使用了<el-table>组件来展示表格数据，通过v-for指令循环渲染表头列和子列。每一列都设置了相应的属性，如label、align、sortable等，在表格中显示对应的数据页面代码如下：

<template>
	<el-table :data="tableData" tooltip-effect="dark" class="financeTotalTwo financeTotal_spfcjhz"
		style="width: 100%" height="100%" :size="GLOBAL.tableSize" ref="multipleTable">
		<el-table-column type="index" width="80" label="序号" align="center"></el-table-column>
		<el-table-column
			v-for="(item, index) in titleList"
			v-if="item.show"
			:label="item.label"
			:align="item.align"
			:sortable="item.sortable"
			:prop="item.prop"
			:min-width="item.width"
			:class-name="(item.prop == 'cityName' ||item.prop == 'tjDate' || item.prop == 'whHouseUseName' ||item.prop == 'blockName' || item.prop =='districtName' ) ? 'disableDrag':'allowDrag'"
			:key="item.prop + index"
			class="allowDrag"
			>
			<template slot-scope="scope">
				<div>{
  
  { scope.row[item.prop] }}</div>
			</template>
			<el-table-column
				v-for="(zitem, zindex) in item.children"
				v-if="zitem.show && item.children.length >0"
				:label="zitem.label"
				:align="zitem.align"
				:sortable="zitem.sortable"
				:prop="zitem.prop"
				:min-width="zitem.width"
				class-name="zallowDrag"
				:class="'draggable'"
				:key="zitem.prop + zindex"
				>
				<template slot-scope="scope">
					<div class="finance_table_alignRight">{
  
  { scope.row[zitem.prop] }}&l