Browse Source

记录事项表格合并

unknown 4 years ago
parent
commit
735e766142
2 changed files with 35 additions and 5 deletions
  1. 29 1
      src/views/other/zhsxDialog.vue
  2. 6 4
      src/views/other/zhsxOther.vue

+ 29 - 1
src/views/other/zhsxDialog.vue

@@ -31,7 +31,21 @@ export default {
         open() {
             this.visible = true
         },
+        /**
+         * @name objectSpanMethod
+         * @param { Object } row        当前行
+         * @param { Object } column     当前列
+         * @param {  Number } rowIndex   当前行号
+         * @param { Number } columnIndex    当前列号
+         * @return { Array,Object }
+         * @description 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,
+         * 里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。
+         * 该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,
+         * 第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
+         */
         objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+            // 取出 tableData的长度, 合并记录事项 表格 使用
+            let { length } = this.tableData || 1
             if (columnIndex === 2) {
                 if (rowIndex > 0 && row[column.property] === this.tableData[rowIndex - 1][column.property]) {
                     return {
@@ -51,7 +65,8 @@ export default {
                     }
                 }
             } else if (columnIndex === 3) {
-                return { rowspan: 0, colspan: 1 }
+                // 记录事项表格合并
+                return { rowspan: length, colspan: 1 }
             }
         }
     }
@@ -75,6 +90,19 @@ export default {
     }
     .bottom-table {
         margin-top: 12px;
+        // element-ui table 组件 记录事项样式修改, 换行,fixed到页面中部
+        /deep/ .el-table__row:first-child {
+            td:last-child {
+                div {
+                    white-space: pre-wrap;
+                    word-wrap: break-word;
+                    word-break: break-all;
+                    position: fixed;
+                    top: 50%;
+                    transform: translateY(-50%);
+                }
+            }
+        }
     }
 }
 </style>

+ 6 - 4
src/views/other/zhsxOther.vue

@@ -48,13 +48,15 @@ export default {
                 let arr = []
                 //console.log('综合事项弹框', res)
                 this.tableData = res.data || []
+
+                // 将tableData中的第三项都设置为相同的数据
                 this.tableData.map(item => {
                     arr.push(item.jlsx)
                 })
-                arr = new Set(arr)
-                //console.log('===================')
-                //console.log(arr)
-                //console.log('===================')
+                arr = [...new Set(arr)]
+                this.tableData.map(item => {
+                    item.jlsx = arr.join('\n\r')
+                })
             })
             this.$refs.Dialog.open()
         },