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

Posted 2023-03-29 @Carl

文章目录

• 主要内容
• • 表格效果
  • 表格代码
  • 数据格式需要
  • • 表格数据格式
    • 右键菜单数据格式
  • 实现方法
  • • 表格右键点击菜单事件
    • 表格单击事件
    • 动态添加行、列
    • 表格每行单击事件
    • 行合并事件
  • 引用

主要内容

项目使用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
              
            
          
        
      

      // )
    ,

引用

v-contextmenu
element-ui

element-ui表格组件table实现列的动态显示与隐藏

参考技术A 在开发后台管理系统中，表格是经常用到的数据展示方式。然而，有时候表格展示的列过多，会出现一屏展示不下，需要手动滚动滚动条查看的情况。

其实，在系统实际使用的过程中，不同用户关注的列不同，并不是一定要展示所有的列。因此，可以开发一个能够配置表格需要展示的列的功能，这样只展示关注的列，不关注的列就无需在页面上展示，提高用户的使用体验。

要求可以动态配置表格中需要展示的列，默认展示所有列。

首先根据思路，可以确定几个状态：

然后开始实现：

CodePen: element-ui table表格组件设置展示列的显示与隐藏