el-table 点击单元格可编辑 点击表头可修改 右击表头删除表头和内容
项目场景：
提示：这里简述项目相关背景：
点击单元格可编辑 点击表头可修改表头内容 。右击表头删除内容和表头
代码 html
<template>
<div class="app-container">
<el-table
border
:data="tableData"
style="width: 100%;align: center"
max-height="550"
:cell-class-name="tableCellClassName"
@cell-click="tsetClick"
@header-click="headerTest"
@header-contextmenu="headercontextmenu"
>
<template v-for="item in tableColumnList">
<el-table-column
:key="item.prop"
:label="item.propName"
:prop="item.prop"
:min-width="item.minWidth"
align="center"
>
<template slot-scope="scope">
<template v-if="scope.row.index === tabClickIndex && scope.column.index === tableCellClickColumnIndex">
<el-input
ref="focusingRef"
v-model="scope.row[scope.column.property]"
autofocus
type="textarea"
style="height: 100%"
placeholder="请输入"
:blur="inputBlur"
@blur="inputBlur"
/>
</template>
<template v-else>{{ scope.row[scope.column.property] }}</template>
</template>
</el-table-column>
</template>
<el-table-column width="120" prop="addTableHeaderName" align="center">
<template slot="header">
<i class="el-icon-plus" style="font-size: 20px" />
</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>
data部分
data() {
return {
contextMenuVisible: false,
tableCellIndex: "", // 列计数器
columnName: "", // 列名
tableCell: { tableCellData: "" }, // 表格定义
dialogForTable: false, // 表格编辑弹出框
num: 7, // 列个数
tabClickIndex: null, // 点击的单元格
tableHeader: { tableHeaderName: "", property: "" }, // 表头定义
dialogForHeader: false, // 表头编辑弹出框
// 这里为了简便我就没有调用后台接口获取数据，直接写的假数据 你要用的话可以调用后台接口获取tableColumnList，注意数据格式
tableColumnList: [
{ prop: "skill", propName: "自我要求" },
{ prop: "Basics", propName: "文案功底" },
{ prop: "taste", propName: "审美能力" },
{ prop: "communicate", propName: "沟通能力" },
{ prop: "study", propName: "学习研究" },
{ prop: "edition", propName: "版本管理" },
{ prop: "experience", propName: "项目经验" },
{ prop: "leadership", propName: "领导力" },
],
tableData: [
{
skill: "123",
Basics: "445",
taste: "76354",
communicate: "1231",
study: "的发放",
edition: "踩踩踩",
experience: "vbdf",
leadership: "哗哗哗",
},
],
};
},
methods部分
methods: {
getIndex(index) {//获取点击的索引
console.log("index", index);
this.tableCellIndex = null;
this.tableCellIndex = index;
},
tsetClick(row, column, cell, event) {//单元格点击事件
this.tabClickIndex = row.index;
this.tableCellClickColumnIndex = column.index;
if (this.$refs.focusingRef != undefined) {
this.$nextTick(() => {
// 自动获取焦点 element组件autofocus失效 这个地方还有问题应该
var refs = this.$refs['focusingRef'].$refs
console.log(refs)
})
}
},
// 添加表头，修改表头
headerTest(val) {
if (val.property == "addTableHeaderName") {
// console.log('这里是表格tou部点击,添加头部事件', val)
this.tableColumnList.push({
prop: this.num.toString(),
propName: "点击编辑表头名称",
});
for (let i = 0; i < this.tableData.length; i++) {
this.$set(this.tableData[i], [parseInt(this.num)], "请添加内容");
}
this.num = this.num + 1;
} else {
console.log("这里是表格tou部点击，修改头部事件", val);
this.tableHeader.tableHeaderName = "";
this.tableHeader.property = "";
this.tableHeader.tableHeaderName = val.label;
this.tableHeader.property = val.property;
// console.log(this.tableHeader.tableHeaderName)
this.dialogForHeader = true;
}
},
headercontextmenu(val, event) { // 右击
// console.log(val.property); //右击获取表头的property 的名称
event.preventDefault(); // 隐藏浏览器默认右击菜单
this.$confirm("是否需要删除此列", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.tableColumnList.splice(val.index, 1); //删除对应的表头
this.tableData.forEach((item) => { //删除对应的表头内容
delete item[val.property];
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
inputBlur(row, event, column) {//失去焦点事件
this.tabClickIndex = null;
this.tableCellClickColumnIndex = null;
},
tableCellClassName({ row, column, rowIndex, columnIndex }) {
// 把每一行的索引放进row
row.index = rowIndex;
column.index = columnIndex;
},
// 表头编辑提交
submitForm() {
console.log("点击提交按钮");
for (let i = 0; i < this.tableColumnList.length; i++) {
if (this.tableColumnList[i].prop === this.tableHeader.property) {
this.tableColumnList[i].propName = this.tableHeader.tableHeaderName;
}
}
console.log(this.tableColumnList);
this.dialogForHeader = false;
},
// 取消表头编辑
cancel() {
// console.log("点击取消按钮");
this.dialogForHeader = false;
},
},