element-UI table动态增加列，动态增加行，动态合并行。选择编辑表头、行数据

文章目录

主要内容

项目使用vue+element-UI实现
基础表格 element-ui官网查看。项目基于基础表格扩展了动态添加行、列。表头、行内数据动态编辑、选择、修改。还涉及到了动态添加行时，行动态合并。其中还运用到了 v-contextmenu. 插件，方便用户右键操作。

表格效果

7月1日

表格代码

<el-table :data="tableData"border:row-style="{fontSize:'1.25rem'}":header-cell-style="{fontSize:'1.25rem'}"
                style="width:100%;"
                @header-contextmenu="headerContextmenu"
                @row-contextmenu="rowContextmenu"
                @cell-click="cellClick":span-method="objectSpanMethod"><el-table-column v-for="(headerItem, headerIndex) in paramsHeader":key="headerIndex":index="headerIndex"
                         type="params"><!-- 列，表头数据 --><template slot="header"><span class="action-class"
                  @click='headerClick(headerItem,headerIndex)'>{{headerItem.header}}</span><!-- 列，右键菜单数据选择--><vue-context-menu :contextMenuData="paramsContextMenuData":transferIndex="paramsTransferIndex"
                              @addColumn="addParamsColumn(headerItem, headerIndex)"
                              @deleteColumn="deleteParamsColumn(headerItem, headerIndex)"></vue-context-menu></template><!-- 行数据--><template slot-scope="scope"><span class="params-class">{{scope.row.params[headerIndex].name}}</span><!-- 行，右键菜单数据选择--><vue-context-menu :contextMenuData="paramsValueContextMenuData":transferIndex="paramsValueTransferIndex"
                              @clear="clearParamsRow(headerItem, headerIndex)"
                              @addRow="addParamsRow(headerItem, headerIndex)"
                              @deleteRow="deleteParamsRow(headerItem, headerIndex)"></vue-context-menu></template></el-table-column></el-table>

数据格式需要

文章中部分数据定义未展示，请自行添加定义

表格数据格式

数据格式只适合本表格，如有优化请自行更改。数据中 id 用于行合并，请不要忽视

tableData:[{params:[{id: Math.random(),name:'无'},{id: Math.random(),name:'无'}]},{params:[{id: Math.random(),name:'无'},{id: Math.random(),name:'无'}]}],

右键菜单数据格式

菜单用于动态添加列，动态添加行。请自行修改

paramsContextMenuData:{// the contextmenu name(@1.4.1 updated)menuName:'paramsHeader',// The coordinates of the display(菜单显示的位置)axis:{x:null,y:null},// Menu options (菜单选项)menulists:[{fnHandler:'addColumn',// Binding events(绑定事件)icoName:'el-icon-plus',btnName:'添加条件列'// The name of the menu option (菜单名称)},{fnHandler:'deleteColumn',icoName:'el-icon-delete',btnName:'删除条件列'}]},

实现方法

表格右键点击菜单事件

用于获取 列index，行index 和展示右键菜单弹出位置。index主要用于动态增加行和列

headerContextmenu(column, event){
      console.log(column)this.paramsTransferIndex = column.index
      event.preventDefault()var x = event.clientX
      var y = event.clientY
      if(column.type ==='params'){this.paramsContextMenuData.axis ={
          x, y
        }}else{this.valuationContextMenuData.axis ={
          x, y
        }}},rowContextmenu(row, column, event){this.paramsValueTransferIndex = column.index
      this.rowIndex = row.index
      this.columnIndex = column.index
      event.preventDefault()var x = event.clientX
      var y = event.clientY
      if(column.type ==='params'){this.paramsValueContextMenuData.axis ={
          x, y
        }}else{}},

表格单击事件

单击事件主要用于给表头或行赋值数据。可多种选择，作者用的是单击弹出弹框选择数据给行赋值。
表头点击事件没有用element-ui自带的事件，也可用，自行修改

// 表头点击事件headerClick(headerItem, headerIndex){this.paDialogVisible =truethis.paramsIndex = headerIndex
    },// 行点击事件cellClick(row, column, cell, event){this.rowIndex = row.index
      this.columnIndex = column.index
      if(column.type ==='params'){this.conDialogVisible =true}},

动态添加行、列

// 添加列addParamsColumn(headerItem, headerIndex){// 添加列this.paramsHeader.push({header:'请选择参数或变量'})// 同时添加行this.paramsHeader.forEach((header, headerIdnex)=>{this.decisionTableData.forEach((deci, deciIndex)=>{
          deci.params.push({id: Math.random(),name:'无'})})})},// 添加行addParamsRow(headerItem, headerIndex){this.decisionLoading =truevar paramsData =[]var valuation =[]if(headerIndex ===0){this.paramsHeader.forEach(el=>{
          paramsData.push({id: Math.random(),name:'无'})})this.valuationHeader.forEach(va=>{
          valuation.push({value:'无'})})this.decisionTableData.push({params: paramsData,valuation: valuation
        })}else{var id =nullvar numIn = headerIndex -1if(numIn >0){for(var i =0; i <this.paramsHeader.length; i++){if(i <= numIn){for(var n =0; n <= numIn; n++){
                id =this.decisionTableData[this.rowIndex].params[n].id
                if(i === n){
                  paramsData.push({id: id,name:'无'})}}}else{
              paramsData.push({id: Math.random(),name:'无',value:'无'})}}this.valuationHeader.forEach(va=>{
            valuation.push({value:'无'})})this.decisionTableData.splice(this.rowIndex,0,{params: paramsData,valuation: valuation
          })}else{
          id =this.decisionTableData[this.rowIndex].params[numIn].id
          this.paramsHeader.forEach((el, index)=>{if(numIn === index){
              paramsData.push({id: id,name:'无',value:'无'})}else{
              paramsData.push({id: Math.random(),name:'无',value:'无'})}})this.valuationHeader.forEach(va=>{
            valuation.push({value:'无'})})this.decisionTableData.splice(this.rowIndex,0,{params: paramsData,valuation: valuation
          })}}this.rowspan(this.decisionTableData)},

表格每行单击事件

valueAcTyClick(item, dropdown, droIndex, headerIndex, scopeIndex){
      console.log(dropdown)this.decisionLoading =truethis.columnIndex = headerIndex
      this.rowIndex = scopeIndex
      if(dropdown.value ==='Input'){this.vaDialogVisible =truethis.valuationType = dropdown.value
        this.valuationTitle ='输入值'}elseif(dropdown.value ==='Parameter'){this.vaDialogVisible =truethis.valuationType = dropdown.value
        this.valuationTitle ='选择变量'}else{// 清控单元格数据var clearIndex =this.decisionTableData.indexOf(item)this.decisionTableData[clearIndex].valuation[headerIndex].value ='无'this.decisionLoading =false}

行合并事件

根据每行id进行合并

objectSpanMethod({ row, column, rowIndex, columnIndex }){// 表格合并行for(var i =0; i <this.spanArr.length; i++){var rowNum =this.spanArr[i].rowNum
        var columNum =this.spanArr[i].columNum
        var mergeNum =this.spanArr[i].mergeNum
        if(columnIndex === columNum){if(rowIndex === rowNum){return{rowspan: mergeNum,colspan:1}}else{if(rowIndex !==0&& rowIndex <=(rowNum + mergeNum -1)){return{rowspan:0,colspan:0}}}}}// })},

引用

v-contextmenu
element-ui