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博客