{"id":1892,"date":"2023-06-06T10:07:19","date_gmt":"2023-06-06T02:07:19","guid":{"rendered":"https:\/\/zhuxinyong.com\/?p=1892"},"modified":"2024-08-20T09:16:33","modified_gmt":"2024-08-20T01:16:33","slug":"ant-design-vue-table-%e5%90%88%e5%b9%b6%e5%8d%95%e5%85%83%e6%a0%bc%ef%bc%8c%e6%b7%bb%e5%8a%a0%e4%ba%8b%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/zhuxinyong.com\/?p=1892","title":{"rendered":"<strong>Ant-Design-Vue table \u5408\u5e76\u5355\u5143\u683c\uff0c\u6dfb\u52a0\u4e8b\u4ef6<\/strong>"},"content":{"rendered":"\n<p>\u5b98\u65b9\u7ed9\u51fa\u4e86\u5408\u5e76\u5355\u5143\u683c\u7684\u4f8b\u5b50\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">const columns = [\n    {\n      title: 'Home phone',\n      colSpan: 2,\n      dataIndex: 'tel',\n      customRender: (value, row, index) =&gt; {\n        const obj = {\n          children: value,\n          attrs: {},\n        };\n        if (index === 2) {\n          obj.attrs.rowSpan = 2;\n        }\n        \/\/ These two are merged into above cell\n        if (index === 3) {\n          obj.attrs.rowSpan = 0;\n        }\n        if (index === 4) {\n          obj.attrs.colSpan = 0;\n        }\n        return obj;\n      },\n    },\n]<\/code><\/pre>\n\n\n\n<p>\u4e3b\u8981\u4f7f\u7528\u7684\u662f\uff1a<strong>customRender<\/strong> :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"79\" src=\"https:\/\/zhuxinyong.com\/wp-content\/uploads\/2023\/06\/Pasted-image-20230605142236-1024x79.png\" alt=\"\" class=\"wp-image-1893\" srcset=\"https:\/\/zhuxinyong.com\/wp-content\/uploads\/2023\/06\/Pasted-image-20230605142236-1024x79.png 1024w, https:\/\/zhuxinyong.com\/wp-content\/uploads\/2023\/06\/Pasted-image-20230605142236-300x23.png 300w, https:\/\/zhuxinyong.com\/wp-content\/uploads\/2023\/06\/Pasted-image-20230605142236-768x59.png 768w, https:\/\/zhuxinyong.com\/wp-content\/uploads\/2023\/06\/Pasted-image-20230605142236-670x52.png 670w, https:\/\/zhuxinyong.com\/wp-content\/uploads\/2023\/06\/Pasted-image-20230605142236.png 1359w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u4f46\u662f\u5b98\u65b9\u6ca1\u6709\u7ed9\u51fa\u5982\u4f55\u5728\u5408\u5e76\u5355\u5143\u683c\u7684\u60c5\u51b5\u4e0b\uff0c\u4e14\u6dfb\u52a0\u5355\u51fb\u4e8b\u4ef6\u3002\u7ecf\u8fc7\u5c1d\u8bd5\u4e4b\u540e\u53d1\u73b0 customRender \u8fd4\u56de\u7684\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">const obj = { children: value, attrs: {}, };<\/code><\/pre>\n\n\n\n<p>\u5176\u4e2d\u7684 children \u53ef\u4ee5\u501f\u52a9 createElement \u8fd4\u56de\u4e00\u4e2a VNode \u7684\u5f62\u5f0f\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">render:function(createElement){\n    return \n        \/\/ @returns {VNode}\n        createElement(\n          \/\/ {String | Object | Function}\n          \/\/ \u4e00\u4e2a HTML \u6807\u7b7e\u540d\u3001\u7ec4\u4ef6\u9009\u9879\u5bf9\u8c61\uff0c\u6216\u8005\n          \/\/ resolve \u4e86\u4e0a\u8ff0\u4efb\u4f55\u4e00\u79cd\u7684\u4e00\u4e2a async \u51fd\u6570\u3002\u5fc5\u586b\u9879\u3002\n          \"div\",\n\n          \/\/ {Object}\n          \/\/ \u4e00\u4e2a\u4e0e\u6a21\u677f\u4e2d attribute \u5bf9\u5e94\u7684\u6570\u636e\u5bf9\u8c61\u3002\u53ef\u9009\u3002\n          {\n            \/\/ (\u8be6\u60c5\u89c1\u4e0b\u4e00\u8282)\n          },\n\n          \/\/ {String | Array}\n          \/\/ \u5b50\u7ea7\u865a\u62df\u8282\u70b9 (VNodes)\uff0c\u7531 `createElement()` \u6784\u5efa\u800c\u6210\uff0c\n          \/\/ \u4e5f\u53ef\u4ee5\u4f7f\u7528\u5b57\u7b26\u4e32\u6765\u751f\u6210\u201c\u6587\u672c\u865a\u62df\u8282\u70b9\u201d\u3002\u53ef\u9009\u3002\n          [\n            \"\u5148\u5199\u4e00\u4e9b\u6587\u5b57\",\n            createElement(\"h1\", \"\u4e00\u5219\u5934\u6761\"),\n            createElement(MyComponent, {\n              props: {\n                someProp: \"foobar\",\n              },\n            }),\n          ]\n        );\n\n}<\/code><\/pre>\n\n\n\n<p>\u6700\u7ec8\u89e3\u51b3\u65b9\u6848\u5982\u4e0b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">data(){\n    const vm = this\n    const columns = [\n        {\n          title: 'Home phone',\n          colSpan: 2,\n          dataIndex: 'tel',\n          customRender: (value, row, index) => {\n            var child = vm.$createElement('a',{\n                domProps:{\n                    innerHTML:value\n                },\n                on:{\n                    click:function(){\n                        vm.handleClick(value,row,index)\n                    }\n                }\n            })\n            const obj = {\n              children: child,\n              attrs: {},\n            };\n            if (index === 2) {\n              obj.attrs.rowSpan = 2;\n            }\n            \/\/ These two are merged into above cell\n            if (index === 3) {\n              obj.attrs.rowSpan = 0;\n            }\n            if (index === 4) {\n              obj.attrs.colSpan = 0;\n            }\n            return obj;\n          },\n        },\n    ]\n    return {\n        columns,\n    }\n}\nmethods:{\n    handleClick(value,row,index){\n        \/\/...\n    }\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5b98\u65b9\u7ed9\u51fa\u4e86\u5408\u5e76\u5355\u5143\u683c\u7684\u4f8b\u5b50\uff1a \u4e3b\u8981\u4f7f\u7528\u7684\u662f\uff1acustomRender : \u4f46\u662f\u5b98\u65b9\u6ca1\u6709\u7ed9\u51fa\u5982\u4f55\u5728\u5408\u5e76&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,20],"tags":[6],"class_list":["post-1892","post","type-post","status-publish","format-standard","hentry","category-all","category-frontend","tag-javascript"],"_links":{"self":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1892","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1892"}],"version-history":[{"count":2,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1892\/revisions"}],"predecessor-version":[{"id":2126,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1892\/revisions\/2126"}],"wp:attachment":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1892"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1892"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}