Vue element ui 前端实现表格合并，实现excel的效果

最新推荐文章于 2023-08-14 10:23:00 发布

胡说八道你也信

最新推荐文章于 2023-08-14 10:23:00 发布

阅读量1.1k

点赞数 1

分类专栏：令人头疼的前端

本文链接：https://blog.csdn.net/ClamJ092/article/details/103389848

版权

令人头疼的前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

先看一下效果图结构就是这样的结构，因为是按照列合并的。
需要填写的那一列的值是要入库，然后前一列的参数就是对应着数据库里边的字段，需要你们根据自己得情况去选择合并。

我也是借鉴了别的文章，在那之上修改的，但是完事之后就找不到了，如果作者看到，可以给我留言，我把文章加上借鉴链接。
在这里插入图片描述

得到的响应数据，就是一个对象就行，然后对象的每一个属性对应着列填的参数，我这个做的时候没有要求必填项，不过做完了之后提了这个需求，但是问题不大，加一个验证很简单

看一下这是4列

 <el-table
		 // 这是因为子任务不显示这个区域所以加的，删掉问题不大
          v-if="postForm.parentId === 0"
          :data="tableData"
          border
          :span-method="arraySpanMethod"
          style="width: 100%"
        >
          <el-table-column
            prop="types"
            label=""
            align="center"
            width="150"
          />
          <el-table-column
            prop="category"
            label=""
            align="center"
            width="150"
          />
          <el-table-column
            prop="column"
            label=""
            align="center"
            width="150"
          />
          <el-table-column
            prop="param"
            label="填写本列"
          >
            <template slot-scope="scope">
              <el-input v-if="scope.row.param === '-'" v-model="scope.row.param" :disabled="isInput" class="edit-input" size="small" />
              <el-input v-else v-model="scope.row.param" class="edit-input" size="small" :disabled="readonlyYES" />
            </template>
          </el-table-column>
        </el-table>

关键方法因为之前是5列，所以你可以根据我注释的情况去按照你自己模板修改

这些固定字段只能前端维护了

tableData: [
        {
          types: 'A',
          category: 'C',
          column: '对象属性',
          param: ''
        },
        {
          types: 'A',
          category: 'C',
          column: '对象属性',
          param: ''
        },
        {
          types: 'A',
          category: 'C',
          column: '对象属性',
          param: ''
        },
        {
          types: 'A',
          category: 'C',
          column: '对象属性',
          param: ''
        },
        {
          types: 'A',
          category: 'C',
          column: '对象属性',
          param: ''
        },
        {
          types: 'A',
          category: 'D',
          column: '对象属性',
          param: ''
        },
        {
          types: 'A',
          category: 'D',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'E',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'E',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'E',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'E',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'E',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'F',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'F',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'F',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'F',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'F',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'F',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'F',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'G',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'G',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'H',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'I',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'J',
          column: '对象属性',
          param: ''
        },
        {
          types: 'B',
          category: 'K',
          // 因为这个是空的
          column: '',
          param: ''
        }
      ], // table的数据
      // 把5列注释也给你们放这里了
      // provinceArr: [], //省份要合并数组 [2,0,1,3,0,0] 代表第一二行合并,第三行不变,第四五六行合并,0代表原本的那一行被合并,因此这个列被消除
      // provincePos: 0, //省份要合并数组内容的序号
      typesArr: [], // 同上 二级
      typesPos: [],
      categoryArr: [], // 同上 三级
      categoryPos: []

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
      // 第一列的合并方法,
        const _row_2 = this.typesArr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 1) {
        // 第2列的合并方法,
        const _row_3 = this.categoryArr[rowIndex]
        const _col_3 = _row_3 > 0 ? 1 : 0
        return {
          rowspan: _row_3,
          colspan: _col_3
        }
      }
    },
    merage() {
      // 要合并的数组的方法
      this.merageInit()
      for (var i = 0; i < this.tableData.length; i++) {
        if (i === 0) {
          // 第一行必须存在
          // this.provinceArr.push(1)
          // this.provincePos = 0

          this.typesArr.push(1)
          this.typesPos = 0
          this.categoryArr.push(1)
          this.categoryPos = 0
        } else {
          // 判断当前元素与上一个元素是否相同 this.provincePos是provinceArr内容的序号

          // 第一级
          // if (this.tableData[i].province === this.tableData[i - 1].province) {
          //   this.provinceArr[this.provincePos] += 1
          //   this.provinceArr.push(0)
          // } else {
          //   this.provinceArr.push(1)
          //   this.provincePos = i
          // }

          // 第二级
          if (this.tableData[i].types === this.tableData[i - 1].types) {
            this.typesArr[this.typesPos] += 1
            this.typesArr.push(0)
          } else {
            this.typesArr.push(1)
            this.typesPos = i
          }

          // 第三级
          if (this.tableData[i].category === this.tableData[i - 1].category && this.tableData[i].types === this.tableData[i - 1].types) {
            this.categoryArr[this.categoryPos] += 1
            this.categoryArr.push(0)
          } else {
            this.categoryArr.push(1)
            this.categoryPos = i
          }
        }
      }
    },
    merageInit() {
      // 初始化表格的合并行的数组
      // this.provinceArr = []
      // this.provincePos = 0
      this.typesArr = []
      this.typesPos = 0
      this.categoryArr = []
      this.categoryPos = 0
    },

然后你去编辑也好添加也好，请求之前记得把table里边的值，放到表单项里，我这里分开放的，你们可以写一起

   updateData() {
      this.fil()
      }
fil() {
      this.tableData.map(info => {
        if (info.column === '对象属性') {
          this.postForm.measureName = info.param
        } else if (info.column === '对象属性') {
          this.postForm.measureDepartment = info.param
        } else if (info.column === '对象属性') {
          this.postForm.measurePhone = info.param
        } else if (info.column === '对象属性') {
          this.postForm.measureMail = info.param
        } else if (info.column === '对象属性') {
          this.postForm.stakeholdersMail = info.param
        } else if (info.column === '对象属性') {
          this.postForm.testBackground = info.param
        } else if (info.column === '对象属性') {
          this.postForm.testTarget = info.param
        } else if (info.column === '对象属性') {
          this.postForm.testType = info.param
        } else if (info.column === '对象属性') {
          this.postForm.numberScene = info.param
        } else if (info.column === '对象属性') {
          this.postForm.numberInterface = info.param
        } else if (info.column === '对象属性') {
          this.postForm.interfaceType = info.param
        } else if (info.column === '对象属性') {
          this.postForm.requestType = info.param
        } else if (info.column === '对象属性') {
          this.postForm.tps = info.param
        } else if (info.column === '对象属性') {
          this.postForm.art = info.param
        } else if (info.column === '对象属性') {
          this.postForm.resTime = info.param
        } else if (info.column === '对象属性') {
          this.postForm.utilizationCpu = info.param
        } else if (info.column === '对象属性') {
          this.postForm.utilizationMemory = info.param
        } else if (info.column === '对象属性') {
          this.postForm.utilizationSuccess = info.param
        } else if (info.column === '对象属性') {
          this.postForm.requirements = info.param
        } else if (info.column === '对象属性') {
          this.postForm.xprdProduction = info.param
        } else if (info.column === '对象属性') {
          this.postForm.xprdTest = info.param
        } else if (info.column === '对象属性') {
          this.postForm.logPath = info.param
        } else if (info.category === '对象属性') {
          this.postForm.other = info.param
        }
      })
    },

时间太久了，如果有什么问题可以给我留言

胡说八道你也信

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue element ui 前端实现表格合并，实现excel的效果

先看一下效果图结构就是这样的结构，因为是按照列合并的。需要填写的那一列的值是要入库，然后前一列的参数就是对应着数据库里边的字段，需要你们根据自己得情况去选择合并。得到的相应数据，就是一个对象就行，然后对象的每一个属性对应着列填的参数，我这个做的时候没有要求必填项，不过做完了之后提了这个需求，但是问题不大，加一个验证很简单看一下这是4列 <el-table // 这是因为子任务...
复制链接

扫一扫