{"id":28226,"date":"2024-11-24T15:33:09","date_gmt":"2024-11-24T07:33:09","guid":{"rendered":"https:\/\/fwq.ai\/blog\/28226\/"},"modified":"2024-11-24T15:33:09","modified_gmt":"2024-11-24T07:33:09","slug":"%e4%bd%bf%e7%94%a8-span-method-%e5%90%88%e5%b9%b6-el-table-%e8%a1%a8%e6%a0%bc%e6%97%b6%ef%bc%8c%e4%b8%ba%e4%bb%80%e4%b9%88%e7%ac%ac%e5%9b%9b%e5%88%97%e6%97%a0%e6%b3%95%e5%90%88%e5%b9%b6%ef%bc%9f","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/28226\/","title":{"rendered":"\u4f7f\u7528 `span-method` \u5408\u5e76 el-table \u8868\u683c\u65f6\uff0c\u4e3a\u4ec0\u4e48\u7b2c\u56db\u5217\u65e0\u6cd5\u5408\u5e76\uff1f"},"content":{"rendered":"

\"\u4f7f\u7528<\/p>\n

el-table\u5408\u5e76\u90e8\u5206\u6210\u529f<\/strong><\/p>\n

\u95ee\u9898\uff1a<\/strong><\/p>\n

\u4f7f\u7528 span-method \u65b9\u6cd5\u5408\u5e76 el-table \u8868\u683c\u7684\u67d0\u4e9b\u5217\uff0c\u4f46\u53d1\u73b0\u7b2c\u56db\u5217\u65e0\u6cd5\u5408\u5e76\u3002<\/p>\n

\u539f\u56e0\uff1a<\/strong><\/p>\n

\u539f\u59cb\u5b9e\u73b0\u4e2d\uff0c\u7b2c\u56db\u5217\u7684\u5408\u5e76\u5224\u65ad\u6761\u4ef6\u4e0d\u6b63\u786e\u3002<\/p>\n

\u89e3\u51b3\u65b9\u6848\uff1a<\/strong><\/p>\n

\u4f7f\u7528\u6b63\u786e\u7684\u5408\u5e76\u903b\u8f91\uff0c\u5177\u4f53\u6b65\u9aa4\u5982\u4e0b\uff1a<\/p>\n

    \n
  1. \u5728 data \u4e2d\u521b\u5efa\u4e09\u4e2a\u6570\u7ec4\uff0c\u7528\u4e8e\u8ddf\u8e2a\u7b2c\u4e00\u5217\u3001\u7b2c\u4e8c\u5217\u548c\u7b2c\u56db\u5217\u7684\u53ef\u5408\u5e76\u884c\u6570\u3002<\/li>\n
  2. \u5728 created \u751f\u547d\u5468\u671f\u94a9\u5b50\u4e2d\uff0c\u8c03\u7528 merge \u65b9\u6cd5\u6765\u8ba1\u7b97\u5e76\u586b\u5145\u8fd9\u4e9b\u6570\u7ec4\u3002<\/li>\n
  3. \u5728 span-method \u65b9\u6cd5\u4e2d\uff0c\u6839\u636e\u4e0d\u540c\u7684\u5217\u7d22\u5f15\u4f7f\u7528\u4e0d\u540c\u7684\u903b\u8f91\u6765\u8ba1\u7b97\u5408\u5e76\u8de8\u5ea6\u3002<\/li>\n<\/ol>\n

    \u4fee\u6539\u540e\u7684\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n

    export default {\n  data() {\n    return {\n      waterData: [...],\n      companyArr: [],  \/\/ \u7528\u4e8e\u8ddf\u8e2a\u7b2c\u4e00\u5217\u7684\u53ef\u5408\u5e76\u884c\u6570\n      companyPos: 0,\n      simpleArr: [],   \/\/ \u7528\u4e8e\u8ddf\u8e2a\u7b2c\u4e8c\u5217\u7684\u53ef\u5408\u5e76\u884c\u6570\n      simplePos: 0,\n      symbolArr: [],  \/\/ \u7528\u4e8e\u8ddf\u8e2a\u7b2c\u56db\u5217\u7684\u53ef\u5408\u5e76\u884c\u6570\n      symbolPos: 0,\n    }\n  },\n  created() {\n    this.merge(this.waterData)\n  },\n  methods: {\n    merge(tableData) {\n      \/\/ \u8981\u5408\u5e76\u7684\u6570\u7ec4\u7684\u65b9\u6cd5\n      this.companyArr = [];\n      this.companyPos = 0;\n      this.simpleArr = [];\n      this.simplePos = 0;\n      this.symbolArr = [];\n      this.symbolPos = 0;\n      for (let i = 0; i < tableData.length; i++) {\n        if (i === 0) {\n          \/\/ \u7b2c\u4e00\u884c\u5fc5\u987b\u5b58\u5728\n          this.companyArr.push(1);\n          this.companyPos = 0;\n          this.simpleArr.push(1);\n          this.simplePos = 0;\n          this.symbolArr.push(1);\n          this.symbolPos = 0;\n        } else {\n          \/\/ \u7b2c\u4e00\u5217\n          if (tableData[i].name === tableData[i - 1].name) {\n            this.companyArr[this.companyPos] += 1;\n            this.companyArr.push(0);\n          } else {\n            this.companyArr.push(1);\n            this.companyPos = i;\n          }\n\n          \/\/ \u7b2c\u4e8c\u5217\n          if (\n            tableData[i].name === tableData[i - 1].name &&\n            tableData[i].factor === tableData[i - 1].factor\n          ) {\n            this.simpleArr[this.simplePos] += 1;\n            this.simpleArr.push(0);\n          } else {\n            this.simpleArr.push(1);\n            this.simplePos = i;\n          }\n\n          \/\/ \u7b2c\u56db\u5217\n          if (\n            tableData[i].name === tableData[i - 1].name &&\n            tableData[i].factor === tableData[i - 1].factor &&\n            tableData[i].symbol === tableData[i - 1].symbol\n          ) {\n            this.symbolArr[this.symbolPos] += 1;\n            this.symbolArr.push(0);\n          } else {\n            this.symbolArr.push(1);\n            this.symbolPos = i;\n          }\n        }\n      }\n    },\n    arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n      if (columnIndex === 0) {\n        \/\/ \u5408\u5e76\u7b2c\u4e00\u5217\n        const _row_1 = this.companyArr[rowIndex];\n        const _col_1 = _row_1 > 0 ? 1 : 0; \/\/ \u5982\u679c\u88ab\u5408\u5e76\u4e86_row=0\u5219\u5b83\u8fd9\u4e2a\u5217\u9700\u8981\u53d6\u6d88\n        return {\n          rowspan: _row_1,\n          colspan: _col_1,\n        };\n      } else if (columnIndex === 1) {\n        \/\/ \u5408\u5e76\u7b2c\u4e8c\u5217\n        const _row_2 = this.simpleArr[rowIndex];\n        const _col_2 = _row_2 > 0 ? 1 : 0;\n        return {\n          rowspan: _row_2,\n          colspan: _col_2,\n        };\n      } else if (columnIndex === 3) {\n        \/\/ \u5408\u5e76\u7b2c\u56db\u5217\n        const _row_4 = this.symbolArr[rowIndex];\n        const _col_4 = _row_4 > 0 ? 1 : 0;\n        return {\n          rowspan: _row_4,\n          colspan: _col_4,\n        };\n      } else {\n        return {\n          rowspan: 1,\n          colspan: 1,\n        };\n      }\n    },\n  },\n};<\/pre>\n
     \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
    \u8fd9\u6837\uff0c\u5c31\u53ef\u4ee5\u6b63\u786e\u5408\u5e76 el-table \u8868\u683c\u7684\u524d\u4e00\u5217\u3001\u7b2c\u4e8c\u5217\u548c\u7b2c\u56db\u5217\u3002<\/p>\n
    \u4ee5\u4e0a\u5c31\u662f\u4f7f\u7528 `span-method` \u5408\u5e76 el-table \u8868\u683c\u65f6\uff0c\u7b2c\u56db\u5217\u65e0\u6cd5\u5408\u5e76\uff1f\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
    el-table\u5408\u5e76\u90e8\u5206\u6210\u529f \u95ee\u9898\uff1a \u4f7f\u7528 span-method \u65b9\u6cd5\u5408\u5e76 el-table \u8868\u683c\u7684\u67d0\u4e9b\u5217\uff0c\u4f46\u53d1\u73b0\u7b2c\u56db\u5217\u65e0\u6cd5\u5408\u5e76\u3002 \u539f\u56e0\uff1a \u539f\u59cb\u5b9e\u73b0\u4e2d\uff0c\u7b2c\u56db\u5217\u7684\u5408\u5e76\u5224\u65ad\u6761\u4ef6\u4e0d\u6b63\u786e\u3002 \u89e3\u51b3\u65b9\u6848\uff1a \u4f7f\u7528\u6b63\u786e\u7684\u5408\u5e76\u903b\u8f91\uff0c\u5177\u4f53\u6b65\u9aa4\u5982\u4e0b\uff1a \u5728 data \u4e2d\u521b\u5efa\u4e09\u4e2a\u6570\u7ec4\uff0c\u7528\u4e8e\u8ddf\u8e2a\u7b2c\u4e00\u5217\u3001\u7b2c\u4e8c\u5217\u548c\u7b2c\u56db\u5217\u7684\u53ef\u5408\u5e76\u884c\u6570\u3002 \u5728 created \u751f\u547d\u5468\u671f\u94a9\u5b50\u4e2d\uff0c\u8c03\u7528 merge \u65b9\u6cd5\u6765\u8ba1\u7b97\u5e76\u586b\u5145\u8fd9\u4e9b\u6570\u7ec4\u3002 \u5728 span-method \u65b9\u6cd5\u4e2d\uff0c\u6839\u636e\u4e0d\u540c\u7684\u5217\u7d22\u5f15\u4f7f\u7528\u4e0d\u540c\u7684\u903b\u8f91\u6765\u8ba1\u7b97\u5408\u5e76\u8de8\u5ea6\u3002 \u4fee\u6539\u540e\u7684\u4ee3\u7801\u5982\u4e0b\uff1a export default { data() { return { waterData: […], companyArr: [], \/\/ \u7528\u4e8e\u8ddf\u8e2a\u7b2c\u4e00\u5217\u7684\u53ef\u5408\u5e76\u884c\u6570 companyPos: 0, simpleArr: [], \/\/ \u7528\u4e8e\u8ddf\u8e2a\u7b2c\u4e8c\u5217\u7684\u53ef\u5408\u5e76\u884c\u6570 simplePos: 0, symbolArr: [], \/\/ \u7528\u4e8e\u8ddf\u8e2a\u7b2c\u56db\u5217\u7684\u53ef\u5408\u5e76\u884c\u6570 symbolPos: 0, } }, created() { this.merge(this.waterData) […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-28226","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/28226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=28226"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/28226\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=28226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=28226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=28226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}