核心点：

        1、改变表头tableColumn内容实现自定义表头

        2、弹窗编辑tableColumn内容，复选框勾选需要显示内容，vuedraggable内容排序

        3、存储改变内容

实现步骤

1、定义表格，表头列宽拖动事件及表头数据

<el-table :data="tableData" border @header-dragend="handleHeaderDragEnd" @sort-change="changeSort" :max-height="tableMaxHeight" :height="tableHeight" style="width: 100%">

    <el-table-column v-for="column in tableColumn" :key="column.prop" :prop="column.prop" :label="column.label" :width="column.width" :sortable="column.sortable" :align="column.align ||'center'" resizable/>

  </el-table>

const tableColumn = ref([

    {

      prop: 'jiemuName',

      label: '节目名称',

      width: '400',

      align: "left"

    },{

      prop: 'playTime',

      label: '播出时间',

      width: '180',

    },{

      prop: 'playToTime',

      label: '播出倒计时',

      width: '140'

    },{

      prop: 'sbbs',

      label: '双播标识',

      width: '120'

    },{

      prop: 'zbk',

      label: '整备库',

      width: '150'

    },{

      prop: 'zbqyrw',

      label: '整备迁移任务',

      width: '120'

    },{

      prop: 'ejbbk',

      label: '4K二级备播库',

      width: '160'

    },{

      prop: 'HDejbbk',

      label: 'HD二级备播库',

      width: '180'

    },{

      prop: 'bck',

      label: '4K播出库',

      width: '140'

    },{

      prop: 'HDbck',

      label: 'HD播出库',

      width: '120'

    },{

      prop: 'bcqyrw',

      label: '播出迁移任务',

      width: '120'

    },{

      prop: 'zbrgfj',

      label: '整备人工复检',

      width: '120'

    },{

      prop: 'zbzdjs',

      label: '整备自动技审',

      width: '120'

    },{

      prop: 'zbaish',

      label: '整备AI审核',

      width: '120'

    },{

      prop: 'bcrgfj',

      label: '播出人工复检',

      width: '120'

    },{

      prop: 'bczdjs',

      label: '播出自动技审',

      width: '120'

    }

  ])

2、弹窗编辑tableColumn内容，复选框勾选需要显示内容，vuedraggable内容排序

<draggable :list="tableColumn" ghost-class="ghost" chosen-class="chosenClass" animation="300"  @end="onEnd" itemKey="prop">

                <template #item="{ element,index }" :key="element.prop">

                    <div class="draggable-item" @click="changeCheck($event,element)">

                        <el-checkbox v-model="element.checked"></el-checkbox>

                        <span>{{ element.label }}</span>

                        <div class="sort">

                            <el-icon @click.prevent.stop="tosort('-',index)"><CaretTop /></el-icon>

                            <el-icon @click.prevent.stop="tosort('+',index)"><CaretBottom /></el-icon>

                        </div>

                    </div>

                </template>

            </draggable>

3、存储改变内容及渲染

    let arr = tableColumn.value

    arr.forEach(v=>{

        if(v.checked) {

            if(!v.width) v.width = 160

        }

    })

    // 存储到本地或者数据库

    emit("sortCallback", arr)