{"id":28235,"date":"2024-11-24T17:18:51","date_gmt":"2024-11-24T09:18:51","guid":{"rendered":"https:\/\/fwq.ai\/blog\/28235\/"},"modified":"2024-11-24T17:18:51","modified_gmt":"2024-11-24T09:18:51","slug":"el-table-%e5%90%88%e5%b9%b6%e5%89%8d%e5%9b%9b%e5%88%97%ef%bc%9a%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\/28235\/","title":{"rendered":"el-table \u5408\u5e76\u524d\u56db\u5217\uff1a\u4e3a\u4ec0\u4e48\u7b2c\u56db\u5217\u65e0\u6cd5\u5408\u5e76\uff1f"},"content":{"rendered":"

\"el-table<\/p>\n

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

\u95ee\u9898\u63cf\u8ff0:<\/strong><\/p>\n

\u9700\u8981\u5408\u5e76el-table\u4e2d\u524d4\u5217\u7684\u5185\u5bb9\uff0c\u4f46\u662f\u7b2c4\u5217\u65e0\u6cd5\u5408\u5e76\u3002<\/p>\n

\u6e32\u67d3\u4ee3\u7801:<\/strong><\/p>\n

<el-table :data=\"waterData\" border :span-method=\"handleSpanM\">\n  <el-table-column align=\"center\" width=\"65\">\n    <template slot-scope=\"scope\">{{scope.row.name }}<\/template>\n  <\/el-table-column>\n  <el-table-column align=\"center\" width=\"70\" label=\"\u7cfb\u6570\">\n    <template slot-scope=\"scope\">\n      <el-input size=\"mini\" class=\"\" v-model=\"scope.row.factor\"><\/el-input>\n    <\/template>\n  <\/el-table-column>\n  <el-table-column align=\"center\" width=\"120\" label=\"\u7b49\u7ea7\u5206\u6570\">\n    <template slot-scope=\"scope\">\n      <el-input size=\"mini\" v-model=\"scope.row.grade\"><\/el-input>\n    <\/template>\n  <\/el-table-column>\n  <el-table-column align=\"center\" width=\"180\" label=\"\u7b26\u53f7\u9009\u62e9\">\n    <template slot-scope=\"scope\">\n      <div class=\"symbol\">\n        <span style=\"display: none;\">{{ scope.row.symbol }}<\/span>\n        <span class=\"symbol_range\"><\/span>\n      <\/div>\n    <\/template>\n  <\/el-table-column>\n  <el-table-column width=\"120\" v-for=\"(column,index) in 6\" :key=\"`column-${index}`\">\n    <template slot=\"header\">\n      <div>\n        <el-input size=\"small\" v-model=\"waterForm[`water${index + 1}_label`]\">\n        <\/el-input>\n      <\/div>\n    <\/template>\n    <template slot-scope=\"scope\">\n      <div>\n        <el-input size=\"small\" v-model=\"waterForm[`water${index + 1}_factor`]\"><\/el-input>\n      <\/div>\n    <\/template>\n  <\/el-table-column>\n<\/el-table><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u89e3\u51b3\u65b9\u6cd5:<\/strong><\/p>\n
\u53ef\u4ee5\u4f7f\u7528\u81ea\u5b9a\u4e49\u7684\u5408\u5e76\u65b9\u6cd5\u6765\u5b9e\u73b0\u7279\u5b9a\u5217\u7684\u5408\u5e76\u3002<\/p>\n
\/\/ \u5408\u5e76\u65b9\u6cd5\nmerge(tableData) {\n  this.companyArr = [];\n  this.companyPos = 0;\n  this.simpleArr = [];\n  this.simplePos = 0;\n  this.symbolArr = [];\n  this.symbolPos = 0;\n  for (var 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\n\/\/\u5408\u5e76\u65b9\u6cd5\narraySpanMethod({ 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_3 = this.symbolArr[rowIndex];\n    const _col_3 = _row_3 > 0 ? 1 : 0;\n    return {\n      rowspan: _row_3,\n      colspan: _col_3,\n    };\n  }\n},<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u5b8c\u6574\u793a\u4f8b:<\/strong><\/p>\n
<template>\n  <el-table :data=\"waterData\" border :span-method=\"arraySpanMethod\">\n    <el-table-column align=\"center\" width=\"65\">\n      <template slot-scope=\"scope\">{{scope.row.name }}<\/template>\n    <\/el-table-column>\n    <el-table-column align=\"center\" width=\"70\" label=\"\u7cfb\u6570\">\n      <template slot-scope=\"scope\">\n        <el-input size=\"mini\" class=\"\" v-model=\"scope.row.factor\"><\/el-input>\n      <\/template>\n    <\/el-table-column>\n    <el-table-column align=\"center\" width=\"120\" label=\"\u7b49\u7ea7\u5206\u6570\">\n      <template slot-scope=\"scope\">\n        <el-input size=\"mini\" v-model=\"scope.row.grade\"><\/el-input>\n      <\/template>\n    <\/el-table-column>\n    <el-table-column align=\"center\" width=\"180\" label=\"\u7b26\u53f7\u9009\u62e9\">\n      <template slot-scope=\"scope\">\n        <div class=\"symbol\">\n          <span style=\"display: none;\">{{ scope.row.symbol }}<\/span>\n          <span class=\"symbol_range\"><\/span>\n        <\/div>\n      <\/template>\n    <\/el-table-column>\n    <el-table-column width=\"120\" v-for=\"(column,index) in 6\" :key=\"`column-${index}`\">\n      <template slot=\"header\">\n        <div>\n          <el-input size=\"small\" v-model=\"waterForm[`water${index + 1}_label`]\">\n          <\/el-input>\n        <\/div>\n      <\/template>\n      <template slot-scope=\"scope\">\n        <div>\n          <el-input size=\"small\" v-model=\"waterForm[`water${index + 1}_factor`]\"><\/el-input>\n        <\/div>\n      <\/template>\n    <\/el-table-column>\n  <\/el-table>\n<\/template>\n\n<script>\nexport default {\n  data() {\n    return {\n      tableData:[\n        {name:'\u964d\u6c34(mm)',factor:'0.7',grade:'',symbol: '1','':'','':'','':'','':'','':'','':''},\n        {name:'\u964d\u6c34(mm)',factor:'0.7',grade:'',symbol: '1','':'','':'','':'','':'','':'','':''},\n        {name:'\u964d\u6c34(mm)',factor:'0.7',grade:'',symbol: '1','':'','':'','':'','':'','':'','':''},\n        {name:'\u964d\u6c34(mm)',factor:'0.7',grade:'',symbol: '1','':'','':'','':'','':'','':'','':''},\n        {name:'\u98ce\u901f(m\/s)',factor:'0.5',grade:'',symbol: '0','':'','':'','':'','':'','':'','':''},\n        {name:'\u98ce\u901f(m\/s)',factor:'0.5',grade:'',symbol: '0','':'','':'','':'','':'','':'','':''},<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u4ee5\u4e0a\u5c31\u662fel-table \u5408\u5e76\u524d\u56db\u5217\uff1a\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\u90e8\u5206\u4e0d\u6210\u529f\uff1f \u95ee\u9898\u63cf\u8ff0: \u9700\u8981\u5408\u5e76el-table\u4e2d\u524d4\u5217\u7684\u5185\u5bb9\uff0c\u4f46\u662f\u7b2c4\u5217\u65e0\u6cd5\u5408\u5e76\u3002 \u6e32\u67d3\u4ee3\u7801: <el-table :data=”waterData” border :span-method=”handleSpanM”> <el-table-column align=”center” width=”65″> <template slot-scope=”scope”>{{scope.row.name }}<\/template> <\/el-table-column> <el-table-column align=”center” width=”70″ label=”\u7cfb\u6570”> <template slot-scope=”scope”> <el-input size=”mini” class=”” v-model=”scope.row.factor”><\/el-input> <\/template> <\/el-table-column> <el-table-column align=”center” width=”120″ label=”\u7b49\u7ea7\u5206\u6570”> <template slot-scope=”scope”> <el-input size=”mini” v-model=”scope.row.grade”><\/el-input> <\/template> <\/el-table-column> <el-table-column align=”center” width=”180″ label=”\u7b26\u53f7\u9009\u62e9”> <template slot-scope=”scope”> <div class=”symbol”> <span style=”display: none;”>{{ scope.row.symbol }}<\/span> <span class=”symbol_range”><\/span> <\/div> <\/template> […]<\/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-28235","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/28235","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=28235"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/28235\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=28235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=28235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=28235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}