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

@Carl

已于 2023-04-20 11:19:12 修改

阅读量9.9k

点赞数 6

文章标签： ui vue.js 前端

于 2022-07-01 17:27:13 首次发布

本文链接：https://blog.csdn.net/KOCCarl/article/details/123793339

版权

文章目录

主要内容

主要内容

项目使用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 = true
      this.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 = true
      var 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 = null
        var numIn = headerIndex - 1
        if (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 = true
      this.columnIndex = headerIndex
      this.rowIndex = scopeIndex
      if (dropdown.value === 'Input') {
        this.vaDialogVisible = true
        this.valuationType = dropdown.value
        this.valuationTitle = '输入值'
      } else if (dropdown.value === 'Parameter') {
        this.vaDialogVisible = true
        this.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
              }
            }
          }
        }
      }

      // })
    },