133-9c128e7e1f8e9241073d.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[133],{899:function(n,s,a){"use strict";a.r(s),a.d(s,"default",(function(){return A}));var t=a(846),p=a.n(t),o=a(521),e=a.n(o),c=a(845),u=a.n(c),l=a(840),k=a.n(l),i=a(841),r=a.n(i),d=a(842),m=a.n(d),g=a(843),y=a.n(g),h=a(844),b=a.n(h),_=a(0),w=a.n(_),v=a(210),f=a(145),R=a(857);function C(n){var s=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(n){return!1}}();return function(){var a,t=b()(n);if(s){var p=b()(this).constructor;a=Reflect.construct(t,arguments,p)}else a=t.apply(this,arguments);return y()(this,a)}}var S=function(){var n=[{title:"商品",bodyRender:function(n){return w.a.createElement("div",null,n.item_id)}},{title:"访问量",name:"bro_uvpv",width:"200px"},{title:"库存",name:"stock_num",width:"100px",isMoney:!0,isMoney:!0},{width:"6em",title:"销售量",name:"sold_num"}];return w.a.createElement(f.Table,{columns:n,datasets:[{item_id:"5024217",bro_uvpv:"1/10",stock_num:"60",sold_num:0},{item_id:"5024277",bro_uvpv:"0/0",stock_num:59,sold_num:0},{item_id:"13213123",bro_uvpv:"0/0",stock_num:159,sold_num:0}],rowKey:"item_id"})},x=function(){var n=[{item_id:"5024217",bro_uvpv:"0/0",stock_num:"60",sold_num:0},{item_id:"5024277",bro_uvpv:"0/0",stock_num:59,sold_num:0},{item_id:"13213123",bro_uvpv:"0/0",stock_num:159,sold_num:0}],s=[{title:"商品",bodyRender:function(n){return w.a.createElement("div",null,n.item_id)}},{title:"访问量",name:"bro_uvpv",width:"200px"},{title:"库存",name:"stock_num",width:"100px",textAlign:"center",isMoney:!0},{width:"6em",title:"销售量",name:"sold_num"}],a=function(a){m()(p,a);var t=C(p);function p(n){var s;return k()(this,p),(s=t.call(this,n)).state={loading:!0},s}return r()(p,[{key:"componentWillMount",value:function(){var n=this;setTimeout((function(){n.setState({loading:!1})}),3e3)}},{key:"onChange",value:function(n){this.setState(n)}},{key:"render",value:function(){return w.a.createElement(f.Table,{columns:s,datasets:n,onChange:this.onChange.bind(this),loading:this.state.loading,rowKey:"item_id"})}}]),p}(w.a.Component);return w.a.createElement(a,null)},E=function(){var n=[{item_id:"5024217",bro_uvpv:"0/0",stock_num:"60",sold_num:0},{item_id:"5024277",bro_uvpv:"0/0",stock_num:59,sold_num:0},{item_id:"13213123",bro_uvpv:"0/0",stock_num:159,sold_num:0}],s=[{title:"商品",bodyRender:function(n){return w.a.createElement("div",null,n.item_id)}},{title:"访问量",name:"bro_uvpv",width:"200px"},{title:"库存",name:"stock_num",width:"100px",textAlign:"center",isMoney:!0},{width:"6em",title:"销售量",name:"sold_num"}],a=function(a){m()(p,a);var t=C(p);function p(n){var s;return k()(this,p),(s=t.call(this,n)).state={current:1,total:101,pageSize:20,pageSizeOptions:[20,30]},s}return r()(p,[{key:"onChange",value:function(n){console.log(n),this.setState({current:n.current,pageSize:n.pageSize})}},{key:"render",value:function(){return w.a.createElement(f.Table,{columns:s,datasets:n,rowKey:"item_id",onChange:this.onChange.bind(this),pageInfo:this.state})}}]),p}(w.a.Component);return w.a.createElement(a,null)},K=function(){var n=[{item_id:"5024217",bro_uvpv:"0/0",stock_num:"60",sold_num:0},{item_id:"5024277",bro_uvpv:"0/0",stock_num:59,sold_num:0},{item_id:"13213123",bro_uvpv:"0/0",stock_num:159,sold_num:0}],s=[{title:"商品",bodyRender:function(n){return w.a.createElement("div",null,n.item_id)}},{title:"访问量",name:"bro_uvpv",needSort:!0,width:"200px"},{title:"库存",name:"stock_num",width:"100px",needSort:!0,textAlign:"center",isMoney:!0},{width:"6em",title:"销售量",needSort:!0,name:"sold_num"}],a=function(a){m()(p,a);var t=C(p);function p(n){var s;return k()(this,p),(s=t.call(this,n)).state={sortBy:"stock_num",sortType:"desc"},s}return r()(p,[{key:"onChange",value:function(n){this.setState(Object(R.assign)({},this.state,n))}},{key:"render",value:function(){return w.a.createElement(f.Table,{columns:s,datasets:n,rowKey:"item_id",onChange:this.onChange.bind(this),sortBy:this.state.sortBy,sortType:this.state.sortType})}}]),p}(w.a.Component);return w.a.createElement(a,null)},j=function(){var n=[{item_id:"5024217",bro_uvpv:"0/0",stock_num:"60",sold_num:0},{item_id:"5024277",bro_uvpv:"0/0",stock_num:59,sold_num:0},{item_id:"13213123",bro_uvpv:"0/0",stock_num:159,sold_num:0}],s=[{item_id:"4217",bro_uvpv:"0/0",stock_num:"60",sold_num:0},{item_id:"50",bro_uvpv:"0/0",stock_num:59,sold_num:0},{item_id:"13123",bro_uvpv:"0/0",stock_num:159,sold_num:0}],a=[{title:"商品",width:50,bodyRender:function(n){return w.a.createElement("div",null,n.item_id)}},{title:"访问量",name:"bro_uvpv",width:10},{title:"库存",name:"stock_num",width:20},{title:"销售量",name:"sold_num",width:20}],t=function(t){m()(o,t);var p=C(o);function o(s){var a;return k()(this,o),(a=p.call(this,s)).state={page:{pageSize:3,current:1,totalItem:6},datasets:n,selectedRowKeys:["5024217","5024277"]},a}return r()(o,[{key:"onSelect",value:function(n,s,a){n.length&&f.Notify.success(JSON.stringify(n)),this.setState({selectedRowKeys:n})}},{key:"getRowConf",value:function(n,s){return{canSelect:s%2==0}}},{key:"onChange",value:function(a){this.setState({page:{pageSize:3,current:a.current,total:6},datasets:1===a.current?n:s})}},{key:"render",value:function(){var n=this,s=this;return w.a.createElement(f.Table,{columns:a,datasets:this.state.datasets,rowKey:"item_id",getRowConf:this.getRowConf,pageInfo:this.state.page,paginationType:"lite",onChange:function(s){n.onChange(s)},selection:{selectedRowKeys:this.state.selectedRowKeys,needCrossPage:!0,onSelect:function(n,a,t){s.onSelect(n,a,t)}}})}}]),o}(w.a.Component);return w.a.createElement(t,null)},T=function(){var n=[{item_id:"5024217",bro_uvpv:"0/0",stock_num:"60",sold_num:0},{item_id:"5024277",bro_uvpv:"0/0",stock_num:59,sold_num:0},{item_id:"13213123",bro_uvpv:"0/0",stock_num:159,sold_num:0}],s=[{title:"商品",width:"50px",bodyRender:function(n){return w.a.createElement("div",null,n.item_id)}},{title:"访问量",name:"bro_uvpv",width:"100px"},{title:"库存",name:"stock_num",width:"100px"},{title:"销售量",name:"sold_num"}],a=function(a){m()(p,a);var t=C(p);function p(n){var s;return k()(this,p),(s=t.call(this,n)).state={limit:10,current:0,total:101},s}return r()(p,[{key:"getRowConf",value:function(n,s){return{canSelect:!0,rowClass:"row-".concat(s)}}},{key:"onChange",value:function(n){this.setState(n)}},{key:"render",value:function(){return w.a.createElement(f.Table,{columns:s,datasets:n,onChange:this.onChange.bind(this),getRowConf:this.getRowConf,rowKey:"item_id"})}}]),p}(w.a.Component);return w.a.createElement(a,null)},z=function(){var n=[{item_id:"5024217",bro_uvpv:"0/0",stock_num:"60",sold_num:0},{item_id:"5024277",bro_uvpv:"0/0",stock_num:59,sold_num:0},{item_id:"13213123",bro_uvpv:"0/0",stock_num:159,sold_num:0}],s=[{title:"商品",width:"150px",bodyRender:function(n){return w.a.createElement("div",null,n.item_id)}},{title:"访问量",name:"bro_uvpv",width:"100px"},{title:"库存",name:"stock_num",width:"100px"},{title:"销售量",name:"sold_num"}],a=function(a){m()(p,a);var t=C(p);function p(n){var s;return k()(this,p),(s=t.call(this,n)).state={limit:10,current:0,total:101},s}return r()(p,[{key:"getRowConf",value:function(n,s){return{canSelect:!0}}},{key:"onChange",value:function(n){this.setState(n)}},{key:"render",value:function(){return w.a.createElement(f.Table,{columns:s,datasets:n,onChange:this.onChange.bind(this),getRowConf:this.getRowConf,rowKey:"item_id",expandation:{isExpanded:function(n,s){return s%2==0},expandRender:function(n){return w.a.createElement("div",null,n.title)}}})}}]),p}(w.a.Component);return w.a.createElement(a,null)},N=function(){var n=[{item_id:"5024217",bro_uvpv:"0/0",stock_num:"60",sold_num:0},{item_id:"5024277",bro_uvpv:"0/0",stock_num:59,sold_num:0},{item_id:"13213123",bro_uvpv:"0/0",stock_num:159,sold_num:0}],s=[{item_id:"4217",bro_uvpv:"0/0",stock_num:"60",sold_num:0},{item_id:"50",bro_uvpv:"0/0",stock_num:59,sold_num:0},{item_id:"13123",bro_uvpv:"0/0",stock_num:159,sold_num:0}],a=[{title:"商品",width:"150px",bodyRender:function(n){return w.a.createElement("div",null,n.item_id)}},{title:"访问量",name:"bro_uvpv",width:"100px"},{title:"库存",name:"stock_num",width:"100px"},{title:"销售量",name:"sold_num"}],t=function(n){m()(a,n);var s=C(a);function a(){var n;k()(this,a);for(var t=arguments.length,p=new Array(t),o=0;o<t;o++)p[o]=arguments[o];return n=s.call.apply(s,[this].concat(p)),u()(e()(n),"onClick",(function(){f.Notify.success("".concat(n.props.data.length," elements was selected"))})),n}return r()(a,[{key:"render",value:function(){return w.a.createElement(f.Button,{key:"comp",className:"child-comps",onClick:this.onClick},"Click")}}]),a}(w.a.Component),p=function(p){m()(c,p);var o=C(c);function c(s){var a;return k()(this,c),a=o.call(this,s),u()(e()(a),"onSelect",(function(n){a.setState({selectedRowKeys:n})})),a.state={datasets:n,page:{pageSize:3,current:1,totalItem:6},selectedRowKeys:[]},a}return r()(c,[{key:"getRowConf",value:function(n,s){return{canSelect:!0}}},{key:"onChange",value:function(a){this.setState({page:{pageSize:3,current:a.current,total:6},datasets:1===a.current?n:s})}},{key:"render",value:function(){var n=this;return w.a.createElement(f.Table,{columns:a,datasets:this.state.datasets,onChange:this.onChange.bind(this),getRowConf:this.getRowConf,pageInfo:this.state.page,rowKey:"item_id",batchComponents:[w.a.createElement("span",{key:"pure",className:"child-comps"},"This is a DOM element."," "),function(n){return w.a.createElement("span",{key:"func",className:"child-comps",style:{color:"blueviolet"}}," ","This is a function, ",n.length," elements was selected."," ")},t],selection:{selectedRowKeys:this.state.selectedRowKeys,onSelect:function(s,a,t){n.onSelect(s)},needCrossPage:!0}})}}]),c}(w.a.Component);return w.a.createElement(p,null)},D=function(){var n=[{title:"商品",width:"150px",bodyRender:function(n){return w.a.createElement("div",null,n.item_id)}},{title:"访问量",name:"bro_uvpv",width:"100px"},{title:"库存",name:"stock_num",width:"100px"},{title:"销售量",name:"sold_num"}];return w.a.createElement(f.Table,{columns:n,datasets:[]})},M=function(){var n=[{item_id:"5024217",bro_uvpv:"0/0",stock_num:0,sold_num:1},{item_id:"5024277",bro_uvpv:"0/0",stock_num:59,sold_num:0},{item_id:"13213123",bro_uvpv:"0/0",stock_num:159,sold_num:0}],s=[{title:"商品",name:"item_id"},{title:"访问量",name:"bro_uvpv"},{title:"库存",name:"stock_num"},{title:"销售量",name:"sold_num"}],a=function(a){m()(p,a);var t=C(p);function p(){var s;k()(this,p);for(var a=arguments.length,o=new Array(a),c=0;c<a;c++)o[c]=arguments[c];return s=t.call.apply(t,[this].concat(o)),u()(e()(s),"state",{page:{pageSize:3,current:1,total:3},datasets:n,selectedRowKeys:["5024217"],indeterminateRowKeys:["5024277"]}),u()(e()(s),"onSelect",(function(n){console.log("selectedRowKeys: ",n),s.setState({selectedRowKeys:n})})),s}return r()(p,[{key:"render",value:function(){var n=this;return w.a.createElement(f.Table,{rowKey:"item_id",columns:s,datasets:this.state.datasets,pageInfo:this.state.page,selection:{selectedRowKeys:this.state.selectedRowKeys,indeterminateRowKeys:this.state.indeterminateRowKeys,onSelect:function(s,a,t){n.onSelect(s,a,t)}}})}}]),p}(w.a.Component);return w.a.createElement(a,null)};function O(n){return w.a.createElement(n.tag,p()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function q(n){return w.a.createElement(O,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function I(n){return w.a.createElement(O,{tag:"style",html:n.style})}var B=function(n){m()(a,n);var s=C(a);function a(){var n;k()(this,a);for(var t=arguments.length,p=new Array(t),o=0;o<t;o++)p[o]=arguments[o];return n=s.call.apply(s,[this].concat(p)),u()(e()(n),"state",{showCode:!1}),u()(e()(n),"toggle",(function(){n.setState({showCode:!n.state.showCode})})),n}return r()(a,[{key:"render",value:function(){var n=this.state.showCode,s=this.props,a=s.title,t=s.src,p=s.children;return w.a.createElement("div",{className:"zandoc-react-demo"},w.a.createElement("div",{className:"zandoc-react-demo__preview"},p),w.a.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},w.a.createElement("div",{className:"zandoc-react-demo__title"},w.a.createElement("p",null,a||"")),w.a.createElement("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})),n&&w.a.createElement("pre",{className:"zandoc-react-demo__code"},w.a.createElement(O,{tag:"code",html:t,attributes:{className:"language-jsx"}})))}}]),a}(_.Component),A=function(n){m()(a,n);var s=C(a);function a(){return k()(this,a),s.apply(this,arguments)}return r()(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var s=document.querySelector('a[href="'.concat(n,'"]'));s&&Object(v.a)(document.documentElement,0,function n(s,a){for(;s;)return s.offsetTop&&"static"!==getComputedStyle(s).position&&(a+=s.offsetTop),n(s.parentNode,a);return a}(s,-9))}}},{key:"render",value:function(){return w.a.createElement("div",{className:"zandoc-react-container",key:null},w.a.createElement(I,{style:".row-0 {\n      background: #2ecc71;\n    }\n    .row-1 {\n      background: #3498db;\n    }\n    .row-2 {\n      background: #e74c3c;\n    }"}),w.a.createElement(q,{html:'<h2 class="anchor-heading"><a href="#table-biao-ge-yi-fei-qi-qing-shi-yong-grid-ti-dai">¶</a><a href="javascript:void(0)" id="table-biao-ge-yi-fei-qi-qing-shi-yong-grid-ti-dai" class="anchor-point"></a>Table 表格（⚠️ 已废弃，请使用 <code>Grid</code> 替代）</h2>\n<p>表格组件</p>\n<p>该组件已停止维护，请使用 <code>Grid</code>。</p>\n<h3 class="anchor-heading"><a href="#shi-yong-zhi-nan">¶</a><a href="javascript:void(0)" id="shi-yong-zhi-nan" class="anchor-point"></a>使用指南</h3>\n<p>表格中的页面筛选、排序均会触发 <code>onChange</code> 函数</p>\n<h3 class="anchor-heading"><a href="#dai-ma-yan-shi">¶</a><a href="javascript:void(0)" id="dai-ma-yan-shi" class="anchor-point"></a>代码演示</h3>'}),w.a.createElement(B,{title:"基础用法",id:"Demobasic",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Table</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> datasets <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\n  item_id<span class="token operator">:</span> <span class="token string">\'5024217\'</span><span class="token punctuation">,</span>\n  bro_uvpv<span class="token operator">:</span> <span class="token string">\'1/10\'</span><span class="token punctuation">,</span>\n  stock_num<span class="token operator">:</span> <span class="token string">\'60\'</span><span class="token punctuation">,</span>\n  sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  item_id<span class="token operator">:</span> <span class="token string">\'5024277\'</span><span class="token punctuation">,</span>\n  bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n  stock_num<span class="token operator">:</span> <span class="token number">59</span><span class="token punctuation">,</span>\n  sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  item_id<span class="token operator">:</span> <span class="token string">\'13213123\'</span><span class="token punctuation">,</span>\n  bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n  stock_num<span class="token operator">:</span> <span class="token number">159</span><span class="token punctuation">,</span>\n  sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'商品\'</span><span class="token punctuation">,</span>\n  <span class="token function-variable function">bodyRender</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token property-access">item_id</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'访问量\'</span><span class="token punctuation">,</span>\n  name<span class="token operator">:</span> <span class="token string">\'bro_uvpv\'</span><span class="token punctuation">,</span>\n  width<span class="token operator">:</span> <span class="token string">\'200px\'</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'库存\'</span><span class="token punctuation">,</span>\n  name<span class="token operator">:</span> <span class="token string">\'stock_num\'</span><span class="token punctuation">,</span>\n  width<span class="token operator">:</span> <span class="token string">\'100px\'</span><span class="token punctuation">,</span>\n  isMoney<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n  isMoney<span class="token operator">:</span> <span class="token boolean">true</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  width<span class="token operator">:</span> <span class="token string">\'6em\'</span><span class="token punctuation">,</span>\n  title<span class="token operator">:</span> <span class="token string">\'销售量\'</span><span class="token punctuation">,</span>\n  name<span class="token operator">:</span> <span class="token string">\'sold_num\'</span>\n<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Table</span></span>\n    <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>\n    <span class="token attr-name">datasets</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>datasets<span class="token punctuation">}</span></span>\n    <span class="token attr-name">rowKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item_id<span class="token punctuation">"</span></span>\n  <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},w.a.createElement(S)),w.a.createElement(B,{title:"支持Loading",id:"Demoloading",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Table</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> datasets <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'5024217\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token string">\'60\'</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'5024277\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token number">59</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'13213123\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token number">159</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'商品\'</span><span class="token punctuation">,</span>\n    <span class="token function-variable function">bodyRender</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token property-access">item_id</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'访问量\'</span><span class="token punctuation">,</span>\n    name<span class="token operator">:</span> <span class="token string">\'bro_uvpv\'</span><span class="token punctuation">,</span>\n    width<span class="token operator">:</span> <span class="token string">\'200px\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'库存\'</span><span class="token punctuation">,</span>\n    name<span class="token operator">:</span> <span class="token string">\'stock_num\'</span><span class="token punctuation">,</span>\n    width<span class="token operator">:</span> <span class="token string">\'100px\'</span><span class="token punctuation">,</span>\n    textAlign<span class="token operator">:</span> <span class="token string">\'center\'</span><span class="token punctuation">,</span>\n    isMoney<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    width<span class="token operator">:</span> <span class="token string">\'6em\'</span><span class="token punctuation">,</span>\n    title<span class="token operator">:</span> <span class="token string">\'销售量\'</span><span class="token punctuation">,</span>\n    name<span class="token operator">:</span> <span class="token string">\'sold_num\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n      loading<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token comment">// 用定时器模拟loading</span>\n  <span class="token function">componentWillMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">let</span> self <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>\n    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      self<span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n        loading<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">onChange</span><span class="token punctuation">(</span><span class="token parameter">conf</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span>conf<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Table</span></span>\n        <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>\n        <span class="token attr-name">datasets</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>datasets<span class="token punctuation">}</span></span>\n        <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">onChange</span><span class="token punctuation">.</span><span class="token method function property-access">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">loading</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">loading</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">rowKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item_id<span class="token punctuation">"</span></span>\n      <span class="token punctuation">/></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},w.a.createElement(x)),w.a.createElement(B,{title:"分页模式",id:"Demopager",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Table</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> datasets <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'5024217\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token string">\'60\'</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'5024277\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token number">59</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'13213123\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token number">159</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'商品\'</span><span class="token punctuation">,</span>\n    <span class="token function-variable function">bodyRender</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token property-access">item_id</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'访问量\'</span><span class="token punctuation">,</span>\n    name<span class="token operator">:</span> <span class="token string">\'bro_uvpv\'</span><span class="token punctuation">,</span>\n    width<span class="token operator">:</span> <span class="token string">\'200px\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'库存\'</span><span class="token punctuation">,</span>\n    name<span class="token operator">:</span> <span class="token string">\'stock_num\'</span><span class="token punctuation">,</span>\n    width<span class="token operator">:</span> <span class="token string">\'100px\'</span><span class="token punctuation">,</span>\n    textAlign<span class="token operator">:</span> <span class="token string">\'center\'</span><span class="token punctuation">,</span>\n    isMoney<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    width<span class="token operator">:</span> <span class="token string">\'6em\'</span><span class="token punctuation">,</span>\n    title<span class="token operator">:</span> <span class="token string">\'销售量\'</span><span class="token punctuation">,</span>\n    name<span class="token operator">:</span> <span class="token string">\'sold_num\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Pagination</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n      current<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n      total<span class="token operator">:</span> <span class="token number">101</span><span class="token punctuation">,</span>\n      pageSize<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>\n      pageSizeOptions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">onChange</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      current<span class="token operator">:</span> data<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">,</span>\n      pageSize<span class="token operator">:</span> data<span class="token punctuation">.</span><span class="token property-access">pageSize</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Table</span></span>\n        <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>\n        <span class="token attr-name">datasets</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>datasets<span class="token punctuation">}</span></span>\n        <span class="token attr-name">rowKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item_id<span class="token punctuation">"</span></span>\n        <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">onChange</span><span class="token punctuation">.</span><span class="token method function property-access">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">pageInfo</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">}</span></span>\n      <span class="token punctuation">/></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Pagination</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},w.a.createElement(E)),w.a.createElement(B,{title:"支持排序",id:"Demosort",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Table</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token punctuation">{</span> assign <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'lodash\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> datasets <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\n  item_id<span class="token operator">:</span> <span class="token string">\'5024217\'</span><span class="token punctuation">,</span>\n  bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n  stock_num<span class="token operator">:</span> <span class="token string">\'60\'</span><span class="token punctuation">,</span>\n  sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  item_id<span class="token operator">:</span> <span class="token string">\'5024277\'</span><span class="token punctuation">,</span>\n  bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n  stock_num<span class="token operator">:</span> <span class="token number">59</span><span class="token punctuation">,</span>\n  sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  item_id<span class="token operator">:</span> <span class="token string">\'13213123\'</span><span class="token punctuation">,</span>\n  bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n  stock_num<span class="token operator">:</span> <span class="token number">159</span><span class="token punctuation">,</span>\n  sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'商品\'</span><span class="token punctuation">,</span>\n  <span class="token function-variable function">bodyRender</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token property-access">item_id</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'访问量\'</span><span class="token punctuation">,</span>\n  name<span class="token operator">:</span> <span class="token string">\'bro_uvpv\'</span><span class="token punctuation">,</span>\n  needSort<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n  width<span class="token operator">:</span> <span class="token string">\'200px\'</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'库存\'</span><span class="token punctuation">,</span>\n  name<span class="token operator">:</span> <span class="token string">\'stock_num\'</span><span class="token punctuation">,</span>\n  width<span class="token operator">:</span> <span class="token string">\'100px\'</span><span class="token punctuation">,</span>\n  needSort<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n  textAlign<span class="token operator">:</span> <span class="token string">\'center\'</span><span class="token punctuation">,</span>\n  isMoney<span class="token operator">:</span> <span class="token boolean">true</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  width<span class="token operator">:</span> <span class="token string">\'6em\'</span><span class="token punctuation">,</span>\n  title<span class="token operator">:</span> <span class="token string">\'销售量\'</span><span class="token punctuation">,</span>\n  needSort<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n  name<span class="token operator">:</span> <span class="token string">\'sold_num\'</span>\n<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Sort</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n      sortBy<span class="token operator">:</span> <span class="token string">\'stock_num\'</span><span class="token punctuation">,</span>\n      sortType<span class="token operator">:</span> <span class="token string">\'desc\'</span>\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">onChange</span><span class="token punctuation">(</span><span class="token parameter">conf</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">,</span> conf<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Table</span></span>\n        <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>\n        <span class="token attr-name">datasets</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>datasets<span class="token punctuation">}</span></span>\n        <span class="token attr-name">rowKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item_id<span class="token punctuation">"</span></span>\n        <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">onChange</span><span class="token punctuation">.</span><span class="token method function property-access">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">sortBy</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">sortBy</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">sortType</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">sortType</span><span class="token punctuation">}</span></span>\n      <span class="token punctuation">/></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Sort</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},w.a.createElement(K)),w.a.createElement(B,{title:"选择模式",id:"Demoselection",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Table</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Notify</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> datasets <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'5024217\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token string">\'60\'</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'5024277\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token number">59</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'13213123\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token number">159</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> datasets2 <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'4217\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token string">\'60\'</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'50\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token number">59</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'13123\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token number">159</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'商品\'</span><span class="token punctuation">,</span>\n    width<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>\n    <span class="token function-variable function">bodyRender</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token property-access">item_id</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'访问量\'</span><span class="token punctuation">,</span>\n    name<span class="token operator">:</span> <span class="token string">\'bro_uvpv\'</span><span class="token punctuation">,</span>\n    width<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'库存\'</span><span class="token punctuation">,</span>\n    name<span class="token operator">:</span> <span class="token string">\'stock_num\'</span><span class="token punctuation">,</span>\n    width<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'销售量\'</span><span class="token punctuation">,</span>\n    name<span class="token operator">:</span> <span class="token string">\'sold_num\'</span><span class="token punctuation">,</span>\n    width<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Selection</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n      page<span class="token operator">:</span> <span class="token punctuation">{</span>\n        pageSize<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>\n        current<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n        totalItem<span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      datasets<span class="token operator">:</span> datasets<span class="token punctuation">,</span>\n      selectedRowKeys<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">\'5024217\'</span><span class="token punctuation">,</span> <span class="token string">\'5024277\'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">onSelect</span><span class="token punctuation">(</span><span class="token parameter">selectedRowKeys<span class="token punctuation">,</span> selectedRows<span class="token punctuation">,</span> currentRow</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">if</span> <span class="token punctuation">(</span>selectedRowKeys<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">success</span><span class="token punctuation">(</span><span class="token known-class-name class-name">JSON</span><span class="token punctuation">.</span><span class="token method function property-access">stringify</span><span class="token punctuation">(</span>selectedRowKeys<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selectedRowKeys<span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">getRowConf</span><span class="token punctuation">(</span><span class="token parameter">rowData<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">{</span>\n      canSelect<span class="token operator">:</span> index <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">onChange</span><span class="token punctuation">(</span><span class="token parameter">conf</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      page<span class="token operator">:</span> <span class="token punctuation">{</span>\n        pageSize<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>\n        current<span class="token operator">:</span> conf<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">,</span>\n        total<span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      datasets<span class="token operator">:</span> conf<span class="token punctuation">.</span><span class="token property-access">current</span> <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">?</span> datasets <span class="token operator">:</span> datasets2<span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">let</span> self <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>\n\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Table</span></span>\n        <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>\n        <span class="token attr-name">datasets</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">datasets</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">rowKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item_id<span class="token punctuation">"</span></span>\n        <span class="token attr-name">getRowConf</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">getRowConf</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">pageInfo</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">page</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">paginationType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lite<span class="token punctuation">"</span></span>\n        <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">conf</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">onChange</span><span class="token punctuation">(</span>conf<span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">selection</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n          selectedRowKeys<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selectedRowKeys</span><span class="token punctuation">,</span>\n          needCrossPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n          <span class="token function-variable function">onSelect</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selectedRowKeys<span class="token punctuation">,</span> selectedRows<span class="token punctuation">,</span> currentRow</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n            self<span class="token punctuation">.</span><span class="token method function property-access">onSelect</span><span class="token punctuation">(</span>selectedRowKeys<span class="token punctuation">,</span> selectedRows<span class="token punctuation">,</span> currentRow<span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n      <span class="token punctuation">/></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Selection</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},w.a.createElement(j)),w.a.createElement(B,{title:"特殊设置",id:"Demospecial",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Table</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> datasets <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\n  item_id<span class="token operator">:</span> <span class="token string">\'5024217\'</span><span class="token punctuation">,</span>\n  bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n  stock_num<span class="token operator">:</span> <span class="token string">\'60\'</span><span class="token punctuation">,</span>\n  sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  item_id<span class="token operator">:</span> <span class="token string">\'5024277\'</span><span class="token punctuation">,</span>\n  bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n  stock_num<span class="token operator">:</span> <span class="token number">59</span><span class="token punctuation">,</span>\n  sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  item_id<span class="token operator">:</span> <span class="token string">\'13213123\'</span><span class="token punctuation">,</span>\n  bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n  stock_num<span class="token operator">:</span> <span class="token number">159</span><span class="token punctuation">,</span>\n  sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'商品\'</span><span class="token punctuation">,</span>\n  width<span class="token operator">:</span> <span class="token string">\'50px\'</span><span class="token punctuation">,</span>\n  <span class="token function-variable function">bodyRender</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token property-access">item_id</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'访问量\'</span><span class="token punctuation">,</span>\n  name<span class="token operator">:</span> <span class="token string">\'bro_uvpv\'</span><span class="token punctuation">,</span>\n  width<span class="token operator">:</span> <span class="token string">\'100px\'</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'库存\'</span><span class="token punctuation">,</span>\n  name<span class="token operator">:</span> <span class="token string">\'stock_num\'</span><span class="token punctuation">,</span>\n  width<span class="token operator">:</span> <span class="token string">\'100px\'</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'销售量\'</span><span class="token punctuation">,</span>\n  name<span class="token operator">:</span> <span class="token string">\'sold_num\'</span>\n<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">RowClass</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n      limit<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\n      current<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n      total<span class="token operator">:</span> <span class="token number">101</span>\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">getRowConf</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">{</span>\n      canSelect<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n      rowClass<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">row-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">onChange</span><span class="token punctuation">(</span><span class="token parameter">conf</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span>conf<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Table</span></span>\n        <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>\n        <span class="token attr-name">datasets</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>datasets<span class="token punctuation">}</span></span>\n        <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">onChange</span><span class="token punctuation">.</span><span class="token method function property-access">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">getRowConf</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">getRowConf</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">rowKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item_id<span class="token punctuation">"</span></span>\n      <span class="token punctuation">/></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">RowClass</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},w.a.createElement(T)),w.a.createElement(B,{title:"可扩展模式",id:"Demoflexible",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Table</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> datasets <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\n  item_id<span class="token operator">:</span> <span class="token string">\'5024217\'</span><span class="token punctuation">,</span>\n  bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n  stock_num<span class="token operator">:</span> <span class="token string">\'60\'</span><span class="token punctuation">,</span>\n  sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  item_id<span class="token operator">:</span> <span class="token string">\'5024277\'</span><span class="token punctuation">,</span>\n  bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n  stock_num<span class="token operator">:</span> <span class="token number">59</span><span class="token punctuation">,</span>\n  sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  item_id<span class="token operator">:</span> <span class="token string">\'13213123\'</span><span class="token punctuation">,</span>\n  bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n  stock_num<span class="token operator">:</span> <span class="token number">159</span><span class="token punctuation">,</span>\n  sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'商品\'</span><span class="token punctuation">,</span>\n  width<span class="token operator">:</span> <span class="token string">\'150px\'</span><span class="token punctuation">,</span>\n  <span class="token function-variable function">bodyRender</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token property-access">item_id</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'访问量\'</span><span class="token punctuation">,</span>\n  name<span class="token operator">:</span> <span class="token string">\'bro_uvpv\'</span><span class="token punctuation">,</span>\n  width<span class="token operator">:</span> <span class="token string">\'100px\'</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'库存\'</span><span class="token punctuation">,</span>\n  name<span class="token operator">:</span> <span class="token string">\'stock_num\'</span><span class="token punctuation">,</span>\n  width<span class="token operator">:</span> <span class="token string">\'100px\'</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'销售量\'</span><span class="token punctuation">,</span>\n  name<span class="token operator">:</span> <span class="token string">\'sold_num\'</span>\n<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">RowClass</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n      limit<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\n      current<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n      total<span class="token operator">:</span> <span class="token number">101</span>\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">getRowConf</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">{</span>\n      canSelect<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">onChange</span><span class="token punctuation">(</span><span class="token parameter">conf</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span>conf<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token operator">&lt;</span><span class="token maybe-class-name">Table</span>\n        columns<span class="token operator">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span>\n        datasets<span class="token operator">=</span><span class="token punctuation">{</span>datasets<span class="token punctuation">}</span>\n        onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">onChange</span><span class="token punctuation">.</span><span class="token method function property-access">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span>\n        getRowConf<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">getRowConf</span><span class="token punctuation">}</span>\n        rowKey<span class="token operator">=</span><span class="token string">"item_id"</span>\n        expandation<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n          <span class="token function">isExpanded</span><span class="token punctuation">(</span><span class="token parameter">record<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n            <span class="token keyword">return</span> <span class="token punctuation">(</span>index <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span><span class="token punctuation">,</span>\n          <span class="token function">expandRender</span><span class="token punctuation">(</span><span class="token parameter">record</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n            <span class="token keyword">return</span> <span class="token punctuation">(</span>\n              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\n                <span class="token punctuation">{</span>record<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span>\n              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n            <span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span>\n        <span class="token punctuation">}</span><span class="token punctuation">}</span>\n      <span class="token operator">/</span><span class="token operator">></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">RowClass</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},w.a.createElement(z)),w.a.createElement(B,{title:"支持批量操作",id:"Demobatch",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Table</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Notify</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> datasets <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'5024217\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token string">\'60\'</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'5024277\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token number">59</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'13213123\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token number">159</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> datasets2 <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'4217\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token string">\'60\'</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'50\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token number">59</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'13123\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token number">159</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'商品\'</span><span class="token punctuation">,</span>\n    width<span class="token operator">:</span> <span class="token string">\'150px\'</span><span class="token punctuation">,</span>\n    <span class="token function-variable function">bodyRender</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token property-access">item_id</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'访问量\'</span><span class="token punctuation">,</span>\n    name<span class="token operator">:</span> <span class="token string">\'bro_uvpv\'</span><span class="token punctuation">,</span>\n    width<span class="token operator">:</span> <span class="token string">\'100px\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'库存\'</span><span class="token punctuation">,</span>\n    name<span class="token operator">:</span> <span class="token string">\'stock_num\'</span><span class="token punctuation">,</span>\n    width<span class="token operator">:</span> <span class="token string">\'100px\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'销售量\'</span><span class="token punctuation">,</span>\n    name<span class="token operator">:</span> <span class="token string">\'sold_num\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Customer</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">success</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">data</span><span class="token punctuation">.</span><span class="token property-access">length</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> elements was selected</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span>\n        <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comp<span class="token punctuation">"</span></span>\n        <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>child-comps<span class="token punctuation">"</span></span>\n        <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onClick</span><span class="token punctuation">}</span></span>\n      <span class="token punctuation">></span></span>\n        <span class="token maybe-class-name">Click</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">class</span> <span class="token class-name">BatchCompsClass</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span>\n      datasets<span class="token punctuation">,</span>\n      page<span class="token operator">:</span> <span class="token punctuation">{</span>\n        pageSize<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>\n        current<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n        totalItem<span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      selectedRowKeys<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">getRowConf</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">{</span>\n      canSelect<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function-variable function">onSelect</span> <span class="token operator">=</span> <span class="token parameter">selectedRowkeys</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selectedRowKeys<span class="token operator">:</span> selectedRowkeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function">onChange</span><span class="token punctuation">(</span><span class="token parameter">conf</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      page<span class="token operator">:</span> <span class="token punctuation">{</span>\n        pageSize<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>\n        current<span class="token operator">:</span> conf<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">,</span>\n        total<span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      datasets<span class="token operator">:</span> conf<span class="token punctuation">.</span><span class="token property-access">current</span> <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">?</span> datasets <span class="token operator">:</span> datasets2<span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token operator">&lt;</span><span class="token maybe-class-name">Table</span>\n        columns<span class="token operator">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span>\n        datasets<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">datasets</span><span class="token punctuation">}</span>\n        onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">onChange</span><span class="token punctuation">.</span><span class="token method function property-access">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span>\n        getRowConf<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">getRowConf</span><span class="token punctuation">}</span>\n        pageInfo<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">page</span><span class="token punctuation">}</span>\n        rowKey<span class="token operator">=</span><span class="token string">"item_id"</span>\n        batchComponents<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pure<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>child-comps<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n            <span class="token maybe-class-name">This</span> is a <span class="token constant">DOM</span> element<span class="token punctuation">.</span><span class="token punctuation">{</span><span class="token string">\' \'</span><span class="token punctuation">}</span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>\n          <span class="token parameter">data</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n            <span class="token keyword">return</span> <span class="token punctuation">(</span>\n              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span>\n                <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>func<span class="token punctuation">"</span></span>\n                <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>child-comps<span class="token punctuation">"</span></span>\n                <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">\'blueviolet\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n              <span class="token punctuation">></span></span>\n                <span class="token punctuation">{</span><span class="token string">\' \'</span><span class="token punctuation">}</span>\n                <span class="token maybe-class-name">This</span> is a <span class="token keyword">function</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">}</span> elements was selected<span class="token punctuation">.</span><span class="token punctuation">{</span><span class="token string">\' \'</span><span class="token punctuation">}</span>\n              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>\n            <span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span><span class="token punctuation">,</span>\n          <span class="token maybe-class-name">Customer</span><span class="token punctuation">,</span>\n        <span class="token punctuation">]</span><span class="token punctuation">}</span>\n        selection<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n          selectedRowKeys<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selectedRowKeys</span><span class="token punctuation">,</span>\n          <span class="token function-variable function">onSelect</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selectedRowkeys<span class="token punctuation">,</span> selectedRows<span class="token punctuation">,</span> currentRow</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">onSelect</span><span class="token punctuation">(</span>selectedRowkeys<span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span><span class="token punctuation">,</span>\n          needCrossPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">}</span>\n      <span class="token operator">/</span><span class="token operator">></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">BatchCompsClass</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},w.a.createElement(N)),w.a.createElement(B,{title:"空列表",id:"Demoempty",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Table</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'商品\'</span><span class="token punctuation">,</span>\n  width<span class="token operator">:</span> <span class="token string">\'150px\'</span><span class="token punctuation">,</span>\n  <span class="token function-variable function">bodyRender</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token property-access">item_id</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'访问量\'</span><span class="token punctuation">,</span>\n  name<span class="token operator">:</span> <span class="token string">\'bro_uvpv\'</span><span class="token punctuation">,</span>\n  width<span class="token operator">:</span> <span class="token string">\'100px\'</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'库存\'</span><span class="token punctuation">,</span>\n  name<span class="token operator">:</span> <span class="token string">\'stock_num\'</span><span class="token punctuation">,</span>\n  width<span class="token operator">:</span> <span class="token string">\'100px\'</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n  title<span class="token operator">:</span> <span class="token string">\'销售量\'</span><span class="token punctuation">,</span>\n  name<span class="token operator">:</span> <span class="token string">\'sold_num\'</span>\n<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Table</span></span>\n    <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>\n    <span class="token attr-name">datasets</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>\n  <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},w.a.createElement(D)),w.a.createElement(B,{title:"支持半选状态",id:"Demoindeterminate",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Table</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> datasets <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'5024217\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'5024277\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token number">59</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    item_id<span class="token operator">:</span> <span class="token string">\'13213123\'</span><span class="token punctuation">,</span>\n    bro_uvpv<span class="token operator">:</span> <span class="token string">\'0/0\'</span><span class="token punctuation">,</span>\n    stock_num<span class="token operator">:</span> <span class="token number">159</span><span class="token punctuation">,</span>\n    sold_num<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'商品\'</span><span class="token punctuation">,</span>\n    name<span class="token operator">:</span> <span class="token string">\'item_id\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'访问量\'</span><span class="token punctuation">,</span>\n    name<span class="token operator">:</span> <span class="token string">\'bro_uvpv\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'库存\'</span><span class="token punctuation">,</span>\n    name<span class="token operator">:</span> <span class="token string">\'stock_num\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    title<span class="token operator">:</span> <span class="token string">\'销售量\'</span><span class="token punctuation">,</span>\n    name<span class="token operator">:</span> <span class="token string">\'sold_num\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Indeterminate</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n  state <span class="token operator">=</span> <span class="token punctuation">{</span>\n    page<span class="token operator">:</span> <span class="token punctuation">{</span>\n      pageSize<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>\n      current<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n      total<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    datasets<span class="token punctuation">,</span>\n    selectedRowKeys<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">\'5024217\'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n    indeterminateRowKeys<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">\'5024277\'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onSelect</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">selectedRowKeys</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'selectedRowKeys: \'</span><span class="token punctuation">,</span> selectedRowKeys<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selectedRowKeys<span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Table</span></span>\n        <span class="token attr-name">rowKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item_id<span class="token punctuation">"</span></span>\n        <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>\n        <span class="token attr-name">datasets</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">datasets</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">pageInfo</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">page</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">selection</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n          selectedRowKeys<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selectedRowKeys</span><span class="token punctuation">,</span>\n          indeterminateRowKeys<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">indeterminateRowKeys</span><span class="token punctuation">,</span>\n          <span class="token function-variable function">onSelect</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">selectedRowKeys<span class="token punctuation">,</span> selectedRows<span class="token punctuation">,</span> currentRow</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">onSelect</span><span class="token punctuation">(</span>selectedRowKeys<span class="token punctuation">,</span> selectedRows<span class="token punctuation">,</span> currentRow<span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span>\n        <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n      <span class="token punctuation">/></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Indeterminate</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},w.a.createElement(M)),w.a.createElement(q,{html:'<h3 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h3>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>备选值</th>\n<th>是否必须</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>columns</td>\n<td>每一列需要的所有数据</td>\n<td>array\n[\nobject\n]</td>\n<td></td>\n<td></td>\n<td>是</td>\n</tr>\n<tr>\n<td>datasets</td>\n<td>每一行需要展示的数据</td>\n<td>array\n[\nobject\n]</td>\n<td></td>\n<td></td>\n<td>是</td>\n</tr>\n<tr>\n<td>rowKey</td>\n<td>每一行的 key, 让 react 提升性能, 并防止出现一系列的问题</td>\n<td>string</td>\n<td><code>id</code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>sortBy</td>\n<td>根据哪一个字段排序, 应该等于 columns 中某一个元素的\n<code>key</code>\n字段，注意，组件内部不做排序，需要自己实现。</td>\n<td>string</td>\n<td></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>sortType</td>\n<td>排序方式</td>\n<td>string</td>\n<td><code>\'desc\'</code></td>\n<td><code>\'asc\'</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>defaultSortType</td>\n<td>第一次点击的排序方式</td>\n<td>string</td>\n<td><code>\'desc\'</code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>列表发生变化时自动触发的函数，页面筛选、排序均会触发</td>\n<td>func</td>\n<td></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>emptyLabel</td>\n<td>列表为空时的提示文案</td>\n<td>node</td>\n<td><code>\'没有更多数据了\'</code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>selection</td>\n<td>表格的选择功能配置</td>\n<td>object</td>\n<td></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>loading</td>\n<td>表格是否 loading 状态</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>getRowConf</td>\n<td>每一行的配置函数，返回一个配置对象\n<code>{ canSelect, rowClass }</code></td>\n<td>func</td>\n<td></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>expandation</td>\n<td>展开配置</td>\n<td>object</td>\n<td></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>batchComponents</td>\n<td>批量操作的组件列表，如何使用，看批量操作的示例</td>\n<td>array\n[\nhtml/function/React Component\n]</td>\n<td><code>null</code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>batchComponentsAutoFixed</td>\n<td>是否要自动 fix 批量操作</td>\n<td>bool</td>\n<td><code>true</code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>autoStick</td>\n<td>是否自动将 head stick 到窗口</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>autoScroll</td>\n<td>是否点击分页自动滚到 table 顶部</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>className</td>\n<td>自定义额外类名</td>\n<td>string</td>\n<td><code>\'\'</code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>prefix</td>\n<td>自定义前缀</td>\n<td>string</td>\n<td><code>\'zent\'</code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>pageInfo</td>\n<td>table 对应的分页信息</td>\n<td>object</td>\n<td><code>null</code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>paginationType</td>\n<td>分页器类型，可选 \n<code>\'lite\'</code>\n \n|\n \n<code>\'mini\'</code></td>\n<td>string</td>\n<td><code>\'default\'</code></td>\n<td>否</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#getrowconf-de-te-bie-sheng-ming">¶</a><a href="javascript:void(0)" id="getrowconf-de-te-bie-sheng-ming" class="anchor-point"></a>getRowConf 的特别声明：</h4>\n<pre><code class="language-jsx"><span class="token comment">/*\n  * @param data {Object} 每一行的数据\n  * @param index {number} 每一行在列表中的index\n  * @return {\n  *  canSelect {bool} 是否可选，默认为true\n  *  rowClass {string} 这一行的特殊class，默认是空字符串\n  * }\n  */</span>\n  <span class="token function">getRowConf</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 每一行的数据和这一行在列表中的index</span>\n    <span class="token keyword">return</span> <span class="token punctuation">{</span>\n      canSelect<span class="token operator">:</span> index <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">,</span>\n      rowClass<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">row-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">}</span></code></pre>\n<h4 class="anchor-heading"><a href="#onchange-han-shu-sheng-ming">¶</a><a href="javascript:void(0)" id="onchange-han-shu-sheng-ming" class="anchor-point"></a>onChange 函数声明</h4>\n<p>onChange 会抛出一个对象，这个对象包含分页变化和排序的的参数：</p>\n<pre><code class="language-js"><span class="token punctuation">{</span>\n  sortBy<span class="token punctuation">,</span> <span class="token comment">// {String} 表示基于什么key进行排序</span>\n  sortType<span class="token punctuation">,</span> <span class="token comment">// {String} [\'asc\', \'desc\'] 排序的方式</span>\n  current<span class="token punctuation">,</span> <span class="token comment">// {Number} 表示当前第几页</span>\n  pageSize<span class="token punctuation">,</span> <span class="token comment">// {Number} 表示每页数量</span>\n<span class="token punctuation">}</span></code></pre>\n<h3 class="anchor-heading"><a href="#columns">¶</a><a href="javascript:void(0)" id="columns" class="anchor-point"></a>columns</h3>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必须</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>title</td>\n<td>每一列显示在 thead 上的名称</td>\n<td>node</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>name</td>\n<td>每一列的主键, 影响到排序和筛选</td>\n<td>string</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>width</td>\n<td>每一列在一行的宽度, 相对值和固定值 (如: 20% 或 100px)</td>\n<td>string</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>isMoney</td>\n<td>表示是否是金额</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>needSort</td>\n<td>这一列是否支持排序, 这一列必须设置了 key, 才能正常使用排序功能</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>bodyRender</td>\n<td>这一列对应用来渲染的组件</td>\n<td>node</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>textAlign</td>\n<td>文本对齐方式</td>\n<td>string</td>\n<td><code>\'\'</code></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<h3 class="anchor-heading"><a href="#selection">¶</a><a href="javascript:void(0)" id="selection" class="anchor-point"></a>selection</h3>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必须</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>selectedRowKeys</td>\n<td>默认选中</td>\n<td>array</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>indeterminateRowKeys</td>\n<td>半选状态的行</td>\n<td>array</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>isSingleSelection</td>\n<td>是否是单选</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>needCrossPage</td>\n<td>是否需要跨页的时候多选</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>onSelect(@selectedkeys, @selectedRows, @currentRow)</td>\n<td>每次 check 的时候触发的函数</td>\n<td>func</td>\n<td></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<h3 class="anchor-heading"><a href="#pageinfo">¶</a><a href="javascript:void(0)" id="pageinfo" class="anchor-point"></a>pageInfo</h3>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必须</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>total</td>\n<td>总条目个数</td>\n<td>number</td>\n<td><code>0</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>pageSize</td>\n<td>每页个数</td>\n<td>number</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>pageSizeOptions</td>\n<td>分页选项</td>\n<td>number[]</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>current</td>\n<td>当前页码</td>\n<td>number</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>totalItem</td>\n<td>总条目个数\n<strong>[deprecated], 请使用 <code>total</code></strong></td>\n<td>number</td>\n<td><code>0</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>limit</td>\n<td>每页个数\n<strong>[deprecated], 请使用 <code>pageSize</code></strong></td>\n<td>number</td>\n<td></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<h3 class="anchor-heading"><a href="#expandation">¶</a><a href="javascript:void(0)" id="expandation" class="anchor-point"></a>expandation</h3>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必须</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>isExpanded</td>\n<td>是否展开当前行</td>\n<td>func(record, index)</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>expandRender</td>\n<td>展开行的补充内容 render</td>\n<td>func(record)</td>\n<td></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>'}))}}]),a}(_.Component)}}]);