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