{"id":2929,"date":"2024-11-10T12:16:13","date_gmt":"2024-11-10T04:16:13","guid":{"rendered":"https:\/\/fwq.ai\/blog\/2929\/"},"modified":"2024-11-10T12:16:13","modified_gmt":"2024-11-10T04:16:13","slug":"%e5%a6%82%e4%bd%95%e5%9c%a8-el-table-%e4%b8%ad%e5%ae%9e%e7%8e%b0%e5%90%88%e5%b9%b6%e8%a1%8c-hover-%e6%a0%b7%e5%bc%8f%e8%87%aa%e5%ae%9a%e4%b9%89%ef%bc%9f","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/2929\/","title":{"rendered":"\u5982\u4f55\u5728 el-table \u4e2d\u5b9e\u73b0\u5408\u5e76\u884c Hover \u6837\u5f0f\u81ea\u5b9a\u4e49\uff1f"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/img.php.cn\/upload\/article\/001\/246\/273\/173094318487266.jpg\" class=\"aligncenter\" title=\"\u5982\u4f55\u5728 el-table \u4e2d\u5b9e\u73b0\u5408\u5e76\u884c Hover \u6837\u5f0f\u81ea\u5b9a\u4e49\uff1f\u63d2\u56fe\" alt=\"\u5982\u4f55\u5728 el-table \u4e2d\u5b9e\u73b0\u5408\u5e76\u884c Hover \u6837\u5f0f\u81ea\u5b9a\u4e49\uff1f\u63d2\u56fe\" \/><\/p>\n<p><strong>\u5982\u4f55\u5728 el-table \u4e2d\u81ea\u5b9a\u4e49\u5408\u5e76\u884c hover \u6837\u5f0f\u548c\u903b\u8f91\uff1f<\/strong><\/p>\n<p><strong>\u95ee\u9898\uff1a<\/strong><\/p>\n<ul>\n<li>\u5982\u4f55\u4f7f hover \u5728\u5408\u5e76\u884c\u4e0a\u89e6\u53d1\u6240\u6709\u884c\u7684\u7a81\u51fa\u663e\u793a\uff1f<\/li>\n<li>\u5982\u4f55\u4ec5\u7a81\u51fa\u663e\u793a\u5408\u5e76\u884c\u53f3\u4fa7\uff1f<\/li>\n<\/ul>\n<p><strong>\u7b54\u6848\uff1a<\/strong><\/p>\n<pre>&lt;el-table\n  ref=\"table\"\n  :data=\"tabledata\"\n  row-key=\"id\"\n  @row-hover=\"handlerowhover\"\n  ...\n\/&gt;<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236    <\/p>\n<pre>handleRowHover(row, column, cell, event) {\n  if (row.spanMerge) {\n    \/\/ \u89e6\u53d1\u6240\u6709\u884c\u7684\u7a81\u51fa\u663e\u793a\n    let index = row.index;\n    let parentNode = this.$refs.table.bodyWrapper.children[0];\n    let parentNodeChildren = parentNode.children;\n    for (let i = index; i &lt; index + row.spanMerge; i++) {\n      parentNodeChildren[i].classList.add('ivu-table-row--selected');\n    }\n  } else {\n    \/\/ \u4ec5\u7a81\u51fa\u663e\u793a\u5408\u5e76\u884c\u53f3\u4fa7\n    if (row.spanMergeRight) {\n      let index = row.index;\n      let parentNode = this.$refs.table.bodyWrapper.children[0];\n      let parentNodeChildren = parentNode.children;\n      for (let i = index; i &lt; index + row.spanMergeRight; i++) {\n        parentNodeChildren[i].classList.add('ivu-table-row--selected');\n      }\n    }\n  }\n}<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p><strong>\u6548\u679c\u9884\u89c8\uff1a<\/strong><\/p>\n<p>[\u6548\u679c\u56fe](https:\/\/segmentfault.com\/img\/bvdahqi)<\/p>\n<p>\u4ee5\u4e0a\u5c31\u662f\u5982\u4f55\u5728 el-table \u4e2d\u5b9e\u73b0\u5408\u5e76\u884c Hover \u6837\u5f0f\u81ea\u5b9a\u4e49\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":"<p>\u5982\u4f55\u5728 el-table \u4e2d\u81ea\u5b9a\u4e49\u5408\u5e76\u884c hover \u6837\u5f0f\u548c\u903b\u8f91\uff1f \u95ee\u9898\uff1a \u5982\u4f55\u4f7f hover \u5728\u5408\u5e76\u884c\u4e0a\u89e6\u53d1\u6240\u6709\u884c\u7684\u7a81\u51fa\u663e\u793a\uff1f \u5982\u4f55\u4ec5\u7a81\u51fa\u663e\u793a\u5408\u5e76\u884c\u53f3\u4fa7\uff1f \u7b54\u6848\uff1a &lt;el-table ref=&#8221;table&#8221; :data=&#8221;tabledata&#8221; row-key=&#8221;id&#8221; @row-hover=&#8221;handlerowhover&#8221; &#8230; \/&gt; \u767b\u5f55\u540e\u590d\u5236 handleRowHover(row, column, cell, event) { if (row.spanMerge) { \/\/ \u89e6\u53d1\u6240\u6709\u884c\u7684\u7a81\u51fa\u663e\u793a let index = row.index; let parentNode = this.$refs.table.bodyWrapper.children[0]; let parentNodeChildren = parentNode.children; for (let i = index; i &lt; index + row.spanMerge; i++) { parentNodeChildren[i].classList.add(&#8216;ivu-table-row&#8211;selected&#8217;); } [&hellip;]<\/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-2929","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/2929","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=2929"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/2929\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=2929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=2929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=2929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}