el-table 表格拖拽 + 表头可修改 + 宽度自定义

 el-table 表格拖拽 + 表头可修改+ 宽度自定义

 宽度自定义

@header-dragend="headerdragend"操作之后获取最后的宽度
headerdragend(newWidth, oldWidth, column, event) {// 获取当前拖动的是第几个，方便后续检测 DOM 是否已更新var currentColIndex = this.tableColumnList.findIndex(item=>item.label == event.target.innerText);this.tableColumnList[currentColIndex].wide = newWidth;this.col[currentColIndex].wide = newWidth;
}

<template><div class="app-container"><div><el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch" label-width="68px"><el-row :gutter="24"><el-col :span="10"><el-form-item label="任务名称" prop="jobName"><el-input v-model="queryParams.jobName" placeholder="请输入任务名称" clearable /></el-form-item></el-col><el-col :span="10"><el-form-item><el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button><el-button icon="el-icon-refresh" size="mini">重置</el-button></el-form-item></el-col></el-row></el-form></div><div><el-row :gutter="8" class="mb8"><el-col :span="1.5"><el-button type="primary" plain icon="el-icon-plus" size="mini">新增</el-button></el-col><el-col :span="1.5"><el-button type="success" plain icon="el-icon-edit" size="mini">修改</el-button></el-col><el-col :span="1.5"><el-button type="danger" plain icon="el-icon-delete" size="mini">删除</el-button></el-col><el-col :span="1.5"><el-button type="warning" plain icon="el-icon-download" size="mini">导出</el-button></el-col><right-toolbar :columns="columns" :showSearch.sync="showSearch"></right-toolbar></el-row></div><el-table :data="tableData" border row-key="id" style="width: 100%;" @cell-click="tsetClick"@header-click="headerTest" @header-dragend="headerdragend"><el-table-column v-for="(item, index) in col" align="center" show-overflow-tooltip :key="`col_${index}`":property="item.field" :width="item.wide":prop="tableColumnList[index].field" :label="item.label"><template slot-scope="scope"><span @click="getIndex(scope.$index)">{{scope.row[scope.column.property]}}</span></template></el-table-column></el-table><el-dialog :visible.sync="dialogForHeader" title="修改表头名称" width="800"><el-form ref="form" :model="tableHeader" label-width="80px"><el-form-item label="表头名称"><el-input v-model="tableHeader.tableHeaderName" placeholder="请输入表头名称" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog></div>
</template>
<script>
import Sortable from 'sortablejs'
import { setUpByKey } from '../../../api/system/Adaptive'
export default {data() {return {queryParams: {},// 显示搜索条件showSearch: true,// 列信息columns: [{ key: 0, label: '日期', visible: true },{ key: 1, label: '姓名', visible: true },{ key: 2, label: '地址', visible: true },],// 多选框multipleSelection:[],tableCellIndex: "",columnName: "",tableCell: { tableCellData: "" },num: 7,tableHeader: { tableHeaderName: "", property: "" },dialogForHeader: false,col: [],// 这里为了简便我就没有调用后台接口获取数据，直接写的假数据  你要用的话可以调用后台接口获取tableColumnList，注意数据格式tableColumnList:[],tableData: [{serial: '1',name: '王小虎1',adress: '上海市普陀区金沙江路 1518 弄',data: '2016-05-02',}, {serial: '2',name: '王小虎2',adress: '上海市普陀区金沙江路 1518 弄',data: '2016-05-02',}, {serial: '3',name: '王小虎3',adress: '上海市普陀区金沙江路 1518 弄',data: '2016-05-02',}, {serial: '4',name: '王小虎4',adress: '上海市普陀区金沙江路 1518 弄',data: '2016-05-02',}, {serial: '5',name: '王小虎5',adress: '上海市普陀区金沙江路 1518 弄',data: '2016-05-06',}, {serial: '6',name: '王小虎6',adress: '上海市普陀区金沙江路 1518 弄',data: '2016-05-02',}],}},mounted() {this.columnDrop()this.getInfo()},methods: {openImportTable(){this.$refs.import.show();},getInfo(){setUpByKey('tfhRIWm7').then(res => {this.col = JSON.parse(res.data.setJson)this.tableColumnList = JSON.parse(res.data.setJson)})},handleSelectionChange(val){this.multipleSelection = val;},//列拖拽columnDrop() {const wrapperTr = document.querySelector('.el-table__header-wrapper tr')this.sortable = Sortable.create(wrapperTr, {animation: 180,delay: 0,onEnd: evt => {const oldItem = this.tableColumnList[evt.oldIndex]this.tableColumnList.splice(evt.oldIndex, 1)this.tableColumnList.splice(evt.newIndex, 0, oldItem)}})},getIndex(index) {this.tableCellIndex = "";this.tableCellIndex = index;},tsetClick(row, column, cell, event) {this.columnName = "";this.columnName = column.property;this.tableCell.tableCellData = "";this.tableCell.tableCellData = row[this.columnName];},//添加表头，修改表头headerTest(val) {if (val.property == "addTableHeaderName") {this.tableColumnList.push({ field: this.num.toString(), label: '点击编辑项目流程名称' })for (let i = 0; i < this.tableData.length; i++) {this.$set(this.tableData[i], [parseInt(this.num)], "请添加内容");}this.num = this.num + 1;} else {this.tableHeader.tableHeaderName = "";this.tableHeader.property = "";this.tableHeader.tableHeaderName = val.label;this.tableHeader.property = val.property;this.dialogForHeader = true;}},//表头编辑提交submitForm() {for (let i = 0; i < this.tableColumnList.length; i++) {if (this.tableColumnList[i].field === this.tableHeader.property) {this.tableColumnList[i].label = this.tableHeader.tableHeaderName;this.col[i].label = this.tableHeader.tableHeaderName;}}this.dialogForHeader = false;},//表格内容编辑提交submitForm1() {if (this.tableCellIndex === "" || this.tableCellIndex === null) {alert("亲，请精准点击表格中的字进行修改！")} else {this.tableData[this.tableCellIndex][this.columnName] = this.tableCell.tableCellData;this.rush();}},//强制刷新数据rush() {this.$set(this.tableData);},//取消表头编辑cancel() {this.dialogForHeader = false;},// 操作之后获取最后的宽度headerdragend(newWidth, oldWidth, column, event) {// 获取当前拖动的是第几个，方便后续检测 DOM 是否已更新var currentColIndex = this.tableColumnList.findIndex(item=>item.label == event.target.innerText);this.tableColumnList[currentColIndex].wide = newWidth;this.col[currentColIndex].wide = newWidth;}},
}
</script>
<style scoped></style>

 element-ui table 表格组件实现可拖拽效果（行、列）_element table 可拖拽-CSDN博客

基于element表格封装一个可编辑表头和拖拽排序的表格_自定义表格表头拖拽-CSDN博客

Vue el-table表头、表格内容，任意格都可编辑实现 小白的处女博文，大佬请勿喷（原创不易，转载请注明出处）_el-table实现可编辑表头和表内容的功能-CSDN博客