| 123456 |
- (window.webpackJsonp=window.webpackJsonp||[]).push([[2],{1195:function(module,exports,__webpack_require__){var __WEBPACK_AMD_DEFINE_FACTORY__,__WEBPACK_AMD_DEFINE_RESULT__,definition;
- /*!
- * Reqwest! A general purpose XHR connection manager
- * license MIT (c) Dustin Diaz 2015
- * https://github.com/ded/reqwest
- */definition=function(){var context=this,XHR2;if("window"in context)var doc=document,byTag="getElementsByTagName",head=doc[byTag]("head")[0];else try{XHR2=__webpack_require__(1196)}catch(t){throw new Error("Peer dependency `xhr2` required! Please npm install xhr2")}var httpsRe=/^http/,protocolRe=/(^\w+):\/\//,twoHundo=/^(20\d|1223)$/,readyState="readyState",contentType="Content-Type",requestedWith="X-Requested-With",uniqid=0,callbackPrefix="reqwest_"+ +new Date,lastValue,xmlHttpRequest="XMLHttpRequest",xDomainRequest="XDomainRequest",noop=function(){},isArray="function"==typeof Array.isArray?Array.isArray:function(t){return t instanceof Array},defaultHeaders={contentType:"application/x-www-form-urlencoded",requestedWith:xmlHttpRequest,accept:{"*":"text/javascript, text/html, application/xml, text/xml, */*",xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript",js:"application/javascript, text/javascript"}},xhr=function(t){if(!0===t.crossOrigin){var s=context[xmlHttpRequest]?new XMLHttpRequest:null;if(s&&"withCredentials"in s)return s;if(context[xDomainRequest])return new XDomainRequest;throw new Error("Browser does not support cross-origin requests")}return context[xmlHttpRequest]?new XMLHttpRequest:XHR2?new XHR2:new ActiveXObject("Microsoft.XMLHTTP")},globalSetupOptions={dataFilter:function(t){return t}};function succeed(t){var s=protocolRe.exec(t.url);return s=s&&s[1]||context.location.protocol,httpsRe.test(s)?twoHundo.test(t.request.status):!!t.request.response}function handleReadyState(t,s,a){return function(){return t._aborted?a(t.request):t._timedOut?a(t.request,"Request is aborted: timeout"):void(t.request&&4==t.request[readyState]&&(t.request.onreadystatechange=noop,succeed(t)?s(t.request):a(t.request)))}}function setHeaders(t,s){var a,n=s.headers||{};n.Accept=n.Accept||defaultHeaders.accept[s.type]||defaultHeaders.accept["*"];var e="undefined"!=typeof FormData&&s.data instanceof FormData;for(a in s.crossOrigin||n[requestedWith]||(n[requestedWith]=defaultHeaders.requestedWith),n[contentType]||e||(n[contentType]=s.contentType||defaultHeaders.contentType),n)n.hasOwnProperty(a)&&"setRequestHeader"in t&&t.setRequestHeader(a,n[a])}function setCredentials(t,s){void 0!==s.withCredentials&&void 0!==t.withCredentials&&(t.withCredentials=!!s.withCredentials)}function generalCallback(t){lastValue=t}function urlappend(t,s){return t+(/\?/.test(t)?"&":"?")+s}function handleJsonp(t,s,a,n){var e=uniqid++,l=t.jsonpCallback||"callback",r=t.jsonpCallbackName||reqwest.getcallbackPrefix(e),i=new RegExp("((^|\\?|&)"+l+")=([^&]+)"),o=n.match(i),c=doc.createElement("script"),v=0,_=-1!==navigator.userAgent.indexOf("MSIE 10.0");return o?"?"===o[3]?n=n.replace(i,"$1="+r):r=o[3]:n=urlappend(n,l+"="+r),context[r]=generalCallback,c.type="text/javascript",c.src=n,c.async=!0,void 0===c.onreadystatechange||_||(c.htmlFor=c.id="_reqwest_"+e),c.onload=c.onreadystatechange=function(){if(c[readyState]&&"complete"!==c[readyState]&&"loaded"!==c[readyState]||v)return!1;c.onload=c.onreadystatechange=null,c.onclick&&c.onclick(),s(lastValue),lastValue=void 0,head.removeChild(c),v=1},head.appendChild(c),{abort:function(){c.onload=c.onreadystatechange=null,a({},"Request is aborted: timeout",{}),lastValue=void 0,head.removeChild(c),v=1}}}function getRequest(t,s){var a,n=this.o,e=(n.method||"GET").toUpperCase(),l="string"==typeof n?n:n.url,r=!1!==n.processData&&n.data&&"string"!=typeof n.data?reqwest.toQueryString(n.data):n.data||null,i=!1;return"jsonp"!=n.type&&"GET"!=e||!r||(l=urlappend(l,r),r=null),"jsonp"==n.type?handleJsonp(n,t,s,l):((a=n.xhr&&n.xhr(n)||xhr(n)).open(e,l,!1!==n.async),setHeaders(a,n),setCredentials(a,n),context[xDomainRequest]&&a instanceof context[xDomainRequest]?(a.onload=t,a.onerror=s,a.onprogress=function(){},i=!0):a.onreadystatechange=handleReadyState(this,t,s),n.before&&n.before(a),i?setTimeout((function(){a.send(r)}),200):a.send(r),a)}function Reqwest(t,s){this.o=t,this.fn=s,init.apply(this,arguments)}function setType(t){if(null!==t)return t.match("json")?"json":t.match("javascript")?"js":t.match("text")?"html":t.match("xml")?"xml":void 0}function init(o,fn){this.url="string"==typeof o?o:o.url,this.timeout=null,this._fulfilled=!1,this._successHandler=function(){},this._fulfillmentHandlers=[],this._errorHandlers=[],this._completeHandlers=[],this._erred=!1,this._responseArgs={};var self=this;function complete(t){for(o.timeout&&clearTimeout(self.timeout),self.timeout=null;self._completeHandlers.length>0;)self._completeHandlers.shift()(t)}function success(resp){var type=o.type||resp&&setType(resp.getResponseHeader("Content-Type"));resp="jsonp"!==type?self.request:resp;var filteredResponse=globalSetupOptions.dataFilter(resp.responseText,type),r=filteredResponse;try{resp.responseText=r}catch(t){}if(r)switch(type){case"json":try{resp=context.JSON?context.JSON.parse(r):eval("("+r+")")}catch(t){return error(resp,"Could not parse JSON in response",t)}break;case"js":resp=eval(r);break;case"html":resp=r;break;case"xml":resp=resp.responseXML&&resp.responseXML.parseError&&resp.responseXML.parseError.errorCode&&resp.responseXML.parseError.reason?null:resp.responseXML}for(self._responseArgs.resp=resp,self._fulfilled=!0,fn(resp),self._successHandler(resp);self._fulfillmentHandlers.length>0;)resp=self._fulfillmentHandlers.shift()(resp);complete(resp)}function timedOut(){self._timedOut=!0,self.request.abort()}function error(t,s,a){for(t=self.request,self._responseArgs.resp=t,self._responseArgs.msg=s,self._responseArgs.t=a,self._erred=!0;self._errorHandlers.length>0;)self._errorHandlers.shift()(t,s,a);complete(t)}fn=fn||function(){},o.timeout&&(this.timeout=setTimeout((function(){timedOut()}),o.timeout)),o.success&&(this._successHandler=function(){o.success.apply(o,arguments)}),o.error&&this._errorHandlers.push((function(){o.error.apply(o,arguments)})),o.complete&&this._completeHandlers.push((function(){o.complete.apply(o,arguments)})),this.request=getRequest.call(this,success,error)}function reqwest(t,s){return new Reqwest(t,s)}function normalize(t){return t?t.replace(/\r?\n/g,"\r\n"):""}function serial(t,s){var a,n,e,l,r=t.name,i=t.tagName.toLowerCase(),o=function(t){t&&!t.disabled&&s(r,normalize(t.attributes.value&&t.attributes.value.specified?t.value:t.text))};if(!t.disabled&&r)switch(i){case"input":/reset|button|image|file/i.test(t.type)||(a=/checkbox/i.test(t.type),n=/radio/i.test(t.type),e=t.value,(!a&&!n||t.checked)&&s(r,normalize(a&&""===e?"on":e)));break;case"textarea":s(r,normalize(t.value));break;case"select":if("select-one"===t.type.toLowerCase())o(t.selectedIndex>=0?t.options[t.selectedIndex]:null);else for(l=0;t.length&&l<t.length;l++)t.options[l].selected&&o(t.options[l])}}function eachFormElement(){var t,s,a=this,n=function(t,s){var n,e,l;for(n=0;n<s.length;n++)for(l=t[byTag](s[n]),e=0;e<l.length;e++)serial(l[e],a)};for(s=0;s<arguments.length;s++)t=arguments[s],/input|select|textarea/i.test(t.tagName)&&serial(t,a),n(t,["input","select","textarea"])}function serializeQueryString(){return reqwest.toQueryString(reqwest.serializeArray.apply(null,arguments))}function serializeHash(){var t={};return eachFormElement.apply((function(s,a){s in t?(t[s]&&!isArray(t[s])&&(t[s]=[t[s]]),t[s].push(a)):t[s]=a}),arguments),t}function buildParams(t,s,a,n){var e,l,r,i=/\[\]$/;if(isArray(s))for(l=0;s&&l<s.length;l++)r=s[l],a||i.test(t)?n(t,r):buildParams(t+"["+("object"==typeof r?l:"")+"]",r,a,n);else if(s&&"[object Object]"===s.toString())for(e in s)buildParams(t+"["+e+"]",s[e],a,n);else n(t,s)}return Reqwest.prototype={abort:function(){this._aborted=!0,this.request.abort()},retry:function(){init.call(this,this.o,this.fn)},then:function(t,s){return t=t||function(){},s=s||function(){},this._fulfilled?this._responseArgs.resp=t(this._responseArgs.resp):this._erred?s(this._responseArgs.resp,this._responseArgs.msg,this._responseArgs.t):(this._fulfillmentHandlers.push(t),this._errorHandlers.push(s)),this},always:function(t){return this._fulfilled||this._erred?t(this._responseArgs.resp):this._completeHandlers.push(t),this},fail:function(t){return this._erred?t(this._responseArgs.resp,this._responseArgs.msg,this._responseArgs.t):this._errorHandlers.push(t),this},catch:function(t){return this.fail(t)}},reqwest.serializeArray=function(){var t=[];return eachFormElement.apply((function(s,a){t.push({name:s,value:a})}),arguments),t},reqwest.serialize=function(){if(0===arguments.length)return"";var t,s=Array.prototype.slice.call(arguments,0);return(t=s.pop())&&t.nodeType&&s.push(t)&&(t=null),t&&(t=t.type),("map"==t?serializeHash:"array"==t?reqwest.serializeArray:serializeQueryString).apply(null,s)},reqwest.toQueryString=function(t,s){var a,n,e=s||!1,l=[],r=encodeURIComponent,i=function(t,s){s="function"==typeof s?s():null==s?"":s,l[l.length]=r(t)+"="+r(s)};if(isArray(t))for(n=0;t&&n<t.length;n++)i(t[n].name,t[n].value);else for(a in t)t.hasOwnProperty(a)&&buildParams(a,t[a],e,i);return l.join("&").replace(/%20/g,"+")},reqwest.getcallbackPrefix=function(){return callbackPrefix},reqwest.compat=function(t,s){return t&&(t.type&&(t.method=t.type)&&delete t.type,t.dataType&&(t.type=t.dataType),t.jsonpCallback&&(t.jsonpCallbackName=t.jsonpCallback)&&delete t.jsonpCallback,t.jsonp&&(t.jsonpCallback=t.jsonp)),new Reqwest(t,s)},reqwest.ajaxSetup=function(t){for(var s in t=t||{})globalSetupOptions[s]=t[s]},reqwest},module.exports?module.exports=definition():void 0===(__WEBPACK_AMD_DEFINE_RESULT__="function"==typeof(__WEBPACK_AMD_DEFINE_FACTORY__=definition)?__WEBPACK_AMD_DEFINE_FACTORY__.call(exports,__webpack_require__,exports,module):__WEBPACK_AMD_DEFINE_FACTORY__)||(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)},1196:function(t,s){},1247:function(t,s,a){},1248:function(t,s,a){},1249:function(t,s,a){},1250:function(t,s,a){},1251:function(t,s,a){},1252:function(t,s,a){},1253:function(t,s,a){},1343:function(t,s,a){"use strict";var n=a(1247);a.n(n).a},1344:function(t,s,a){"use strict";var n=a(1248);a.n(n).a},1345:function(t,s,a){"use strict";var n=a(1249);a.n(n).a},1346:function(t,s,a){"use strict";var n=a(1250);a.n(n).a},1347:function(t,s,a){"use strict";var n=a(1251);a.n(n).a},1348:function(t,s,a){"use strict";var n=a(1252);a.n(n).a},1349:function(t,s,a){"undefined"!=typeof self&&self,t.exports=function(t){var s={};function a(n){if(s[n])return s[n].exports;var e=s[n]={i:n,l:!1,exports:{}};return t[n].call(e.exports,e,e.exports,a),e.l=!0,e.exports}return a.m=t,a.c=s,a.d=function(t,s,n){a.o(t,s)||Object.defineProperty(t,s,{enumerable:!0,get:n})},a.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},a.t=function(t,s){if(1&s&&(t=a(t)),8&s)return t;if(4&s&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&s&&"string"!=typeof t)for(var e in t)a.d(n,e,function(s){return t[s]}.bind(null,e));return n},a.n=function(t){var s=t&&t.__esModule?function(){return t.default}:function(){return t};return a.d(s,"a",s),s},a.o=function(t,s){return Object.prototype.hasOwnProperty.call(t,s)},a.p="",a(a.s="fb15")}({"0029":function(t,s){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},"0185":function(t,s,a){var n=a("e5fa");t.exports=function(t){return Object(n(t))}},"01f9":function(t,s,a){"use strict";var n=a("2d00"),e=a("5ca1"),l=a("2aba"),r=a("32e9"),i=a("84f2"),o=a("41a0"),c=a("7f20"),v=a("38fd"),_=a("2b4c")("iterator"),d=!([].keys&&"next"in[].keys()),p="keys",h="values",u=function(){return this};t.exports=function(t,s,a,m,C,j,g){o(a,s,m);var f,y,k,b=function(t){if(!d&&t in I)return I[t];switch(t){case p:case h:return function(){return new a(this,t)}}return function(){return new a(this,t)}},w=s+" Iterator",x=C==h,S=!1,I=t.prototype,R=I[_]||I["@@iterator"]||C&&I[C],N=R||b(C),L=C?x?b("entries"):N:void 0,P="Array"==s&&I.entries||R;if(P&&(k=v(P.call(new t)))!==Object.prototype&&k.next&&(c(k,w,!0),n||"function"==typeof k[_]||r(k,_,u)),x&&R&&R.name!==h&&(S=!0,N=function(){return R.call(this)}),n&&!g||!d&&!S&&I[_]||r(I,_,N),i[s]=N,i[w]=u,C)if(f={values:x?N:b(h),keys:j?N:b(p),entries:L},g)for(y in f)y in I||l(I,y,f[y]);else e(e.P+e.F*(d||S),s,f);return f}},"02f4":function(t,s,a){var n=a("4588"),e=a("be13");t.exports=function(t){return function(s,a){var l,r,i=String(e(s)),o=n(a),c=i.length;return o<0||o>=c?t?"":void 0:(l=i.charCodeAt(o))<55296||l>56319||o+1===c||(r=i.charCodeAt(o+1))<56320||r>57343?t?i.charAt(o):l:t?i.slice(o,o+2):r-56320+(l-55296<<10)+65536}}},"0a49":function(t,s,a){var n=a("9b43"),e=a("626a"),l=a("4bf8"),r=a("9def"),i=a("cd1c");t.exports=function(t,s){var a=1==t,o=2==t,c=3==t,v=4==t,_=6==t,d=5==t||_,p=s||i;return function(s,i,h){for(var u,m,C=l(s),j=e(C),g=n(i,h,3),f=r(j.length),y=0,k=a?p(s,f):o?p(s,0):void 0;f>y;y++)if((d||y in j)&&(m=g(u=j[y],y,C),t))if(a)k[y]=m;else if(m)switch(t){case 3:return!0;case 5:return u;case 6:return y;case 2:k.push(u)}else if(v)return!1;return _?-1:c||v?v:k}}},"0a91":function(t,s,a){a("b42c"),a("93c4"),t.exports=a("b77f")},"0bfb":function(t,s,a){"use strict";var n=a("cb7c");t.exports=function(){var t=n(this),s="";return t.global&&(s+="g"),t.ignoreCase&&(s+="i"),t.multiline&&(s+="m"),t.unicode&&(s+="u"),t.sticky&&(s+="y"),s}},"0d58":function(t,s,a){var n=a("ce10"),e=a("e11e");t.exports=Object.keys||function(t){return n(t,e)}},"0f89":function(t,s,a){var n=a("6f8a");t.exports=function(t){if(!n(t))throw TypeError(t+" is not an object!");return t}},"103a":function(t,s,a){var n=a("da3c").document;t.exports=n&&n.documentElement},1169:function(t,s,a){var n=a("2d95");t.exports=Array.isArray||function(t){return"Array"==n(t)}},"11e9":function(t,s,a){var n=a("52a7"),e=a("4630"),l=a("6821"),r=a("6a99"),i=a("69a8"),o=a("c69a"),c=Object.getOwnPropertyDescriptor;s.f=a("9e1e")?c:function(t,s){if(t=l(t),s=r(s,!0),o)try{return c(t,s)}catch(t){}if(i(t,s))return e(!n.f.call(t,s),t[s])}},"12fd":function(t,s,a){var n=a("6f8a"),e=a("da3c").document,l=n(e)&&n(e.createElement);t.exports=function(t){return l?e.createElement(t):{}}},1495:function(t,s,a){var n=a("86cc"),e=a("cb7c"),l=a("0d58");t.exports=a("9e1e")?Object.defineProperties:function(t,s){e(t);for(var a,r=l(s),i=r.length,o=0;i>o;)n.f(t,a=r[o++],s[a]);return t}},1938:function(t,s,a){var n=a("d13f");n(n.S,"Array",{isArray:a("b5aa")})},"1b55":function(t,s,a){var n=a("7772")("wks"),e=a("7b00"),l=a("da3c").Symbol,r="function"==typeof l;(t.exports=function(t){return n[t]||(n[t]=r&&l[t]||(r?l:e)("Symbol."+t))}).store=n},"1b8f":function(t,s,a){var n=a("a812"),e=Math.max,l=Math.min;t.exports=function(t,s){return(t=n(t))<0?e(t+s,0):l(t,s)}},"1c01":function(t,s,a){var n=a("5ca1");n(n.S+n.F*!a("9e1e"),"Object",{defineProperty:a("86cc").f})},"1fa8":function(t,s,a){var n=a("cb7c");t.exports=function(t,s,a,e){try{return e?s(n(a)[0],a[1]):s(a)}catch(s){var l=t.return;throw void 0!==l&&n(l.call(t)),s}}},"230e":function(t,s,a){var n=a("d3f4"),e=a("7726").document,l=n(e)&&n(e.createElement);t.exports=function(t){return l?e.createElement(t):{}}},2312:function(t,s,a){t.exports=a("8ce0")},"23c6":function(t,s,a){var n=a("2d95"),e=a("2b4c")("toStringTag"),l="Arguments"==n(function(){return arguments}());t.exports=function(t){var s,a,r;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(a=function(t,s){try{return t[s]}catch(t){}}(s=Object(t),e))?a:l?n(s):"Object"==(r=n(s))&&"function"==typeof s.callee?"Arguments":r}},2418:function(t,s,a){var n=a("6a9b"),e=a("a5ab"),l=a("1b8f");t.exports=function(t){return function(s,a,r){var i,o=n(s),c=e(o.length),v=l(r,c);if(t&&a!=a){for(;c>v;)if((i=o[v++])!=i)return!0}else for(;c>v;v++)if((t||v in o)&&o[v]===a)return t||v||0;return!t&&-1}}},"245b":function(t,s){t.exports=function(t,s){return{value:s,done:!!t}}},2621:function(t,s){s.f=Object.getOwnPropertySymbols},2695:function(t,s,a){var n=a("43c8"),e=a("6a9b"),l=a("2418")(!1),r=a("5d8f")("IE_PROTO");t.exports=function(t,s){var a,i=e(t),o=0,c=[];for(a in i)a!=r&&n(i,a)&&c.push(a);for(;s.length>o;)n(i,a=s[o++])&&(~l(c,a)||c.push(a));return c}},"27ee":function(t,s,a){var n=a("23c6"),e=a("2b4c")("iterator"),l=a("84f2");t.exports=a("8378").getIteratorMethod=function(t){if(null!=t)return t[e]||t["@@iterator"]||l[n(t)]}},"2a4e":function(t,s,a){var n=a("a812"),e=a("e5fa");t.exports=function(t){return function(s,a){var l,r,i=String(e(s)),o=n(a),c=i.length;return o<0||o>=c?t?"":void 0:(l=i.charCodeAt(o))<55296||l>56319||o+1===c||(r=i.charCodeAt(o+1))<56320||r>57343?t?i.charAt(o):l:t?i.slice(o,o+2):r-56320+(l-55296<<10)+65536}}},"2aba":function(t,s,a){var n=a("7726"),e=a("32e9"),l=a("69a8"),r=a("ca5a")("src"),i="toString",o=Function[i],c=(""+o).split(i);a("8378").inspectSource=function(t){return o.call(t)},(t.exports=function(t,s,a,i){var o="function"==typeof a;o&&(l(a,"name")||e(a,"name",s)),t[s]!==a&&(o&&(l(a,r)||e(a,r,t[s]?""+t[s]:c.join(String(s)))),t===n?t[s]=a:i?t[s]?t[s]=a:e(t,s,a):(delete t[s],e(t,s,a)))})(Function.prototype,i,(function(){return"function"==typeof this&&this[r]||o.call(this)}))},"2aeb":function(t,s,a){var n=a("cb7c"),e=a("1495"),l=a("e11e"),r=a("613b")("IE_PROTO"),i=function(){},o="prototype",c=function(){var t,s=a("230e")("iframe"),n=l.length;for(s.style.display="none",a("fab2").appendChild(s),s.src="javascript:",(t=s.contentWindow.document).open(),t.write("<script>document.F=Object<\/script>"),t.close(),c=t.F;n--;)delete c[o][l[n]];return c()};t.exports=Object.create||function(t,s){var a;return null!==t?(i[o]=n(t),a=new i,i[o]=null,a[r]=t):a=c(),void 0===s?a:e(a,s)}},"2b4c":function(t,s,a){var n=a("5537")("wks"),e=a("ca5a"),l=a("7726").Symbol,r="function"==typeof l;(t.exports=function(t){return n[t]||(n[t]=r&&l[t]||(r?l:e)("Symbol."+t))}).store=n},"2d00":function(t,s){t.exports=!1},"2d95":function(t,s){var a={}.toString;t.exports=function(t){return a.call(t).slice(8,-1)}},"2ea1":function(t,s,a){var n=a("6f8a");t.exports=function(t,s){if(!n(t))return t;var a,e;if(s&&"function"==typeof(a=t.toString)&&!n(e=a.call(t)))return e;if("function"==typeof(a=t.valueOf)&&!n(e=a.call(t)))return e;if(!s&&"function"==typeof(a=t.toString)&&!n(e=a.call(t)))return e;throw TypeError("Can't convert object to primitive value")}},"2f21":function(t,s,a){"use strict";var n=a("79e5");t.exports=function(t,s){return!!t&&n((function(){s?t.call(null,(function(){}),1):t.call(null)}))}},"2fdb":function(t,s,a){"use strict";var n=a("5ca1"),e=a("d2c8"),l="includes";n(n.P+n.F*a("5147")(l),"String",{includes:function(t){return!!~e(this,t,l).indexOf(t,arguments.length>1?arguments[1]:void 0)}})},"32e9":function(t,s,a){var n=a("86cc"),e=a("4630");t.exports=a("9e1e")?function(t,s,a){return n.f(t,s,e(1,a))}:function(t,s,a){return t[s]=a,t}},"33a4":function(t,s,a){var n=a("84f2"),e=a("2b4c")("iterator"),l=Array.prototype;t.exports=function(t){return void 0!==t&&(n.Array===t||l[e]===t)}},3425:function(t,s,a){"use strict";var n=(a("1c01"),a("58b2"),a("8e6e"),a("f3e2"),a("456d"),a("85f2")),e=a.n(n);function l(t,s,a){return s in t?e()(t,s,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[s]=a,t}a("3b2b");var r=a("a745"),i=a.n(r),o=a("5d73"),c=a.n(o),v=a("c8bb"),_=a.n(v);function d(t,s){return function(t){if(i()(t))return t}(t)||function(t,s){if(_()(Object(t))||"[object Arguments]"===Object.prototype.toString.call(t)){var a=[],n=!0,e=!1,l=void 0;try{for(var r,i=c()(t);!(n=(r=i.next()).done)&&(a.push(r.value),!s||a.length!==s);n=!0);}catch(t){e=!0,l=t}finally{try{n||null==i.return||i.return()}finally{if(e)throw l}}return a}}(t,s)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function p(t){return"function"==typeof t||"[object Function]"===Object.prototype.toString.call(t)}function h(t,s,a){var n=t,e=["matches","webkitMatchesSelector","mozMatchesSelector","msMatchesSelector","oMatchesSelector"].find((function(t){return p(n[t])}));if(!p(n[e]))return!1;do{if(n[e](s))return!0;if(n===a)return!1;n=n.parentNode}while(n);return!1}function u(t,s,a){t&&(t.attachEvent?t.attachEvent("on"+s,a):t.addEventListener?t.addEventListener(s,a,!0):t["on"+s]=a)}function m(t,s,a){t&&(t.detachEvent?t.detachEvent("on"+s,a):t.removeEventListener?t.removeEventListener(s,a,!0):t["on"+s]=null)}function C(t,s){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);s&&(n=n.filter((function(s){return Object.getOwnPropertyDescriptor(t,s).enumerable}))),a.push.apply(a,n)}return a}a("6762"),a("2fdb"),a("d25f"),a("ac6a"),a("cadf"),a("5df3"),a("4f7f"),a("c5f6"),a("7514"),a("6b54"),a("87b3");var j={start:"touchstart",move:"touchmove",stop:"touchend"},g={userSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none",MsUserSelect:"none"},f={userSelect:"auto",MozUserSelect:"auto",WebkitUserSelect:"auto",MsUserSelect:"auto"},y={start:"mousedown",move:"mousemove",stop:"mouseup"},k=function(t,s,a,n,e,l,r,i){var o,c="function"==typeof t?t.options:t;if(s&&(c.render=s,c.staticRenderFns=a,c._compiled=!0),n&&(c.functional=!0),l&&(c._scopeId="data-v-"+l),r?(o=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},c._ssrRegister=o):e&&(o=i?function(){e.call(this,this.$root.$options.shadowRoot)}:e),o)if(c.functional){c._injectStyles=o;var v=c.render;c.render=function(t,s){return o.call(s),v(t,s)}}else{var _=c.beforeCreate;c.beforeCreate=_?[].concat(_,o):[o]}return{exports:t,options:c}}({replace:!0,name:"vue-draggable-resizable",props:{className:{type:String,default:"vdr"},classNameDraggable:{type:String,default:"draggable"},classNameResizable:{type:String,default:"resizable"},classNameDragging:{type:String,default:"dragging"},classNameResizing:{type:String,default:"resizing"},classNameActive:{type:String,default:"active"},classNameHandle:{type:String,default:"handle"},disableUserSelect:{type:Boolean,default:!0},enableNativeDrag:{type:Boolean,default:!1},preventDeactivation:{type:Boolean,default:!1},active:{type:Boolean,default:!1},draggable:{type:Boolean,default:!0},resizable:{type:Boolean,default:!0},lockAspectRatio:{type:Boolean,default:!1},w:{type:Number,default:200,validator:function(t){return t>0}},h:{type:Number,default:200,validator:function(t){return t>0}},minWidth:{type:Number,default:0,validator:function(t){return t>=0}},minHeight:{type:Number,default:0,validator:function(t){return t>=0}},maxWidth:{type:Number,default:null,validator:function(t){return t>=0}},maxHeight:{type:Number,default:null,validator:function(t){return t>=0}},x:{type:Number,default:0,validator:function(t){return"number"==typeof t}},y:{type:Number,default:0,validator:function(t){return"number"==typeof t}},z:{type:[String,Number],default:"auto",validator:function(t){return"string"==typeof t?"auto"===t:t>=0}},handles:{type:Array,default:function(){return["tl","tm","tr","mr","br","bm","bl","ml"]},validator:function(t){var s=new Set(["tl","tm","tr","mr","br","bm","bl","ml"]);return new Set(t.filter((function(t){return s.has(t)}))).size===t.length}},dragHandle:{type:String,default:null},dragCancel:{type:String,default:null},axis:{type:String,default:"both",validator:function(t){return["x","y","both"].includes(t)}},grid:{type:Array,default:function(){return[1,1]}},parent:{type:Boolean,default:!1},scale:{type:Number,default:1,validator:function(t){return t>0}},onDragStart:{type:Function,default:null},onResizeStart:{type:Function,default:null}},data:function(){return{rawWidth:this.w,rawHeight:this.h,rawLeft:this.x,rawTop:this.y,rawRight:null,rawBottom:null,left:this.x,top:this.y,right:null,bottom:null,aspectFactor:this.w/this.h,parentWidth:null,parentHeight:null,minW:this.minWidth,minH:this.minHeight,maxW:this.maxWidth,maxH:this.maxHeight,handle:null,enabled:this.active,resizing:!1,dragging:!1,zIndex:this.z}},created:function(){this.maxWidth&&this.minWidth>this.maxWidth&&console.warn("[Vdr warn]: Invalid prop: minWidth cannot be greater than maxWidth"),this.maxWidth&&this.minHeight>this.maxHeight&&console.warn("[Vdr warn]: Invalid prop: minHeight cannot be greater than maxHeight"),this.resetBoundsAndMouseState()},mounted:function(){this.enableNativeDrag||(this.$el.ondragstart=function(){return!1});var t=d(this.getParentSize(),2);this.parentWidth=t[0],this.parentHeight=t[1],this.rawRight=this.parentWidth-this.rawWidth-this.rawLeft,this.rawBottom=this.parentHeight-this.rawHeight-this.rawTop,u(document.documentElement,"mousedown",this.deselect),u(document.documentElement,"touchend touchcancel",this.deselect),u(window,"resize",this.checkParentSize)},beforeDestroy:function(){m(document.documentElement,"mousedown",this.deselect),m(document.documentElement,"touchstart",this.handleUp),m(document.documentElement,"mousemove",this.move),m(document.documentElement,"touchmove",this.move),m(document.documentElement,"mouseup",this.handleUp),m(document.documentElement,"touchend touchcancel",this.deselect),m(window,"resize",this.checkParentSize)},methods:{resetBoundsAndMouseState:function(){this.mouseClickPosition={mouseX:0,mouseY:0,x:0,y:0,w:0,h:0},this.bounds={minLeft:null,maxLeft:null,minRight:null,maxRight:null,minTop:null,maxTop:null,minBottom:null,maxBottom:null}},checkParentSize:function(){if(this.parent){var t=d(this.getParentSize(),2),s=t[0],a=t[1],n=this.parentWidth-s,e=this.parentHeight-a;this.rawRight-=n,this.rawBottom-=e,this.parentWidth=s,this.parentHeight=a}},getParentSize:function(){if(this.parent){var t=window.getComputedStyle(this.$el.parentNode,null);return[parseInt(t.getPropertyValue("width"),10),parseInt(t.getPropertyValue("height"),10)]}return[null,null]},elementTouchDown:function(t){y=j,this.elementDown(t)},elementDown:function(t){var s=t.target||t.srcElement;if(this.$el.contains(s)){if(this.onDragStart&&!1===this.onDragStart(t))return;if(this.dragHandle&&!h(s,this.dragHandle,this.$el)||this.dragCancel&&h(s,this.dragCancel,this.$el))return;this.enabled||(this.enabled=!0,this.$emit("activated"),this.$emit("update:active",!0)),this.draggable&&(this.dragging=!0),this.mouseClickPosition.mouseX=t.touches?t.touches[0].pageX:t.pageX,this.mouseClickPosition.mouseY=t.touches?t.touches[0].pageY:t.pageY,this.mouseClickPosition.left=this.left,this.mouseClickPosition.right=this.right,this.mouseClickPosition.top=this.top,this.mouseClickPosition.bottom=this.bottom,this.parent&&(this.bounds=this.calcDragLimits()),u(document.documentElement,y.move,this.move),u(document.documentElement,y.stop,this.handleUp)}},calcDragLimits:function(){return{minLeft:(this.parentWidth+this.left)%this.grid[0],maxLeft:Math.floor((this.parentWidth-this.width-this.left)/this.grid[0])*this.grid[0]+this.left,minRight:(this.parentWidth+this.right)%this.grid[0],maxRight:Math.floor((this.parentWidth-this.width-this.right)/this.grid[0])*this.grid[0]+this.right,minTop:(this.parentHeight+this.top)%this.grid[1],maxTop:Math.floor((this.parentHeight-this.height-this.top)/this.grid[1])*this.grid[1]+this.top,minBottom:(this.parentHeight+this.bottom)%this.grid[1],maxBottom:Math.floor((this.parentHeight-this.height-this.bottom)/this.grid[1])*this.grid[1]+this.bottom}},deselect:function(t){var s=t.target||t.srcElement,a=new RegExp(this.className+"-([trmbl]{2})","");this.$el.contains(s)||a.test(s.className)||(this.enabled&&!this.preventDeactivation&&(this.enabled=!1,this.$emit("deactivated"),this.$emit("update:active",!1)),m(document.documentElement,y.move,this.handleMove)),this.resetBoundsAndMouseState()},handleTouchDown:function(t,s){y=j,this.handleDown(t,s)},handleDown:function(t,s){this.onResizeStart&&!1===this.onResizeStart(t,s)||(s.stopPropagation&&s.stopPropagation(),this.lockAspectRatio&&!t.includes("m")?this.handle="m"+t.substring(1):this.handle=t,this.resizing=!0,this.mouseClickPosition.mouseX=s.touches?s.touches[0].pageX:s.pageX,this.mouseClickPosition.mouseY=s.touches?s.touches[0].pageY:s.pageY,this.mouseClickPosition.left=this.left,this.mouseClickPosition.right=this.right,this.mouseClickPosition.top=this.top,this.mouseClickPosition.bottom=this.bottom,this.bounds=this.calcResizeLimits(),u(document.documentElement,y.move,this.handleMove),u(document.documentElement,y.stop,this.handleUp))},calcResizeLimits:function(){var t=this.minW,s=this.minH,a=this.maxW,n=this.maxH,e=this.aspectFactor,l=d(this.grid,2),r=l[0],i=l[1],o=this.width,c=this.height,v=this.left,_=this.top,p=this.right,h=this.bottom;this.lockAspectRatio&&(t/s>e?s=t/e:t=e*s,a&&n?(a=Math.min(a,e*n),n=Math.min(n,a/e)):a?n=a/e:n&&(a=e*n)),a-=a%r,n-=n%i;var u={minLeft:null,maxLeft:null,minTop:null,maxTop:null,minRight:null,maxRight:null,minBottom:null,maxBottom:null};return this.parent?(u.minLeft=(this.parentWidth+v)%r,u.maxLeft=v+Math.floor((o-t)/r)*r,u.minTop=(this.parentHeight+_)%i,u.maxTop=_+Math.floor((c-s)/i)*i,u.minRight=(this.parentWidth+p)%r,u.maxRight=p+Math.floor((o-t)/r)*r,u.minBottom=(this.parentHeight+h)%i,u.maxBottom=h+Math.floor((c-s)/i)*i,a&&(u.minLeft=Math.max(u.minLeft,this.parentWidth-p-a),u.minRight=Math.max(u.minRight,this.parentWidth-v-a)),n&&(u.minTop=Math.max(u.minTop,this.parentHeight-h-n),u.minBottom=Math.max(u.minBottom,this.parentHeight-_-n)),this.lockAspectRatio&&(u.minLeft=Math.max(u.minLeft,v-_*e),u.minTop=Math.max(u.minTop,_-v/e),u.minRight=Math.max(u.minRight,p-h*e),u.minBottom=Math.max(u.minBottom,h-p/e))):(u.minLeft=null,u.maxLeft=v+Math.floor((o-t)/r)*r,u.minTop=null,u.maxTop=_+Math.floor((c-s)/i)*i,u.minRight=null,u.maxRight=p+Math.floor((o-t)/r)*r,u.minBottom=null,u.maxBottom=h+Math.floor((c-s)/i)*i,a&&(u.minLeft=-(p+a),u.minRight=-(v+a)),n&&(u.minTop=-(h+n),u.minBottom=-(_+n)),this.lockAspectRatio&&a&&n&&(u.minLeft=Math.min(u.minLeft,-(p+a)),u.minTop=Math.min(u.minTop,-(n+h)),u.minRight=Math.min(u.minRight,-v-a),u.minBottom=Math.min(u.minBottom,-_-n))),u},move:function(t){this.resizing?this.handleMove(t):this.dragging&&this.elementMove(t)},elementMove:function(t){var s=this.axis,a=(this.grid,this.mouseClickPosition),n=s&&"y"!==s?a.mouseX-(t.touches?t.touches[0].pageX:t.pageX):0,e=s&&"x"!==s?a.mouseY-(t.touches?t.touches[0].pageY:t.pageY):0,l=d(this.snapToGrid(this.grid,n,e),2),r=l[0],i=l[1];this.rawTop=a.top-i,this.rawBottom=a.bottom+i,this.rawLeft=a.left-r,this.rawRight=a.right+r,this.$emit("dragging",this.left,this.top)},handleMove:function(t){var s=this.handle,a=this.mouseClickPosition,n=a.mouseX-(t.touches?t.touches[0].pageX:t.pageX),e=a.mouseY-(t.touches?t.touches[0].pageY:t.pageY),l=d(this.snapToGrid(this.grid,n,e),2),r=l[0],i=l[1];s.includes("b")?this.rawBottom=a.bottom+i:s.includes("t")&&(this.rawTop=a.top-i),s.includes("r")?this.rawRight=a.right+r:s.includes("l")&&(this.rawLeft=a.left-r),this.$emit("resizing",this.left,this.top,this.width,this.height)},handleUp:function(t){this.handle=null,this.resetBoundsAndMouseState(),this.rawTop=this.top,this.rawBottom=this.bottom,this.rawLeft=this.left,this.rawRight=this.right,this.resizing&&(this.resizing=!1,this.$emit("resizestop",this.left,this.top,this.width,this.height)),this.dragging&&(this.dragging=!1,this.$emit("dragstop",this.left,this.top)),m(document.documentElement,y.move,this.handleMove)},snapToGrid:function(t,s,a){return[Math.round(s/this.scale/t[0])*t[0],Math.round(a/this.scale/t[1])*t[1]]}},computed:{style:function(){return function(t){for(var s=1;s<arguments.length;s++){var a=null!=arguments[s]?arguments[s]:{};s%2?C(a,!0).forEach((function(s){l(t,s,a[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):C(a).forEach((function(s){Object.defineProperty(t,s,Object.getOwnPropertyDescriptor(a,s))}))}return t}({position:"absolute",top:this.top+"px",left:this.left+"px",width:this.width+"px",height:this.height+"px",zIndex:this.zIndex},this.dragging&&this.disableUserSelect?g:f)},actualHandles:function(){return this.resizable?this.handles:[]},width:function(){return this.parentWidth-this.left-this.right},height:function(){return this.parentHeight-this.top-this.bottom},resizingOnX:function(){return Boolean(this.handle)&&(this.handle.includes("l")||this.handle.includes("r"))},resizingOnY:function(){return Boolean(this.handle)&&(this.handle.includes("t")||this.handle.includes("b"))},isCornerHandle:function(){return Boolean(this.handle)&&["tl","tr","br","bl"].includes(this.handle)}},watch:{active:function(t){this.enabled=t,t?this.$emit("activated"):this.$emit("deactivated")},z:function(t){(t>=0||"auto"===t)&&(this.zIndex=t)},rawLeft:function(t){var s=this.bounds,a=this.aspectFactor,n=this.lockAspectRatio,e=this.left,l=this.top;null!==s.minLeft&&t<s.minLeft?t=s.minLeft:null!==s.maxLeft&&s.maxLeft<t&&(t=s.maxLeft),n&&this.resizingOnX&&(this.rawTop=l-(e-t)/a),this.left=t},rawRight:function(t){var s=this.bounds,a=this.aspectFactor,n=this.lockAspectRatio,e=this.right,l=this.bottom;null!==s.minRight&&t<s.minRight?t=s.minRight:null!==s.maxRight&&s.maxRight<t&&(t=s.maxRight),n&&this.resizingOnX&&(this.rawBottom=l-(e-t)/a),this.right=t},rawTop:function(t){var s=this.bounds,a=this.aspectFactor,n=this.lockAspectRatio,e=this.left,l=this.top;null!==s.minTop&&t<s.minTop?t=s.minTop:null!==s.maxTop&&s.maxTop<t&&(t=s.maxTop),n&&this.resizingOnY&&(this.rawLeft=e-(l-t)*a),this.top=t},rawBottom:function(t){var s=this.bounds,a=this.aspectFactor,n=this.lockAspectRatio,e=this.right,l=this.bottom;null!==s.minBottom&&t<s.minBottom?t=s.minBottom:null!==s.maxBottom&&s.maxBottom<t&&(t=s.maxBottom),n&&this.resizingOnY&&(this.rawRight=e-(l-t)*a),this.bottom=t},x:function(){if(!this.resizing&&!this.dragging){this.parent&&(this.bounds=this.calcDragLimits());var t=this.x-this.left;t%this.grid[0]==0&&(this.rawLeft=this.x,this.rawRight=this.right-t)}},y:function(){if(!this.resizing&&!this.dragging){this.parent&&(this.bounds=this.calcDragLimits());var t=this.y-this.top;t%this.grid[1]==0&&(this.rawTop=this.y,this.rawBottom=this.bottom-t)}},lockAspectRatio:function(t){this.aspectFactor=t?this.width/this.height:void 0},minWidth:function(t){t>0&&t<=this.width&&(this.minW=t)},minHeight:function(t){t>0&&t<=this.height&&(this.minH=t)},maxWidth:function(t){this.maxW=t},maxHeight:function(t){this.maxH=t},w:function(){if(!this.resizing&&!this.dragging){this.parent&&(this.bounds=this.calcResizeLimits());var t=this.width-this.w;t%this.grid[0]==0&&(this.rawRight=this.right+t)}},h:function(){if(!this.resizing&&!this.dragging){this.parent&&(this.bounds=this.calcResizeLimits());var t=this.height-this.h;t%this.grid[1]==0&&(this.rawBottom=this.bottom+t)}}}},(function(){var t,s=this,a=s.$createElement,n=s._self._c||a;return n("div",{class:[(t={},t[s.classNameActive]=s.enabled,t[s.classNameDragging]=s.dragging,t[s.classNameResizing]=s.resizing,t[s.classNameDraggable]=s.draggable,t[s.classNameResizable]=s.resizable,t),s.className],style:s.style,on:{mousedown:s.elementDown,touchstart:s.elementTouchDown}},[s._l(s.actualHandles,(function(t){return n("div",{key:t,class:[s.classNameHandle,s.classNameHandle+"-"+t],style:{display:s.enabled?"block":"none"},on:{mousedown:function(a){a.stopPropagation(),a.preventDefault(),s.handleDown(t,a)},touchstart:function(a){a.stopPropagation(),a.preventDefault(),s.handleTouchDown(t,a)}}},[s._t(t)],2)})),s._t("default")],2)}),[],!1,null,null,null);s.a=k.exports},3846:function(t,s,a){a("9e1e")&&"g"!=/./g.flags&&a("86cc").f(RegExp.prototype,"flags",{configurable:!0,get:a("0bfb")})},"38fd":function(t,s,a){var n=a("69a8"),e=a("4bf8"),l=a("613b")("IE_PROTO"),r=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=e(t),n(t,l)?t[l]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?r:null}},"3adc":function(t,s,a){var n=a("0f89"),e=a("a47f"),l=a("2ea1"),r=Object.defineProperty;s.f=a("7d95")?Object.defineProperty:function(t,s,a){if(n(t),s=l(s,!0),n(a),e)try{return r(t,s,a)}catch(t){}if("get"in a||"set"in a)throw TypeError("Accessors not supported!");return"value"in a&&(t[s]=a.value),t}},"3b2b":function(t,s,a){var n=a("7726"),e=a("5dbc"),l=a("86cc").f,r=a("9093").f,i=a("aae3"),o=a("0bfb"),c=n.RegExp,v=c,_=c.prototype,d=/a/g,p=/a/g,h=new c(d)!==d;if(a("9e1e")&&(!h||a("79e5")((function(){return p[a("2b4c")("match")]=!1,c(d)!=d||c(p)==p||"/a/i"!=c(d,"i")})))){c=function(t,s){var a=this instanceof c,n=i(t),l=void 0===s;return!a&&n&&t.constructor===c&&l?t:e(h?new v(n&&!l?t.source:t,s):v((n=t instanceof c)?t.source:t,n&&l?o.call(t):s),a?this:_,c)};for(var u=function(t){t in c||l(c,t,{configurable:!0,get:function(){return v[t]},set:function(s){v[t]=s}})},m=r(v),C=0;m.length>C;)u(m[C++]);_.constructor=c,c.prototype=_,a("2aba")(n,"RegExp",c)}a("7a56")("RegExp")},"41a0":function(t,s,a){"use strict";var n=a("2aeb"),e=a("4630"),l=a("7f20"),r={};a("32e9")(r,a("2b4c")("iterator"),(function(){return this})),t.exports=function(t,s,a){t.prototype=n(r,{next:e(1,a)}),l(t,s+" Iterator")}},"43c8":function(t,s){var a={}.hasOwnProperty;t.exports=function(t,s){return a.call(t,s)}},"456d":function(t,s,a){var n=a("4bf8"),e=a("0d58");a("5eda")("keys",(function(){return function(t){return e(n(t))}}))},4588:function(t,s){var a=Math.ceil,n=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?n:a)(t)}},4630:function(t,s){t.exports=function(t,s){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:s}}},"4a59":function(t,s,a){var n=a("9b43"),e=a("1fa8"),l=a("33a4"),r=a("cb7c"),i=a("9def"),o=a("27ee"),c={},v={};(s=t.exports=function(t,s,a,_,d){var p,h,u,m,C=d?function(){return t}:o(t),j=n(a,_,s?2:1),g=0;if("function"!=typeof C)throw TypeError(t+" is not iterable!");if(l(C)){for(p=i(t.length);p>g;g++)if((m=s?j(r(h=t[g])[0],h[1]):j(t[g]))===c||m===v)return m}else for(u=C.call(t);!(h=u.next()).done;)if((m=e(u,j,h.value,s))===c||m===v)return m}).BREAK=c,s.RETURN=v},"4bf8":function(t,s,a){var n=a("be13");t.exports=function(t){return Object(n(t))}},"4f7f":function(t,s,a){"use strict";var n=a("c26b"),e=a("b39a");t.exports=a("e0b8")("Set",(function(t){return function(){return t(this,arguments.length>0?arguments[0]:void 0)}}),{add:function(t){return n.def(e(this,"Set"),t=0===t?0:t,t)}},n)},5147:function(t,s,a){var n=a("2b4c")("match");t.exports=function(t){var s=/./;try{"/./"[t](s)}catch(a){try{return s[n]=!1,!"/./"[t](s)}catch(t){}}return!0}},"52a7":function(t,s){s.f={}.propertyIsEnumerable},5537:function(t,s,a){var n=a("8378"),e=a("7726"),l="__core-js_shared__",r=e[l]||(e[l]={});(t.exports=function(t,s){return r[t]||(r[t]=void 0!==s?s:{})})("versions",[]).push({version:n.version,mode:a("2d00")?"pure":"global",copyright:"© 2018 Denis Pushkarev (zloirock.ru)"})},"58b2":function(t,s,a){var n=a("5ca1");n(n.S+n.F*!a("9e1e"),"Object",{defineProperties:a("1495")})},"5ca1":function(t,s,a){var n=a("7726"),e=a("8378"),l=a("32e9"),r=a("2aba"),i=a("9b43"),o="prototype",c=function(t,s,a){var v,_,d,p,h=t&c.F,u=t&c.G,m=t&c.S,C=t&c.P,j=t&c.B,g=u?n:m?n[s]||(n[s]={}):(n[s]||{})[o],f=u?e:e[s]||(e[s]={}),y=f[o]||(f[o]={});for(v in u&&(a=s),a)d=((_=!h&&g&&void 0!==g[v])?g:a)[v],p=j&&_?i(d,n):C&&"function"==typeof d?i(Function.call,d):d,g&&r(g,v,d,t&c.U),f[v]!=d&&l(f,v,p),C&&y[v]!=d&&(y[v]=d)};n.core=e,c.F=1,c.G=2,c.S=4,c.P=8,c.B=16,c.W=32,c.U=64,c.R=128,t.exports=c},"5cc5":function(t,s,a){var n=a("2b4c")("iterator"),e=!1;try{var l=[7][n]();l.return=function(){e=!0},Array.from(l,(function(){throw 2}))}catch(t){}t.exports=function(t,s){if(!s&&!e)return!1;var a=!1;try{var l=[7],r=l[n]();r.next=function(){return{done:a=!0}},l[n]=function(){return r},t(l)}catch(t){}return a}},"5ce7":function(t,s,a){"use strict";var n=a("7108"),e=a("f845"),l=a("c0d8"),r={};a("8ce0")(r,a("1b55")("iterator"),(function(){return this})),t.exports=function(t,s,a){t.prototype=n(r,{next:e(1,a)}),l(t,s+" Iterator")}},"5d73":function(t,s,a){t.exports=a("0a91")},"5d8f":function(t,s,a){var n=a("7772")("keys"),e=a("7b00");t.exports=function(t){return n[t]||(n[t]=e(t))}},"5dbc":function(t,s,a){var n=a("d3f4"),e=a("8b97").set;t.exports=function(t,s,a){var l,r=s.constructor;return r!==a&&"function"==typeof r&&(l=r.prototype)!==a.prototype&&n(l)&&e&&e(t,l),t}},"5df3":function(t,s,a){"use strict";var n=a("02f4")(!0);a("01f9")(String,"String",(function(t){this._t=String(t),this._i=0}),(function(){var t,s=this._t,a=this._i;return a>=s.length?{value:void 0,done:!0}:(t=n(s,a),this._i+=t.length,{value:t,done:!1})}))},"5eda":function(t,s,a){var n=a("5ca1"),e=a("8378"),l=a("79e5");t.exports=function(t,s){var a=(e.Object||{})[t]||Object[t],r={};r[t]=s(a),n(n.S+n.F*l((function(){a(1)})),"Object",r)}},"613b":function(t,s,a){var n=a("5537")("keys"),e=a("ca5a");t.exports=function(t){return n[t]||(n[t]=e(t))}},"626a":function(t,s,a){var n=a("2d95");t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==n(t)?t.split(""):Object(t)}},6762:function(t,s,a){"use strict";var n=a("5ca1"),e=a("c366")(!0);n(n.P,"Array",{includes:function(t){return e(this,t,arguments.length>1?arguments[1]:void 0)}}),a("9c6c")("includes")},"67ab":function(t,s,a){var n=a("ca5a")("meta"),e=a("d3f4"),l=a("69a8"),r=a("86cc").f,i=0,o=Object.isExtensible||function(){return!0},c=!a("79e5")((function(){return o(Object.preventExtensions({}))})),v=function(t){r(t,n,{value:{i:"O"+ ++i,w:{}}})},_=t.exports={KEY:n,NEED:!1,fastKey:function(t,s){if(!e(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!l(t,n)){if(!o(t))return"F";if(!s)return"E";v(t)}return t[n].i},getWeak:function(t,s){if(!l(t,n)){if(!o(t))return!0;if(!s)return!1;v(t)}return t[n].w},onFreeze:function(t){return c&&_.NEED&&o(t)&&!l(t,n)&&v(t),t}}},6821:function(t,s,a){var n=a("626a"),e=a("be13");t.exports=function(t){return n(e(t))}},"69a8":function(t,s){var a={}.hasOwnProperty;t.exports=function(t,s){return a.call(t,s)}},"6a99":function(t,s,a){var n=a("d3f4");t.exports=function(t,s){if(!n(t))return t;var a,e;if(s&&"function"==typeof(a=t.toString)&&!n(e=a.call(t)))return e;if("function"==typeof(a=t.valueOf)&&!n(e=a.call(t)))return e;if(!s&&"function"==typeof(a=t.toString)&&!n(e=a.call(t)))return e;throw TypeError("Can't convert object to primitive value")}},"6a9b":function(t,s,a){var n=a("8bab"),e=a("e5fa");t.exports=function(t){return n(e(t))}},"6b54":function(t,s,a){"use strict";a("3846");var n=a("cb7c"),e=a("0bfb"),l=a("9e1e"),r="toString",i=/./[r],o=function(t){a("2aba")(RegExp.prototype,r,t,!0)};a("79e5")((function(){return"/a/b"!=i.call({source:"a",flags:"b"})}))?o((function(){var t=n(this);return"/".concat(t.source,"/","flags"in t?t.flags:!l&&t instanceof RegExp?e.call(t):void 0)})):i.name!=r&&o((function(){return i.call(this)}))},"6e1f":function(t,s){var a={}.toString;t.exports=function(t){return a.call(t).slice(8,-1)}},"6f42":function(t,s,a){},"6f8a":function(t,s){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},7108:function(t,s,a){var n=a("0f89"),e=a("f568"),l=a("0029"),r=a("5d8f")("IE_PROTO"),i=function(){},o="prototype",c=function(){var t,s=a("12fd")("iframe"),n=l.length;for(s.style.display="none",a("103a").appendChild(s),s.src="javascript:",(t=s.contentWindow.document).open(),t.write("<script>document.F=Object<\/script>"),t.close(),c=t.F;n--;)delete c[o][l[n]];return c()};t.exports=Object.create||function(t,s){var a;return null!==t?(i[o]=n(t),a=new i,i[o]=null,a[r]=t):a=c(),void 0===s?a:e(a,s)}},7514:function(t,s,a){"use strict";var n=a("5ca1"),e=a("0a49")(5),l="find",r=!0;l in[]&&Array(1)[l]((function(){r=!1})),n(n.P+n.F*r,"Array",{find:function(t){return e(this,t,arguments.length>1?arguments[1]:void 0)}}),a("9c6c")(l)},7633:function(t,s,a){var n=a("2695"),e=a("0029");t.exports=Object.keys||function(t){return n(t,e)}},7726:function(t,s){var a=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=a)},7772:function(t,s,a){var n=a("a7d3"),e=a("da3c"),l="__core-js_shared__",r=e[l]||(e[l]={});(t.exports=function(t,s){return r[t]||(r[t]=void 0!==s?s:{})})("versions",[]).push({version:n.version,mode:a("b457")?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},"77f1":function(t,s,a){var n=a("4588"),e=Math.max,l=Math.min;t.exports=function(t,s){return(t=n(t))<0?e(t+s,0):l(t,s)}},"79e5":function(t,s){t.exports=function(t){try{return!!t()}catch(t){return!0}}},"7a56":function(t,s,a){"use strict";var n=a("7726"),e=a("86cc"),l=a("9e1e"),r=a("2b4c")("species");t.exports=function(t){var s=n[t];l&&s&&!s[r]&&e.f(s,r,{configurable:!0,get:function(){return this}})}},"7b00":function(t,s){var a=0,n=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++a+n).toString(36))}},"7d8a":function(t,s,a){var n=a("6e1f"),e=a("1b55")("toStringTag"),l="Arguments"==n(function(){return arguments}());t.exports=function(t){var s,a,r;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(a=function(t,s){try{return t[s]}catch(t){}}(s=Object(t),e))?a:l?n(s):"Object"==(r=n(s))&&"function"==typeof s.callee?"Arguments":r}},"7d95":function(t,s,a){t.exports=!a("d782")((function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}))},"7f20":function(t,s,a){var n=a("86cc").f,e=a("69a8"),l=a("2b4c")("toStringTag");t.exports=function(t,s,a){t&&!e(t=a?t:t.prototype,l)&&n(t,l,{configurable:!0,value:s})}},8378:function(t,s){var a=t.exports={version:"2.6.1"};"number"==typeof __e&&(__e=a)},"84f2":function(t,s){t.exports={}},"85f2":function(t,s,a){t.exports=a("ec5b")},"86cc":function(t,s,a){var n=a("cb7c"),e=a("c69a"),l=a("6a99"),r=Object.defineProperty;s.f=a("9e1e")?Object.defineProperty:function(t,s,a){if(n(t),s=l(s,!0),n(a),e)try{return r(t,s,a)}catch(t){}if("get"in a||"set"in a)throw TypeError("Accessors not supported!");return"value"in a&&(t[s]=a.value),t}},"87b3":function(t,s,a){var n=Date.prototype,e="Invalid Date",l="toString",r=n[l],i=n.getTime;new Date(NaN)+""!=e&&a("2aba")(n,l,(function(){var t=i.call(this);return t==t?r.call(this):e}))},"89ca":function(t,s,a){a("b42c"),a("93c4"),t.exports=a("d38f")},"8b97":function(t,s,a){var n=a("d3f4"),e=a("cb7c"),l=function(t,s){if(e(t),!n(s)&&null!==s)throw TypeError(s+": can't set as prototype!")};t.exports={set:Object.setPrototypeOf||("__proto__"in{}?function(t,s,n){try{(n=a("9b43")(Function.call,a("11e9").f(Object.prototype,"__proto__").set,2))(t,[]),s=!(t instanceof Array)}catch(t){s=!0}return function(t,a){return l(t,a),s?t.__proto__=a:n(t,a),t}}({},!1):void 0),check:l}},"8bab":function(t,s,a){var n=a("6e1f");t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==n(t)?t.split(""):Object(t)}},"8ce0":function(t,s,a){var n=a("3adc"),e=a("f845");t.exports=a("7d95")?function(t,s,a){return n.f(t,s,e(1,a))}:function(t,s,a){return t[s]=a,t}},"8e6e":function(t,s,a){var n=a("5ca1"),e=a("990b"),l=a("6821"),r=a("11e9"),i=a("f1ae");n(n.S,"Object",{getOwnPropertyDescriptors:function(t){for(var s,a,n=l(t),o=r.f,c=e(n),v={},_=0;c.length>_;)void 0!==(a=o(n,s=c[_++]))&&i(v,s,a);return v}})},9093:function(t,s,a){var n=a("ce10"),e=a("e11e").concat("length","prototype");s.f=Object.getOwnPropertyNames||function(t){return n(t,e)}},"93c4":function(t,s,a){"use strict";var n=a("2a4e")(!0);a("e4a9")(String,"String",(function(t){this._t=String(t),this._i=0}),(function(){var t,s=this._t,a=this._i;return a>=s.length?{value:void 0,done:!0}:(t=n(s,a),this._i+=t.length,{value:t,done:!1})}))},"990b":function(t,s,a){var n=a("9093"),e=a("2621"),l=a("cb7c"),r=a("7726").Reflect;t.exports=r&&r.ownKeys||function(t){var s=n.f(l(t)),a=e.f;return a?s.concat(a(t)):s}},"9b43":function(t,s,a){var n=a("d8e8");t.exports=function(t,s,a){if(n(t),void 0===s)return t;switch(a){case 1:return function(a){return t.call(s,a)};case 2:return function(a,n){return t.call(s,a,n)};case 3:return function(a,n,e){return t.call(s,a,n,e)}}return function(){return t.apply(s,arguments)}}},"9c6c":function(t,s,a){var n=a("2b4c")("unscopables"),e=Array.prototype;null==e[n]&&a("32e9")(e,n,{}),t.exports=function(t){e[n][t]=!0}},"9def":function(t,s,a){var n=a("4588"),e=Math.min;t.exports=function(t){return t>0?e(n(t),9007199254740991):0}},"9e1e":function(t,s,a){t.exports=!a("79e5")((function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}))},a47f:function(t,s,a){t.exports=!a("7d95")&&!a("d782")((function(){return 7!=Object.defineProperty(a("12fd")("div"),"a",{get:function(){return 7}}).a}))},a5ab:function(t,s,a){var n=a("a812"),e=Math.min;t.exports=function(t){return t>0?e(n(t),9007199254740991):0}},a745:function(t,s,a){t.exports=a("d604")},a7d3:function(t,s){var a=t.exports={version:"2.6.9"};"number"==typeof __e&&(__e=a)},a812:function(t,s){var a=Math.ceil,n=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?n:a)(t)}},aa77:function(t,s,a){var n=a("5ca1"),e=a("be13"),l=a("79e5"),r=a("fdef"),i="["+r+"]",o=RegExp("^"+i+i+"*"),c=RegExp(i+i+"*$"),v=function(t,s,a){var e={},i=l((function(){return!!r[t]()||"
"!="
"[t]()})),o=e[t]=i?s(_):r[t];a&&(e[a]=o),n(n.P+n.F*i,"String",e)},_=v.trim=function(t,s){return t=String(e(t)),1&s&&(t=t.replace(o,"")),2&s&&(t=t.replace(c,"")),t};t.exports=v},aae3:function(t,s,a){var n=a("d3f4"),e=a("2d95"),l=a("2b4c")("match");t.exports=function(t){var s;return n(t)&&(void 0!==(s=t[l])?!!s:"RegExp"==e(t))}},ac6a:function(t,s,a){for(var n=a("cadf"),e=a("0d58"),l=a("2aba"),r=a("7726"),i=a("32e9"),o=a("84f2"),c=a("2b4c"),v=c("iterator"),_=c("toStringTag"),d=o.Array,p={CSSRuleList:!0,CSSStyleDeclaration:!1,CSSValueList:!1,ClientRectList:!1,DOMRectList:!1,DOMStringList:!1,DOMTokenList:!0,DataTransferItemList:!1,FileList:!1,HTMLAllCollection:!1,HTMLCollection:!1,HTMLFormElement:!1,HTMLSelectElement:!1,MediaList:!0,MimeTypeArray:!1,NamedNodeMap:!1,NodeList:!0,PaintRequestList:!1,Plugin:!1,PluginArray:!1,SVGLengthList:!1,SVGNumberList:!1,SVGPathSegList:!1,SVGPointList:!1,SVGStringList:!1,SVGTransformList:!1,SourceBufferList:!1,StyleSheetList:!0,TextTrackCueList:!1,TextTrackList:!1,TouchList:!1},h=e(p),u=0;u<h.length;u++){var m,C=h[u],j=p[C],g=r[C],f=g&&g.prototype;if(f&&(f[v]||i(f,v,d),f[_]||i(f,_,C),o[C]=d,j))for(m in n)f[m]||l(f,m,n[m],!0)}},b22a:function(t,s){t.exports={}},b39a:function(t,s,a){var n=a("d3f4");t.exports=function(t,s){if(!n(t)||t._t!==s)throw TypeError("Incompatible receiver, "+s+" required!");return t}},b3e7:function(t,s){t.exports=function(){}},b42c:function(t,s,a){a("fa54");for(var n=a("da3c"),e=a("8ce0"),l=a("b22a"),r=a("1b55")("toStringTag"),i="CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,TextTrackList,TouchList".split(","),o=0;o<i.length;o++){var c=i[o],v=n[c],_=v&&v.prototype;_&&!_[r]&&e(_,r,c),l[c]=l.Array}},b457:function(t,s){t.exports=!0},b5aa:function(t,s,a){var n=a("6e1f");t.exports=Array.isArray||function(t){return"Array"==n(t)}},b635:function(t,s,a){"use strict";(function(t){a.d(s,"b",(function(){return e})),a("6f42");var n=a("3425");function e(t){e.installed||(e.installed=!0,t.component("VueDraggableResizable",n.a))}var l={install:e},r=null;"undefined"!=typeof window?r=window.Vue:void 0!==t&&(r=t.Vue),r&&r.use(l),s.a=n.a}).call(this,a("c8ba"))},b77f:function(t,s,a){var n=a("0f89"),e=a("f159");t.exports=a("a7d3").getIterator=function(t){var s=e(t);if("function"!=typeof s)throw TypeError(t+" is not iterable!");return n(s.call(t))}},bc25:function(t,s,a){var n=a("f2fe");t.exports=function(t,s,a){if(n(t),void 0===s)return t;switch(a){case 1:return function(a){return t.call(s,a)};case 2:return function(a,n){return t.call(s,a,n)};case 3:return function(a,n,e){return t.call(s,a,n,e)}}return function(){return t.apply(s,arguments)}}},be13:function(t,s){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},c0d8:function(t,s,a){var n=a("3adc").f,e=a("43c8"),l=a("1b55")("toStringTag");t.exports=function(t,s,a){t&&!e(t=a?t:t.prototype,l)&&n(t,l,{configurable:!0,value:s})}},c26b:function(t,s,a){"use strict";var n=a("86cc").f,e=a("2aeb"),l=a("dcbc"),r=a("9b43"),i=a("f605"),o=a("4a59"),c=a("01f9"),v=a("d53b"),_=a("7a56"),d=a("9e1e"),p=a("67ab").fastKey,h=a("b39a"),u=d?"_s":"size",m=function(t,s){var a,n=p(s);if("F"!==n)return t._i[n];for(a=t._f;a;a=a.n)if(a.k==s)return a};t.exports={getConstructor:function(t,s,a,c){var v=t((function(t,n){i(t,v,s,"_i"),t._t=s,t._i=e(null),t._f=void 0,t._l=void 0,t[u]=0,null!=n&&o(n,a,t[c],t)}));return l(v.prototype,{clear:function(){for(var t=h(this,s),a=t._i,n=t._f;n;n=n.n)n.r=!0,n.p&&(n.p=n.p.n=void 0),delete a[n.i];t._f=t._l=void 0,t[u]=0},delete:function(t){var a=h(this,s),n=m(a,t);if(n){var e=n.n,l=n.p;delete a._i[n.i],n.r=!0,l&&(l.n=e),e&&(e.p=l),a._f==n&&(a._f=e),a._l==n&&(a._l=l),a[u]--}return!!n},forEach:function(t){h(this,s);for(var a,n=r(t,arguments.length>1?arguments[1]:void 0,3);a=a?a.n:this._f;)for(n(a.v,a.k,this);a&&a.r;)a=a.p},has:function(t){return!!m(h(this,s),t)}}),d&&n(v.prototype,"size",{get:function(){return h(this,s)[u]}}),v},def:function(t,s,a){var n,e,l=m(t,s);return l?l.v=a:(t._l=l={i:e=p(s,!0),k:s,v:a,p:n=t._l,n:void 0,r:!1},t._f||(t._f=l),n&&(n.n=l),t[u]++,"F"!==e&&(t._i[e]=l)),t},getEntry:m,setStrong:function(t,s,a){c(t,s,(function(t,a){this._t=h(t,s),this._k=a,this._l=void 0}),(function(){for(var t=this,s=t._k,a=t._l;a&&a.r;)a=a.p;return t._t&&(t._l=a=a?a.n:t._t._f)?v(0,"keys"==s?a.k:"values"==s?a.v:[a.k,a.v]):(t._t=void 0,v(1))}),a?"entries":"values",!a,!0),_(s)}}},c366:function(t,s,a){var n=a("6821"),e=a("9def"),l=a("77f1");t.exports=function(t){return function(s,a,r){var i,o=n(s),c=e(o.length),v=l(r,c);if(t&&a!=a){for(;c>v;)if((i=o[v++])!=i)return!0}else for(;c>v;v++)if((t||v in o)&&o[v]===a)return t||v||0;return!t&&-1}}},c5f6:function(t,s,a){"use strict";var n=a("7726"),e=a("69a8"),l=a("2d95"),r=a("5dbc"),i=a("6a99"),o=a("79e5"),c=a("9093").f,v=a("11e9").f,_=a("86cc").f,d=a("aa77").trim,p="Number",h=n[p],u=h,m=h.prototype,C=l(a("2aeb")(m))==p,j="trim"in String.prototype,g=function(t){var s=i(t,!1);if("string"==typeof s&&s.length>2){var a,n,e,l=(s=j?s.trim():d(s,3)).charCodeAt(0);if(43===l||45===l){if(88===(a=s.charCodeAt(2))||120===a)return NaN}else if(48===l){switch(s.charCodeAt(1)){case 66:case 98:n=2,e=49;break;case 79:case 111:n=8,e=55;break;default:return+s}for(var r,o=s.slice(2),c=0,v=o.length;c<v;c++)if((r=o.charCodeAt(c))<48||r>e)return NaN;return parseInt(o,n)}}return+s};if(!h(" 0o1")||!h("0b1")||h("+0x1")){h=function(t){var s=arguments.length<1?0:t,a=this;return a instanceof h&&(C?o((function(){m.valueOf.call(a)})):l(a)!=p)?r(new u(g(s)),a,h):g(s)};for(var f,y=a("9e1e")?c(u):"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,EPSILON,isFinite,isInteger,isNaN,isSafeInteger,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,parseFloat,parseInt,isInteger".split(","),k=0;y.length>k;k++)e(u,f=y[k])&&!e(h,f)&&_(h,f,v(u,f));h.prototype=m,m.constructor=h,a("2aba")(n,p,h)}},c69a:function(t,s,a){t.exports=!a("9e1e")&&!a("79e5")((function(){return 7!=Object.defineProperty(a("230e")("div"),"a",{get:function(){return 7}}).a}))},c8ba:function(t,s){var a;a=function(){return this}();try{a=a||new Function("return this")()}catch(t){"object"==typeof window&&(a=window)}t.exports=a},c8bb:function(t,s,a){t.exports=a("89ca")},ca5a:function(t,s){var a=0,n=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++a+n).toString(36))}},cadf:function(t,s,a){"use strict";var n=a("9c6c"),e=a("d53b"),l=a("84f2"),r=a("6821");t.exports=a("01f9")(Array,"Array",(function(t,s){this._t=r(t),this._i=0,this._k=s}),(function(){var t=this._t,s=this._k,a=this._i++;return!t||a>=t.length?(this._t=void 0,e(1)):e(0,"keys"==s?a:"values"==s?t[a]:[a,t[a]])}),"values"),l.Arguments=l.Array,n("keys"),n("values"),n("entries")},cb7c:function(t,s,a){var n=a("d3f4");t.exports=function(t){if(!n(t))throw TypeError(t+" is not an object!");return t}},cd1c:function(t,s,a){var n=a("e853");t.exports=function(t,s){return new(n(t))(s)}},ce10:function(t,s,a){var n=a("69a8"),e=a("6821"),l=a("c366")(!1),r=a("613b")("IE_PROTO");t.exports=function(t,s){var a,i=e(t),o=0,c=[];for(a in i)a!=r&&n(i,a)&&c.push(a);for(;s.length>o;)n(i,a=s[o++])&&(~l(c,a)||c.push(a));return c}},d13f:function(t,s,a){var n=a("da3c"),e=a("a7d3"),l=a("bc25"),r=a("8ce0"),i=a("43c8"),o="prototype",c=function(t,s,a){var v,_,d,p=t&c.F,h=t&c.G,u=t&c.S,m=t&c.P,C=t&c.B,j=t&c.W,g=h?e:e[s]||(e[s]={}),f=g[o],y=h?n:u?n[s]:(n[s]||{})[o];for(v in h&&(a=s),a)(_=!p&&y&&void 0!==y[v])&&i(g,v)||(d=_?y[v]:a[v],g[v]=h&&"function"!=typeof y[v]?a[v]:C&&_?l(d,n):j&&y[v]==d?function(t){var s=function(s,a,n){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(s);case 2:return new t(s,a)}return new t(s,a,n)}return t.apply(this,arguments)};return s[o]=t[o],s}(d):m&&"function"==typeof d?l(Function.call,d):d,m&&((g.virtual||(g.virtual={}))[v]=d,t&c.R&&f&&!f[v]&&r(f,v,d)))};c.F=1,c.G=2,c.S=4,c.P=8,c.B=16,c.W=32,c.U=64,c.R=128,t.exports=c},d25f:function(t,s,a){"use strict";var n=a("5ca1"),e=a("0a49")(2);n(n.P+n.F*!a("2f21")([].filter,!0),"Array",{filter:function(t){return e(this,t,arguments[1])}})},d2c8:function(t,s,a){var n=a("aae3"),e=a("be13");t.exports=function(t,s,a){if(n(s))throw TypeError("String#"+a+" doesn't accept regex!");return String(e(t))}},d38f:function(t,s,a){var n=a("7d8a"),e=a("1b55")("iterator"),l=a("b22a");t.exports=a("a7d3").isIterable=function(t){var s=Object(t);return void 0!==s[e]||"@@iterator"in s||l.hasOwnProperty(n(s))}},d3f4:function(t,s){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},d53b:function(t,s){t.exports=function(t,s){return{value:s,done:!!t}}},d604:function(t,s,a){a("1938"),t.exports=a("a7d3").Array.isArray},d782:function(t,s){t.exports=function(t){try{return!!t()}catch(t){return!0}}},d8e8:function(t,s){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},da3c:function(t,s){var a=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=a)},dcbc:function(t,s,a){var n=a("2aba");t.exports=function(t,s,a){for(var e in s)n(t,e,s[e],a);return t}},e0b8:function(t,s,a){"use strict";var n=a("7726"),e=a("5ca1"),l=a("2aba"),r=a("dcbc"),i=a("67ab"),o=a("4a59"),c=a("f605"),v=a("d3f4"),_=a("79e5"),d=a("5cc5"),p=a("7f20"),h=a("5dbc");t.exports=function(t,s,a,u,m,C){var j=n[t],g=j,f=m?"set":"add",y=g&&g.prototype,k={},b=function(t){var s=y[t];l(y,t,"delete"==t?function(t){return!(C&&!v(t))&&s.call(this,0===t?0:t)}:"has"==t?function(t){return!(C&&!v(t))&&s.call(this,0===t?0:t)}:"get"==t?function(t){return C&&!v(t)?void 0:s.call(this,0===t?0:t)}:"add"==t?function(t){return s.call(this,0===t?0:t),this}:function(t,a){return s.call(this,0===t?0:t,a),this})};if("function"==typeof g&&(C||y.forEach&&!_((function(){(new g).entries().next()})))){var w=new g,x=w[f](C?{}:-0,1)!=w,S=_((function(){w.has(1)})),I=d((function(t){new g(t)})),R=!C&&_((function(){for(var t=new g,s=5;s--;)t[f](s,s);return!t.has(-0)}));I||((g=s((function(s,a){c(s,g,t);var n=h(new j,s,g);return null!=a&&o(a,m,n[f],n),n}))).prototype=y,y.constructor=g),(S||R)&&(b("delete"),b("has"),m&&b("get")),(R||x)&&b(f),C&&y.clear&&delete y.clear}else g=u.getConstructor(s,t,m,f),r(g.prototype,a),i.NEED=!0;return p(g,t),k[t]=g,e(e.G+e.W+e.F*(g!=j),k),C||u.setStrong(g,t,m),g}},e11e:function(t,s){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},e341:function(t,s,a){var n=a("d13f");n(n.S+n.F*!a("7d95"),"Object",{defineProperty:a("3adc").f})},e4a9:function(t,s,a){"use strict";var n=a("b457"),e=a("d13f"),l=a("2312"),r=a("8ce0"),i=a("b22a"),o=a("5ce7"),c=a("c0d8"),v=a("ff0c"),_=a("1b55")("iterator"),d=!([].keys&&"next"in[].keys()),p="keys",h="values",u=function(){return this};t.exports=function(t,s,a,m,C,j,g){o(a,s,m);var f,y,k,b=function(t){if(!d&&t in I)return I[t];switch(t){case p:case h:return function(){return new a(this,t)}}return function(){return new a(this,t)}},w=s+" Iterator",x=C==h,S=!1,I=t.prototype,R=I[_]||I["@@iterator"]||C&&I[C],N=R||b(C),L=C?x?b("entries"):N:void 0,P="Array"==s&&I.entries||R;if(P&&(k=v(P.call(new t)))!==Object.prototype&&k.next&&(c(k,w,!0),n||"function"==typeof k[_]||r(k,_,u)),x&&R&&R.name!==h&&(S=!0,N=function(){return R.call(this)}),n&&!g||!d&&!S&&I[_]||r(I,_,N),i[s]=N,i[w]=u,C)if(f={values:x?N:b(h),keys:j?N:b(p),entries:L},g)for(y in f)y in I||l(I,y,f[y]);else e(e.P+e.F*(d||S),s,f);return f}},e5fa:function(t,s){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},e853:function(t,s,a){var n=a("d3f4"),e=a("1169"),l=a("2b4c")("species");t.exports=function(t){var s;return e(t)&&("function"!=typeof(s=t.constructor)||s!==Array&&!e(s.prototype)||(s=void 0),n(s)&&null===(s=s[l])&&(s=void 0)),void 0===s?Array:s}},ec5b:function(t,s,a){a("e341");var n=a("a7d3").Object;t.exports=function(t,s,a){return n.defineProperty(t,s,a)}},f159:function(t,s,a){var n=a("7d8a"),e=a("1b55")("iterator"),l=a("b22a");t.exports=a("a7d3").getIteratorMethod=function(t){if(null!=t)return t[e]||t["@@iterator"]||l[n(t)]}},f1ae:function(t,s,a){"use strict";var n=a("86cc"),e=a("4630");t.exports=function(t,s,a){s in t?n.f(t,s,e(0,a)):t[s]=a}},f2fe:function(t,s){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},f3e2:function(t,s,a){"use strict";var n=a("5ca1"),e=a("0a49")(0),l=a("2f21")([].forEach,!0);n(n.P+n.F*!l,"Array",{forEach:function(t){return e(this,t,arguments[1])}})},f568:function(t,s,a){var n=a("3adc"),e=a("0f89"),l=a("7633");t.exports=a("7d95")?Object.defineProperties:function(t,s){e(t);for(var a,r=l(s),i=r.length,o=0;i>o;)n.f(t,a=r[o++],s[a]);return t}},f605:function(t,s){t.exports=function(t,s,a,n){if(!(t instanceof s)||void 0!==n&&n in t)throw TypeError(a+": incorrect invocation!");return t}},f6fd:function(t,s){!function(t){var s="currentScript",a=t.getElementsByTagName("script");s in t||Object.defineProperty(t,s,{get:function(){try{throw new Error}catch(n){var t,s=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(n.stack)||[!1])[1];for(t in a)if(a[t].src==s||"interactive"==a[t].readyState)return a[t];return null}}})}(document)},f845:function(t,s){t.exports=function(t,s){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:s}}},fa54:function(t,s,a){"use strict";var n=a("b3e7"),e=a("245b"),l=a("b22a"),r=a("6a9b");t.exports=a("e4a9")(Array,"Array",(function(t,s){this._t=r(t),this._i=0,this._k=s}),(function(){var t=this._t,s=this._k,a=this._i++;return!t||a>=t.length?(this._t=void 0,e(1)):e(0,"keys"==s?a:"values"==s?t[a]:[a,t[a]])}),"values"),l.Arguments=l.Array,n("keys"),n("values"),n("entries")},fab2:function(t,s,a){var n=a("7726").document;t.exports=n&&n.documentElement},fb15:function(t,s,a){"use strict";var n;a.r(s),"undefined"!=typeof window&&(a("f6fd"),(n=window.document.currentScript)&&(n=n.src.match(/(.+\/)[^\/]+\.js(\?.*)?$/))&&(a.p=n[1]));var e=a("b635");a.d(s,"install",(function(){return e.b})),s.default=e.a},fdef:function(t,s){t.exports="\t\n\v\f\r \u2028\u2029\ufeff"},ff0c:function(t,s,a){var n=a("43c8"),e=a("0185"),l=a("5d8f")("IE_PROTO"),r=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=e(t),n(t,l)?t[l]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?r:null}}}).default},1350:function(t,s,a){"use strict";var n=a(1253);a.n(n).a},1351:function(t,s){},1352:function(t,s){},1419:function(t,s,a){"use strict";a.r(s);var n=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-table :columns="columns" :rowKey="record => record.login.uuid" :dataSource="data" :pagination="pagination" :loading="loading" @change="handleTableChange">\n <template slot="name" slot-scope="name">\n {{name.first}} {{name.last}}\n </template>\n </a-table>\n',script:"\n import reqwest from 'reqwest';\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n sorter: true,\n width: '20%',\n scopedSlots: { customRender: 'name' },\n },\n {\n title: 'Gender',\n dataIndex: 'gender',\n filters: [{ text: 'Male', value: 'male' }, { text: 'Female', value: 'female' }],\n width: '20%',\n },\n {\n title: 'Email',\n dataIndex: 'email',\n },\n ];\n\n export default {\n mounted() {\n this.fetch();\n },\n data() {\n return {\n data: [],\n pagination: {},\n loading: false,\n columns,\n };\n },\n methods: {\n handleTableChange(pagination, filters, sorter) {\n console.log(pagination);\n const pager = { ...this.pagination };\n pager.current = pagination.current;\n this.pagination = pager;\n this.fetch({\n results: pagination.pageSize,\n page: pagination.current,\n sortField: sorter.field,\n sortOrder: sorter.order,\n ...filters,\n });\n },\n fetch(params = {}) {\n console.log('params:', params);\n this.loading = true;\n reqwest({\n url: 'https://randomuser.me/api',\n method: 'get',\n data: {\n results: 10,\n ...params,\n },\n type: 'json',\n }).then(data => {\n const pagination = { ...this.pagination };\n // Read total count from server\n // pagination.total = data.totalCount;\n pagination.total = 200;\n this.loading = false;\n this.data = data.results;\n this.pagination = pagination;\n });\n },\n },\n };\n",style:null,us:"\n#### Ajax\nThis example shows how to fetch and present data from a remote server, and how to implement filtering and sorting in server side by sending related parameters to server.\n**Note, this example use [Mock API](https://randomuser.me) that you can look up in Network Console.**\n",cn:"\n#### 远程加载数据\n这个例子通过简单的 ajax 读取方式，演示了如何从服务端读取并展现数据，具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。\n另外，本例也展示了筛选排序功能如何交给服务端实现，列不需要指定具体的 `onFilter` 和 `sorter` 函数，而是在把筛选和排序的参数发到服务端来处理。\n**注意，此示例使用 [模拟接口](https://randomuser.me)，展示数据可能不准确，请打开网络面板查看请求。**\n",sourceCode:"<template>\n <a-table\n :columns=\"columns\"\n :rowKey=\"record => record.login.uuid\"\n :dataSource=\"data\"\n :pagination=\"pagination\"\n :loading=\"loading\"\n @change=\"handleTableChange\"\n >\n <template slot=\"name\" slot-scope=\"name\">\n {{name.first}} {{name.last}}\n </template>\n </a-table>\n</template>\n<script>\n import reqwest from 'reqwest';\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n sorter: true,\n width: '20%',\n scopedSlots: { customRender: 'name' },\n },\n {\n title: 'Gender',\n dataIndex: 'gender',\n filters: [{ text: 'Male', value: 'male' }, { text: 'Female', value: 'female' }],\n width: '20%',\n },\n {\n title: 'Email',\n dataIndex: 'email',\n },\n ];\n\n export default {\n mounted() {\n this.fetch();\n },\n data() {\n return {\n data: [],\n pagination: {},\n loading: false,\n columns,\n };\n },\n methods: {\n handleTableChange(pagination, filters, sorter) {\n console.log(pagination);\n const pager = { ...this.pagination };\n pager.current = pagination.current;\n this.pagination = pager;\n this.fetch({\n results: pagination.pageSize,\n page: pagination.current,\n sortField: sorter.field,\n sortOrder: sorter.order,\n ...filters,\n });\n },\n fetch(params = {}) {\n console.log('params:', params);\n this.loading = true;\n reqwest({\n url: 'https://randomuser.me/api',\n method: 'get',\n data: {\n results: 10,\n ...params,\n },\n type: 'json',\n }).then(data => {\n const pagination = { ...this.pagination };\n // Read total count from server\n // pagination.total = data.totalCount;\n pagination.total = 200;\n this.loading = false;\n this.data = data.results;\n this.pagination = pagination;\n });\n },\n },\n };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("a-table",{attrs:{columns:t.columns,rowKey:function(t){return t.login.uuid},dataSource:t.data,pagination:t.pagination,loading:t.loading},on:{change:t.handleTableChange},scopedSlots:t._u([{key:"name",fn:function(s){return[t._v("\n "+t._s(s.first)+" "+t._s(s.last)+"\n ")]}}])})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"远程加载数据"}},[t._v("远程加载数据 "),a("a",{staticClass:"anchor",attrs:{href:"#远程加载数据"}},[t._v("#")])]),t._v(" "),a("p",[t._v("这个例子通过简单的 ajax 读取方式，演示了如何从服务端读取并展现数据，具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。"),a("br"),t._v("\n另外，本例也展示了筛选排序功能如何交给服务端实现，列不需要指定具体的 "),a("code",[t._v("onFilter")]),t._v(" 和 "),a("code",[t._v("sorter")]),t._v(" 函数，而是在把筛选和排序的参数发到服务端来处理。"),a("br"),t._v(" "),a("strong",[t._v("注意，此示例使用 "),a("a",{attrs:{href:"https://randomuser.me"}},[t._v("模拟接口")]),t._v("，展示数据可能不准确，请打开网络面板查看请求。")]),a("br"),a("br")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Ajax"}},[t._v("Ajax "),a("a",{staticClass:"anchor",attrs:{href:"#Ajax"}},[t._v("#")])]),t._v(" "),a("p",[t._v("This example shows how to fetch and present data from a remote server, and how to implement filtering and sorting in server side by sending related parameters to server."),a("br"),t._v(" "),a("strong",[t._v("Note, this example use "),a("a",{attrs:{href:"https://randomuser.me"}},[t._v("Mock API")]),t._v(" that you can look up in Network Console.")]),a("br")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":rowKey")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"record => record.login.uuid"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":pagination")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"pagination"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":loading")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"loading"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"handleTableChange"')]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"name"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"name"')]),t._v(">")]),t._v("\n "),a("span",[t._v("{{")]),t._v("name.first"),a("span",[t._v("}}")]),t._v(" "),a("span",[t._v("{{")]),t._v("name.last"),a("span",[t._v("}}")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" reqwest "),a("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),a("span",{staticClass:"hljs-string"},[t._v("'reqwest'")]),t._v(";\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("sorter")]),t._v(": "),a("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'20%'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(" },\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Gender'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'gender'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("filters")]),t._v(": [{ "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Male'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'male'")]),t._v(" }, { "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Female'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'female'")]),t._v(" }],\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'20%'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Email'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'email'")]),t._v(",\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n mounted() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".fetch();\n },\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),a("span",{staticClass:"hljs-attr"},[t._v("data")]),t._v(": [],\n "),a("span",{staticClass:"hljs-attr"},[t._v("pagination")]),t._v(": {},\n "),a("span",{staticClass:"hljs-attr"},[t._v("loading")]),t._v(": "),a("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(",\n columns,\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n handleTableChange(pagination, filters, sorter) {\n "),a("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log(pagination);\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" pager = { ...this.pagination };\n pager.current = pagination.current;\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".pagination = pager;\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".fetch({\n "),a("span",{staticClass:"hljs-attr"},[t._v("results")]),t._v(": pagination.pageSize,\n "),a("span",{staticClass:"hljs-attr"},[t._v("page")]),t._v(": pagination.current,\n "),a("span",{staticClass:"hljs-attr"},[t._v("sortField")]),t._v(": sorter.field,\n "),a("span",{staticClass:"hljs-attr"},[t._v("sortOrder")]),t._v(": sorter.order,\n ...filters,\n });\n },\n fetch(params = {}) {\n "),a("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),a("span",{staticClass:"hljs-string"},[t._v("'params:'")]),t._v(", params);\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".loading = "),a("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(";\n reqwest({\n "),a("span",{staticClass:"hljs-attr"},[t._v("url")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'https://randomuser.me/api'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("method")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'get'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("data")]),t._v(": {\n "),a("span",{staticClass:"hljs-attr"},[t._v("results")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("10")]),t._v(",\n ...params,\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'json'")]),t._v(",\n }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("data")]),t._v(" =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" pagination = { ...this.pagination };\n "),a("span",{staticClass:"hljs-comment"},[t._v("// Read total count from server")]),t._v("\n "),a("span",{staticClass:"hljs-comment"},[t._v("// pagination.total = data.totalCount;")]),t._v("\n pagination.total = "),a("span",{staticClass:"hljs-number"},[t._v("200")]),t._v(";\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".loading = "),a("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".data = data.results;\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".pagination = pagination;\n });\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};n._withStripped=!0;var e=a(2),l=a.n(e),r=a(1195),i=a.n(r),o=[{title:"Name",dataIndex:"name",sorter:!0,width:"20%",scopedSlots:{customRender:"name"}},{title:"Gender",dataIndex:"gender",filters:[{text:"Male",value:"male"},{text:"Female",value:"female"}],width:"20%"},{title:"Email",dataIndex:"email"}],c={mounted:function(){this.fetch()},data:function(){return{data:[],pagination:{},loading:!1,columns:o}},methods:{handleTableChange:function(t,s,a){console.log(t);var n=l()({},this.pagination);n.current=t.current,this.pagination=n,this.fetch(l()({results:t.pageSize,page:t.current,sortField:a.field,sortOrder:a.order},s))},fetch:function(){var t=this,s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};console.log("params:",s),this.loading=!0,i()({url:"https://randomuser.me/api",method:"get",data:l()({results:10},s),type:"json"}).then((function(s){var a=l()({},t.pagination);a.total=200,t.loading=!1,t.data=s.results,t.pagination=a}))}}},v=a(31),_=Object(v.a)(c,n,[],!1,null,null,null);_.options.__file="components/table/demo/ajax.md";var d=_.exports,p=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-table :columns="columns" :dataSource="data">\n <a slot="name" slot-scope="text" href="javascript:;">{{text}}</a>\n <span slot="customTitle"><a-icon type="smile-o"/> Name</span>\n <span slot="tags" slot-scope="tags">\n <a-tag v-for="tag in tags" :color="tag===\'loser\' ? \'volcano\' : (tag.length > 5 ? \'geekblue\' : \'green\')" :key="tag">\n {{tag.toUpperCase()}}\n </a-tag>\n </span>\n <span slot="action" slot-scope="text, record">\n <a href="javascript:;">Invite 一 {{record.name}}</a>\n <a-divider type="vertical"/>\n <a href="javascript:;">Delete</a>\n <a-divider type="vertical"/>\n <a href="javascript:;" class="ant-dropdown-link"> More actions <a-icon type="down"/> </a>\n </span>\n </a-table>\n',script:"\n const columns = [\n {\n dataIndex: 'name',\n key: 'name',\n slots: { title: 'customTitle' },\n scopedSlots: { customRender: 'name' },\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address',\n },\n {\n title: 'Tags',\n key: 'tags',\n dataIndex: 'tags',\n scopedSlots: { customRender: 'tags' },\n },\n {\n title: 'Action',\n key: 'action',\n scopedSlots: { customRender: 'action' },\n },\n ];\n\n const data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n tags: ['nice', 'developer'],\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n tags: ['loser'],\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n tags: ['cool', 'teacher'],\n },\n ];\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n };\n",style:null,us:"\n#### basic Usage\nSimple table with actions.\n",cn:"\n#### 基本用法\n简单的表格，最后一列是各种操作。\n",sourceCode:"<template>\n <a-table :columns=\"columns\" :dataSource=\"data\">\n <a slot=\"name\" slot-scope=\"text\" href=\"javascript:;\">{{text}}</a>\n <span slot=\"customTitle\"><a-icon type=\"smile-o\" /> Name</span>\n <span slot=\"tags\" slot-scope=\"tags\">\n <a-tag\n v-for=\"tag in tags\"\n :color=\"tag==='loser' ? 'volcano' : (tag.length > 5 ? 'geekblue' : 'green')\"\n :key=\"tag\"\n >\n {{tag.toUpperCase()}}\n </a-tag>\n </span>\n <span slot=\"action\" slot-scope=\"text, record\">\n <a href=\"javascript:;\">Invite 一 {{record.name}}</a>\n <a-divider type=\"vertical\" />\n <a href=\"javascript:;\">Delete</a>\n <a-divider type=\"vertical\" />\n <a href=\"javascript:;\" class=\"ant-dropdown-link\"> More actions <a-icon type=\"down\" /> </a>\n </span>\n </a-table>\n</template>\n<script>\n const columns = [\n {\n dataIndex: 'name',\n key: 'name',\n slots: { title: 'customTitle' },\n scopedSlots: { customRender: 'name' },\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address',\n },\n {\n title: 'Tags',\n key: 'tags',\n dataIndex: 'tags',\n scopedSlots: { customRender: 'tags' },\n },\n {\n title: 'Action',\n key: 'action',\n scopedSlots: { customRender: 'action' },\n },\n ];\n\n const data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n tags: ['nice', 'developer'],\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n tags: ['loser'],\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n tags: ['cool', 'teacher'],\n },\n ];\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("a-table",{attrs:{columns:t.columns,dataSource:t.data},scopedSlots:t._u([{key:"name",fn:function(s){return a("a",{attrs:{href:"javascript:;"}},[t._v(t._s(s))])}},{key:"tags",fn:function(s){return a("span",{},t._l(s,(function(s){return a("a-tag",{key:s,attrs:{color:"loser"===s?"volcano":s.length>5?"geekblue":"green"}},[t._v("\n "+t._s(s.toUpperCase())+"\n ")])})),1)}},{key:"action",fn:function(s,n){return a("span",{},[a("a",{attrs:{href:"javascript:;"}},[t._v("Invite 一 "+t._s(n.name))]),t._v(" "),a("a-divider",{attrs:{type:"vertical"}}),t._v(" "),a("a",{attrs:{href:"javascript:;"}},[t._v("Delete")]),t._v(" "),a("a-divider",{attrs:{type:"vertical"}}),t._v(" "),a("a",{staticClass:"ant-dropdown-link",attrs:{href:"javascript:;"}},[t._v(" More actions "),a("a-icon",{attrs:{type:"down"}})],1)],1)}}])},[t._v(" "),a("span",{attrs:{slot:"customTitle"},slot:"customTitle"},[a("a-icon",{attrs:{type:"smile-o"}}),t._v(" Name")],1)])],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"基本用法"}},[t._v("基本用法 "),a("a",{staticClass:"anchor",attrs:{href:"#基本用法"}},[t._v("#")])]),t._v(" "),a("p",[t._v("简单的表格，最后一列是各种操作。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"basic-Usage"}},[t._v("basic Usage "),a("a",{staticClass:"anchor",attrs:{href:"#basic-Usage"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Simple table with actions.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"name"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),a("span",[t._v("{{")]),t._v("text"),a("span",[t._v("}}")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"customTitle"')]),t._v(">")]),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"smile-o"')]),t._v(" />")]),t._v(" Name"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"tags"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"tags"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tag")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("v-for")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"tag in tags"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":color")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v("\"tag==='loser' ? 'volcano' : (tag.length > 5 ? 'geekblue' : 'green')\"")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":key")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"tag"')]),t._v("\n >")]),t._v("\n "),a("span",[t._v("{{")]),t._v("tag.toUpperCase()"),a("span",[t._v("}}")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tag")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"action"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text, record"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),t._v("Invite 一 "),a("span",[t._v("{{")]),t._v("record.name"),a("span",[t._v("}}")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-divider")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"vertical"')]),t._v(" />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),t._v("Delete"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-divider")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"vertical"')]),t._v(" />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"ant-dropdown-link"')]),t._v(">")]),t._v(" More actions "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"down"')]),t._v(" />")]),t._v(" "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("slots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'customTitle'")]),t._v(" },\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(" },\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Tags'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'tags'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'tags'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'tags'")]),t._v(" },\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Action'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'action'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'action'")]),t._v(" },\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'1'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'John Brown'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York No. 1 Lake Park'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("tags")]),t._v(": ["),a("span",{staticClass:"hljs-string"},[t._v("'nice'")]),t._v(", "),a("span",{staticClass:"hljs-string"},[t._v("'developer'")]),t._v("],\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'2'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim Green'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("42")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 1 Lake Park'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("tags")]),t._v(": ["),a("span",{staticClass:"hljs-string"},[t._v("'loser'")]),t._v("],\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'3'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Joe Black'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Sidney No. 1 Lake Park'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("tags")]),t._v(": ["),a("span",{staticClass:"hljs-string"},[t._v("'cool'")]),t._v(", "),a("span",{staticClass:"hljs-string"},[t._v("'teacher'")]),t._v("],\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n columns,\n };\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};p._withStripped=!0;var h=[{dataIndex:"name",key:"name",slots:{title:"customTitle"},scopedSlots:{customRender:"name"}},{title:"Age",dataIndex:"age",key:"age"},{title:"Address",dataIndex:"address",key:"address"},{title:"Tags",key:"tags",dataIndex:"tags",scopedSlots:{customRender:"tags"}},{title:"Action",key:"action",scopedSlots:{customRender:"action"}}],u=[{key:"1",name:"John Brown",age:32,address:"New York No. 1 Lake Park",tags:["nice","developer"]},{key:"2",name:"Jim Green",age:42,address:"London No. 1 Lake Park",tags:["loser"]},{key:"3",name:"Joe Black",age:32,address:"Sidney No. 1 Lake Park",tags:["cool","teacher"]}],m={data:function(){return{data:u,columns:h}}},C=Object(v.a)(m,p,[],!1,null,null,null);C.options.__file="components/table/demo/basic.md";var j=C.exports,g=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-table :columns="columns" :dataSource="data" bordered="">\n <template slot="name" slot-scope="text">\n <a href="javascript:;">{{text}}</a>\n </template>\n <template slot="title" slot-scope="currentPageData">\n Header\n </template>\n <template slot="footer" slot-scope="currentPageData">\n Footer\n </template>\n </a-table>\n',script:"\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n scopedSlots: { customRender: 'name' },\n },\n {\n title: 'Cash Assets',\n className: 'column-money',\n dataIndex: 'money',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n ];\n\n const data = [\n {\n key: '1',\n name: 'John Brown',\n money: '￥300,000.00',\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n money: '￥1,256,000.00',\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n money: '￥120,000.00',\n address: 'Sidney No. 1 Lake Park',\n },\n ];\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n };\n",style:"\n th.column-money,\n td.column-money {\n text-align: right !important;\n }\n",us:"\n#### border, title and footer\nAdd border, title and footer for table.\n",cn:"\n#### 带边框\n添加表格边框线，页头和页脚。\n",sourceCode:"<template>\n <a-table :columns=\"columns\" :dataSource=\"data\" bordered>\n <template slot=\"name\" slot-scope=\"text\">\n <a href=\"javascript:;\">{{text}}</a>\n </template>\n <template slot=\"title\" slot-scope=\"currentPageData\">\n Header\n </template>\n <template slot=\"footer\" slot-scope=\"currentPageData\">\n Footer\n </template>\n </a-table>\n</template>\n<script>\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n scopedSlots: { customRender: 'name' },\n },\n {\n title: 'Cash Assets',\n className: 'column-money',\n dataIndex: 'money',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n ];\n\n const data = [\n {\n key: '1',\n name: 'John Brown',\n money: '￥300,000.00',\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n money: '￥1,256,000.00',\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n money: '￥120,000.00',\n address: 'Sidney No. 1 Lake Park',\n },\n ];\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n };\n<\/script>\n<style>\n th.column-money,\n td.column-money {\n text-align: right !important;\n }\n</style>\n"}}},[a("template",{slot:"component"},[a("a-table",{attrs:{columns:t.columns,dataSource:t.data,bordered:""},scopedSlots:t._u([{key:"name",fn:function(s){return[a("a",{attrs:{href:"javascript:;"}},[t._v(t._s(s))])]}},{key:"title",fn:function(s){return[t._v("\n Header\n ")]}},{key:"footer",fn:function(s){return[t._v("\n Footer\n ")]}}])})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"带边框"}},[t._v("带边框 "),a("a",{staticClass:"anchor",attrs:{href:"#带边框"}},[t._v("#")])]),t._v(" "),a("p",[t._v("添加表格边框线，页头和页脚。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"border,-title-and-footer"}},[t._v("border, title and footer "),a("a",{staticClass:"anchor",attrs:{href:"#border,-title-and-footer"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Add border, title and footer for table.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("bordered")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"name"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),a("span",[t._v("{{")]),t._v("text"),a("span",[t._v("}}")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"currentPageData"')]),t._v(">")]),t._v("\n Header\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"footer"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"currentPageData"')]),t._v(">")]),t._v("\n Footer\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(" },\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Cash Assets'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("className")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'column-money'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'money'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'1'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'John Brown'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("money")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'￥300,000.00'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'2'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim Green'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("money")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'￥1,256,000.00'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'3'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Joe Black'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("money")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'￥120,000.00'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Sidney No. 1 Lake Park'")]),t._v(",\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n columns,\n };\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),a("span",{staticClass:"css"},[t._v("\n "),a("span",{staticClass:"hljs-selector-tag"},[t._v("th")]),a("span",{staticClass:"hljs-selector-class"},[t._v(".column-money")]),t._v(",\n "),a("span",{staticClass:"hljs-selector-tag"},[t._v("td")]),a("span",{staticClass:"hljs-selector-class"},[t._v(".column-money")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("text-align")]),t._v(": right "),a("span",{staticClass:"hljs-meta"},[t._v("!important")]),t._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};g._withStripped=!0;var f=[{title:"Name",dataIndex:"name",scopedSlots:{customRender:"name"}},{title:"Cash Assets",className:"column-money",dataIndex:"money"},{title:"Address",dataIndex:"address"}],y=[{key:"1",name:"John Brown",money:"￥300,000.00",address:"New York No. 1 Lake Park"},{key:"2",name:"Jim Green",money:"￥1,256,000.00",address:"London No. 1 Lake Park"},{key:"3",name:"Joe Black",money:"￥120,000.00",address:"Sidney No. 1 Lake Park"}],k={data:function(){return{data:y,columns:f}}},b=(a(1343),Object(v.a)(k,g,[],!1,null,null,null));b.options.__file="components/table/demo/bordered.md";var w=b.exports,x=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-table :columns="columns" :dataSource="data" bordered="">\n <template slot="name" slot-scope="text">\n <a href="javascript:;">{{text}}</a>\n </template>\n </a-table>\n',script:"\n // In the fifth row, other columns are merged into first column\n // by setting it's colSpan to be 0\n const renderContent = (value, row, index) => {\n const obj = {\n children: value,\n attrs: {},\n };\n if (index === 4) {\n obj.attrs.colSpan = 0;\n }\n return obj;\n };\n\n const data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n tel: '0571-22098909',\n phone: 18889898989,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n tel: '0571-22098333',\n phone: 18889898888,\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Sidney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'Jim Red',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'London No. 2 Lake Park',\n },\n {\n key: '5',\n name: 'Jake White',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Dublin No. 2 Lake Park',\n },\n ];\n\n export default {\n data() {\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n customRender: (text, row, index) => {\n if (index < 4) {\n return <a href=\"javascript:;\">{text}</a>;\n }\n return {\n children: <a href=\"javascript:;\">{text}</a>,\n attrs: {\n colSpan: 5,\n },\n };\n },\n },\n {\n title: 'Age',\n dataIndex: 'age',\n customRender: renderContent,\n },\n {\n title: 'Home phone',\n colSpan: 2,\n dataIndex: 'tel',\n customRender: (value, row, index) => {\n const obj = {\n children: value,\n attrs: {},\n };\n if (index === 2) {\n obj.attrs.rowSpan = 2;\n }\n // These two are merged into above cell\n if (index === 3) {\n obj.attrs.rowSpan = 0;\n }\n if (index === 4) {\n obj.attrs.colSpan = 0;\n }\n return obj;\n },\n },\n {\n title: 'Phone',\n colSpan: 0,\n dataIndex: 'phone',\n customRender: renderContent,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n customRender: renderContent,\n },\n ];\n return {\n data,\n columns,\n };\n },\n };\n",style:null,us:"\n#### colSpan and rowSpan\nTable column title supports `colSpan` that set in `column`.\nTable cell supports `colSpan` and `rowSpan` that set in render return object. When each of them is set to `0`, the cell will not be rendered.\n",cn:"\n#### 表格行/列合并\n表头只支持列合并，使用 column 里的 colSpan 进行设置。\n表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。\n",sourceCode:"<template>\n <a-table :columns=\"columns\" :dataSource=\"data\" bordered>\n <template slot=\"name\" slot-scope=\"text\">\n <a href=\"javascript:;\">{{text}}</a>\n </template>\n </a-table>\n</template>\n<script>\n // In the fifth row, other columns are merged into first column\n // by setting it's colSpan to be 0\n const renderContent = (value, row, index) => {\n const obj = {\n children: value,\n attrs: {},\n };\n if (index === 4) {\n obj.attrs.colSpan = 0;\n }\n return obj;\n };\n\n const data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n tel: '0571-22098909',\n phone: 18889898989,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n tel: '0571-22098333',\n phone: 18889898888,\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Sidney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'Jim Red',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'London No. 2 Lake Park',\n },\n {\n key: '5',\n name: 'Jake White',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Dublin No. 2 Lake Park',\n },\n ];\n\n export default {\n data() {\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n customRender: (text, row, index) => {\n if (index < 4) {\n return <a href=\"javascript:;\">{text}</a>;\n }\n return {\n children: <a href=\"javascript:;\">{text}</a>,\n attrs: {\n colSpan: 5,\n },\n };\n },\n },\n {\n title: 'Age',\n dataIndex: 'age',\n customRender: renderContent,\n },\n {\n title: 'Home phone',\n colSpan: 2,\n dataIndex: 'tel',\n customRender: (value, row, index) => {\n const obj = {\n children: value,\n attrs: {},\n };\n if (index === 2) {\n obj.attrs.rowSpan = 2;\n }\n // These two are merged into above cell\n if (index === 3) {\n obj.attrs.rowSpan = 0;\n }\n if (index === 4) {\n obj.attrs.colSpan = 0;\n }\n return obj;\n },\n },\n {\n title: 'Phone',\n colSpan: 0,\n dataIndex: 'phone',\n customRender: renderContent,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n customRender: renderContent,\n },\n ];\n return {\n data,\n columns,\n };\n },\n };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("a-table",{attrs:{columns:t.columns,dataSource:t.data,bordered:""},scopedSlots:t._u([{key:"name",fn:function(s){return[a("a",{attrs:{href:"javascript:;"}},[t._v(t._s(s))])]}}])})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"表格行/列合并"}},[t._v("表格行/列合并 "),a("a",{staticClass:"anchor",attrs:{href:"#表格行/列合并"}},[t._v("#")])]),t._v(" "),a("p",[t._v("表头只支持列合并，使用 column 里的 colSpan 进行设置。"),a("br"),t._v("\n表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。"),a("br")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"colSpan-and-rowSpan"}},[t._v("colSpan and rowSpan "),a("a",{staticClass:"anchor",attrs:{href:"#colSpan-and-rowSpan"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Table column title supports "),a("code",[t._v("colSpan")]),t._v(" that set in "),a("code",[t._v("column")]),t._v("."),a("br"),t._v("\nTable cell supports "),a("code",[t._v("colSpan")]),t._v(" and "),a("code",[t._v("rowSpan")]),t._v(" that set in render return object. When each of them is set to "),a("code",[t._v("0")]),t._v(", the cell will not be rendered."),a("br")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("bordered")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"name"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),a("span",[t._v("{{")]),t._v("text"),a("span",[t._v("}}")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-comment"},[t._v("// In the fifth row, other columns are merged into first column")]),t._v("\n "),a("span",{staticClass:"hljs-comment"},[t._v("// by setting it's colSpan to be 0")]),t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" renderContent = "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("value, row, index")]),t._v(") =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" obj = {\n "),a("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": value,\n "),a("span",{staticClass:"hljs-attr"},[t._v("attrs")]),t._v(": {},\n };\n "),a("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (index === "),a("span",{staticClass:"hljs-number"},[t._v("4")]),t._v(") {\n obj.attrs.colSpan = "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(";\n }\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" obj;\n };\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'1'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'John Brown'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("tel")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'0571-22098909'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("phone")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("18889898989")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'2'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim Green'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("tel")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'0571-22098333'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("phone")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("18889898888")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("42")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'3'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Joe Black'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("tel")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'0575-22098909'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("phone")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("18900010002")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Sidney No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'4'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim Red'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("18")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("tel")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'0575-22098909'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("phone")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("18900010002")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 2 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'5'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jake White'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("18")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("tel")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'0575-22098909'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("phone")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("18900010002")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Dublin No. 2 Lake Park'")]),t._v(",\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("text, row, index")]),t._v(") =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (index < "),a("span",{staticClass:"hljs-number"},[t._v("4")]),t._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" "),a("span",{staticClass:"xml"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),t._v("{text}"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")])]),t._v(";\n }\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),a("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": "),a("span",{staticClass:"xml"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),t._v("{text}"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")])]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("attrs")]),t._v(": {\n "),a("span",{staticClass:"hljs-attr"},[t._v("colSpan")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("5")]),t._v(",\n },\n };\n },\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": renderContent,\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Home phone'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("colSpan")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("2")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'tel'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("value, row, index")]),t._v(") =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" obj = {\n "),a("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": value,\n "),a("span",{staticClass:"hljs-attr"},[t._v("attrs")]),t._v(": {},\n };\n "),a("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (index === "),a("span",{staticClass:"hljs-number"},[t._v("2")]),t._v(") {\n obj.attrs.rowSpan = "),a("span",{staticClass:"hljs-number"},[t._v("2")]),t._v(";\n }\n "),a("span",{staticClass:"hljs-comment"},[t._v("// These two are merged into above cell")]),t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (index === "),a("span",{staticClass:"hljs-number"},[t._v("3")]),t._v(") {\n obj.attrs.rowSpan = "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(";\n }\n "),a("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (index === "),a("span",{staticClass:"hljs-number"},[t._v("4")]),t._v(") {\n obj.attrs.colSpan = "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(";\n }\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" obj;\n },\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Phone'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("colSpan")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'phone'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": renderContent,\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": renderContent,\n },\n ];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n columns,\n };\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};x._withStripped=!0;var S=function(t,s,a){var n={children:t,attrs:{}};return 4===a&&(n.attrs.colSpan=0),n},I=[{key:"1",name:"John Brown",age:32,tel:"0571-22098909",phone:18889898989,address:"New York No. 1 Lake Park"},{key:"2",name:"Jim Green",tel:"0571-22098333",phone:18889898888,age:42,address:"London No. 1 Lake Park"},{key:"3",name:"Joe Black",age:32,tel:"0575-22098909",phone:18900010002,address:"Sidney No. 1 Lake Park"},{key:"4",name:"Jim Red",age:18,tel:"0575-22098909",phone:18900010002,address:"London No. 2 Lake Park"},{key:"5",name:"Jake White",age:18,tel:"0575-22098909",phone:18900010002,address:"Dublin No. 2 Lake Park"}],R={data:function(){var t=this.$createElement;return{data:I,columns:[{title:"Name",dataIndex:"name",customRender:function(s,a,n){return n<4?t("a",{attrs:{href:"javascript:;"}},[s]):{children:t("a",{attrs:{href:"javascript:;"}},[s]),attrs:{colSpan:5}}}},{title:"Age",dataIndex:"age",customRender:S},{title:"Home phone",colSpan:2,dataIndex:"tel",customRender:function(t,s,a){var n={children:t,attrs:{}};return 2===a&&(n.attrs.rowSpan=2),3===a&&(n.attrs.rowSpan=0),4===a&&(n.attrs.colSpan=0),n}},{title:"Phone",colSpan:0,dataIndex:"phone",customRender:S},{title:"Address",dataIndex:"address",customRender:S}]}}},N=Object(v.a)(R,x,[],!1,null,null,null);N.options.__file="components/table/demo/colspan-rowspan.md";var L=N.exports,P=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-table :dataSource="data" :columns="columns">\n <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" style="padding: 8px">\n <a-input v-ant-ref="c => searchInput = c" :placeholder="`Search ${column.dataIndex}`" :value="selectedKeys[0]" @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])" @pressEnter="() => handleSearch(selectedKeys, confirm)" style="width: 188px; margin-bottom: 8px; display: block;"/>\n <a-button type="primary" @click="() => handleSearch(selectedKeys, confirm)" icon="search" size="small" style="width: 90px; margin-right: 8px">Search</a-button>\n <a-button @click="() => handleReset(clearFilters)" size="small" style="width: 90px">Reset</a-button>\n </div>\n <a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? \'#108ee9\' : undefined }"/>\n <template slot="customRender" slot-scope="text">\n <span v-if="searchText">\n <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, \'i\'))">\n <mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" :key="i" class="highlight">{{fragment}}</mark>\n <template v-else="">{{fragment}}</template>\n </template>\n </span>\n <template v-else="">{{text}}</template>\n </template>\n </a-table>\n',script:"\n const data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Joe Black',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Jim Green',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'Jim Red',\n age: 32,\n address: 'London No. 2 Lake Park',\n },\n ];\n\n export default {\n data() {\n return {\n data,\n searchText: '',\n searchInput: null,\n columns: [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n scopedSlots: {\n filterDropdown: 'filterDropdown',\n filterIcon: 'filterIcon',\n customRender: 'customRender',\n },\n onFilter: (value, record) => record.name.toString().toLowerCase().includes(value.toLowerCase()),\n onFilterDropdownVisibleChange: visible => {\n if (visible) {\n setTimeout(() => {\n this.searchInput.focus();\n }, 0);\n }\n },\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n scopedSlots: {\n filterDropdown: 'filterDropdown',\n filterIcon: 'filterIcon',\n customRender: 'customRender',\n },\n onFilter: (value, record) => record.age.toString().toLowerCase().includes(value.toLowerCase()),\n onFilterDropdownVisibleChange: visible => {\n if (visible) {\n setTimeout(() => {\n this.searchInput.focus();\n });\n }\n },\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address',\n scopedSlots: {\n filterDropdown: 'filterDropdown',\n filterIcon: 'filterIcon',\n customRender: 'customRender',\n },\n onFilter: (value, record) => record.address.toString().toLowerCase().includes(value.toLowerCase()),\n onFilterDropdownVisibleChange: visible => {\n if (visible) {\n setTimeout(() => {\n this.searchInput.focus();\n });\n }\n },\n },\n ],\n };\n },\n methods: {\n handleSearch(selectedKeys, confirm) {\n confirm();\n this.searchText = selectedKeys[0];\n },\n\n handleReset(clearFilters) {\n clearFilters();\n this.searchText = '';\n },\n },\n };\n",style:null,us:"\n#### Customized filter panel\nImplement a customized column search example via `filterDropdown`.\n",cn:"\n#### 自定义筛选菜单\n通过 `filterDropdown` 定义自定义的列筛选功能，并实现一个搜索列的示例。\n",sourceCode:"<template>\n <a-table :dataSource=\"data\" :columns=\"columns\">\n <div\n slot=\"filterDropdown\"\n slot-scope=\"{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }\"\n style=\"padding: 8px\"\n >\n <a-input\n v-ant-ref=\"c => searchInput = c\"\n :placeholder=\"`Search ${column.dataIndex}`\"\n :value=\"selectedKeys[0]\"\n @change=\"e => setSelectedKeys(e.target.value ? [e.target.value] : [])\"\n @pressEnter=\"() => handleSearch(selectedKeys, confirm)\"\n style=\"width: 188px; margin-bottom: 8px; display: block;\"\n />\n <a-button\n type=\"primary\"\n @click=\"() => handleSearch(selectedKeys, confirm)\"\n icon=\"search\"\n size=\"small\"\n style=\"width: 90px; margin-right: 8px\"\n >Search</a-button\n >\n <a-button @click=\"() => handleReset(clearFilters)\" size=\"small\" style=\"width: 90px\"\n >Reset</a-button\n >\n </div>\n <a-icon\n slot=\"filterIcon\"\n slot-scope=\"filtered\"\n type=\"search\"\n :style=\"{ color: filtered ? '#108ee9' : undefined }\"\n />\n <template slot=\"customRender\" slot-scope=\"text\">\n <span v-if=\"searchText\">\n <template\n v-for=\"(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))\"\n >\n <mark\n v-if=\"fragment.toLowerCase() === searchText.toLowerCase()\"\n :key=\"i\"\n class=\"highlight\"\n >{{fragment}}</mark\n >\n <template v-else\n >{{fragment}}</template\n >\n </template>\n </span>\n <template v-else\n >{{text}}</template\n >\n </template>\n </a-table>\n</template>\n\n<script>\n const data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Joe Black',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Jim Green',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'Jim Red',\n age: 32,\n address: 'London No. 2 Lake Park',\n },\n ];\n\n export default {\n data() {\n return {\n data,\n searchText: '',\n searchInput: null,\n columns: [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n scopedSlots: {\n filterDropdown: 'filterDropdown',\n filterIcon: 'filterIcon',\n customRender: 'customRender',\n },\n onFilter: (value, record) => record.name.toString().toLowerCase().includes(value.toLowerCase()),\n onFilterDropdownVisibleChange: visible => {\n if (visible) {\n setTimeout(() => {\n this.searchInput.focus();\n }, 0);\n }\n },\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n scopedSlots: {\n filterDropdown: 'filterDropdown',\n filterIcon: 'filterIcon',\n customRender: 'customRender',\n },\n onFilter: (value, record) => record.age.toString().toLowerCase().includes(value.toLowerCase()),\n onFilterDropdownVisibleChange: visible => {\n if (visible) {\n setTimeout(() => {\n this.searchInput.focus();\n });\n }\n },\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address',\n scopedSlots: {\n filterDropdown: 'filterDropdown',\n filterIcon: 'filterIcon',\n customRender: 'customRender',\n },\n onFilter: (value, record) => record.address.toString().toLowerCase().includes(value.toLowerCase()),\n onFilterDropdownVisibleChange: visible => {\n if (visible) {\n setTimeout(() => {\n this.searchInput.focus();\n });\n }\n },\n },\n ],\n };\n },\n methods: {\n handleSearch(selectedKeys, confirm) {\n confirm();\n this.searchText = selectedKeys[0];\n },\n\n handleReset(clearFilters) {\n clearFilters();\n this.searchText = '';\n },\n },\n };\n<\/script>\n<style scoped>\n .highlight {\n background-color: rgb(255, 192, 105);\n padding: 0px;\n }\n</style>\n"}}},[a("template",{slot:"component"},[a("a-table",{attrs:{dataSource:t.data,columns:t.columns},scopedSlots:t._u([{key:"filterDropdown",fn:function(s){var n=s.setSelectedKeys,e=s.selectedKeys,l=s.confirm,r=s.clearFilters,i=s.column;return a("div",{staticStyle:{padding:"8px"}},[a("a-input",{directives:[{name:"ant-ref",rawName:"v-ant-ref",value:function(s){return t.searchInput=s},expression:"c => searchInput = c"}],staticStyle:{width:"188px","margin-bottom":"8px",display:"block"},attrs:{placeholder:"Search "+i.dataIndex,value:e[0]},on:{change:function(t){return n(t.target.value?[t.target.value]:[])},pressEnter:function(){return t.handleSearch(e,l)}}}),t._v(" "),a("a-button",{staticStyle:{width:"90px","margin-right":"8px"},attrs:{type:"primary",icon:"search",size:"small"},on:{click:function(){return t.handleSearch(e,l)}}},[t._v("Search")]),t._v(" "),a("a-button",{staticStyle:{width:"90px"},attrs:{size:"small"},on:{click:function(){return t.handleReset(r)}}},[t._v("Reset")])],1)}},{key:"filterIcon",fn:function(t){return a("a-icon",{style:{color:t?"#108ee9":void 0},attrs:{type:"search"}})}},{key:"customRender",fn:function(s){return[t.searchText?a("span",[t._l(s.toString().split(new RegExp("(?<="+t.searchText+")|(?="+t.searchText+")","i")),(function(s,n){return[s.toLowerCase()===t.searchText.toLowerCase()?a("mark",{key:n,staticClass:"highlight"},[t._v(t._s(s))]):[t._v(t._s(s))]]}))],2):[t._v(t._s(s))]]}}])})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"自定义筛选菜单"}},[t._v("自定义筛选菜单 "),a("a",{staticClass:"anchor",attrs:{href:"#自定义筛选菜单"}},[t._v("#")])]),t._v(" "),a("p",[t._v("通过 "),a("code",[t._v("filterDropdown")]),t._v(" 定义自定义的列筛选功能，并实现一个搜索列的示例。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Customized-filter-panel"}},[t._v("Customized filter panel "),a("a",{staticClass:"anchor",attrs:{href:"#Customized-filter-panel"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Implement a customized column search example via "),a("code",[t._v("filterDropdown")]),t._v(".")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"filterDropdown"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"padding: 8px"')]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-input")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("v-ant-ref")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"c => searchInput = c"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":placeholder")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"`Search ${column.dataIndex}`"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":value")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"selectedKeys[0]"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"e => setSelectedKeys(e.target.value ? [e.target.value] : [])"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("@pressEnter")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"() => handleSearch(selectedKeys, confirm)"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"width: 188px; margin-bottom: 8px; display: block;"')]),t._v("\n />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"primary"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"() => handleSearch(selectedKeys, confirm)"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("icon")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"search"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("size")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"small"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"width: 90px; margin-right: 8px"')]),t._v("\n >")]),t._v("Search"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"() => handleReset(clearFilters)"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("size")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"small"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"width: 90px"')]),t._v("\n >")]),t._v("Reset"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"filterIcon"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"filtered"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"search"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v("\"{ color: filtered ? '#108ee9' : undefined }\"")]),t._v("\n />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"customRender"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("v-if")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"searchText"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("v-for")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v("\"(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))\"")]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("mark")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("v-if")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"fragment.toLowerCase() === searchText.toLowerCase()"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":key")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"i"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"highlight"')]),t._v("\n >")]),a("span",[t._v("{{")]),t._v("fragment"),a("span",[t._v("}}")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("mark")]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("v-else")]),t._v("\n >")]),a("span",[t._v("{{")]),t._v("fragment"),a("span",[t._v("}}")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("v-else")]),t._v("\n >")]),a("span",[t._v("{{")]),t._v("text"),a("span",[t._v("}}")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'1'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'John Brown'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'2'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Joe Black'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("42")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'3'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim Green'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Sidney No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'4'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim Red'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 2 Lake Park'")]),t._v(",\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n "),a("span",{staticClass:"hljs-attr"},[t._v("searchText")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("''")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("searchInput")]),t._v(": "),a("span",{staticClass:"hljs-literal"},[t._v("null")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("columns")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": {\n "),a("span",{staticClass:"hljs-attr"},[t._v("filterDropdown")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'filterDropdown'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("filterIcon")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'filterIcon'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'customRender'")]),t._v(",\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("onFilter")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("value, record")]),t._v(") =>")]),t._v(" record.name.toString().toLowerCase().includes(value.toLowerCase()),\n "),a("span",{staticClass:"hljs-attr"},[t._v("onFilterDropdownVisibleChange")]),t._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("visible")]),t._v(" =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (visible) {\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".searchInput.focus();\n }, "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(");\n }\n },\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": {\n "),a("span",{staticClass:"hljs-attr"},[t._v("filterDropdown")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'filterDropdown'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("filterIcon")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'filterIcon'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'customRender'")]),t._v(",\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("onFilter")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("value, record")]),t._v(") =>")]),t._v(" record.age.toString().toLowerCase().includes(value.toLowerCase()),\n "),a("span",{staticClass:"hljs-attr"},[t._v("onFilterDropdownVisibleChange")]),t._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("visible")]),t._v(" =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (visible) {\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".searchInput.focus();\n });\n }\n },\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": {\n "),a("span",{staticClass:"hljs-attr"},[t._v("filterDropdown")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'filterDropdown'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("filterIcon")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'filterIcon'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'customRender'")]),t._v(",\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("onFilter")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("value, record")]),t._v(") =>")]),t._v(" record.address.toString().toLowerCase().includes(value.toLowerCase()),\n "),a("span",{staticClass:"hljs-attr"},[t._v("onFilterDropdownVisibleChange")]),t._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("visible")]),t._v(" =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (visible) {\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".searchInput.focus();\n });\n }\n },\n },\n ],\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n handleSearch(selectedKeys, confirm) {\n confirm();\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".searchText = selectedKeys["),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("];\n },\n\n handleReset(clearFilters) {\n clearFilters();\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".searchText = "),a("span",{staticClass:"hljs-string"},[t._v("''")]),t._v(";\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("scoped")]),t._v(">")]),a("span",{staticClass:"css"},[t._v("\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".highlight")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("background-color")]),t._v(": "),a("span",{staticClass:"hljs-built_in"},[t._v("rgb")]),t._v("(255, 192, 105);\n "),a("span",{staticClass:"hljs-attribute"},[t._v("padding")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("0px")]),t._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};P._withStripped=!0;var A=[{key:"1",name:"John Brown",age:32,address:"New York No. 1 Lake Park"},{key:"2",name:"Joe Black",age:42,address:"London No. 1 Lake Park"},{key:"3",name:"Jim Green",age:32,address:"Sidney No. 1 Lake Park"},{key:"4",name:"Jim Red",age:32,address:"London No. 2 Lake Park"}],D={data:function(){var t=this;return{data:A,searchText:"",searchInput:null,columns:[{title:"Name",dataIndex:"name",key:"name",scopedSlots:{filterDropdown:"filterDropdown",filterIcon:"filterIcon",customRender:"customRender"},onFilter:function(t,s){return s.name.toString().toLowerCase().includes(t.toLowerCase())},onFilterDropdownVisibleChange:function(s){s&&setTimeout((function(){t.searchInput.focus()}),0)}},{title:"Age",dataIndex:"age",key:"age",scopedSlots:{filterDropdown:"filterDropdown",filterIcon:"filterIcon",customRender:"customRender"},onFilter:function(t,s){return s.age.toString().toLowerCase().includes(t.toLowerCase())},onFilterDropdownVisibleChange:function(s){s&&setTimeout((function(){t.searchInput.focus()}))}},{title:"Address",dataIndex:"address",key:"address",scopedSlots:{filterDropdown:"filterDropdown",filterIcon:"filterIcon",customRender:"customRender"},onFilter:function(t,s){return s.address.toString().toLowerCase().includes(t.toLowerCase())},onFilterDropdownVisibleChange:function(s){s&&setTimeout((function(){t.searchInput.focus()}))}}]}},methods:{handleSearch:function(t,s){s(),this.searchText=t[0]},handleReset:function(t){t(),this.searchText=""}}},T=(a(1344),Object(v.a)(D,P,[],!1,null,"20614742",null));T.options.__file="components/table/demo/custom-filter-panel.md";var E=T.exports,J=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-button class="editable-add-btn" @click="handleAdd">Add</a-button>\n <a-table bordered="" :dataSource="dataSource" :columns="columns">\n <template slot="name" slot-scope="text, record">\n <editable-cell :text="text" @change="onCellChange(record.key, \'name\', $event)"/>\n </template>\n <template slot="operation" slot-scope="text, record">\n <a-popconfirm v-if="dataSource.length" title="Sure to delete?" @confirm="() => onDelete(record.key)">\n <a href="javascript:;">Delete</a>\n </a-popconfirm>\n </template>\n </a-table>\n </div>\n',script:"\n import EditableCell from './EditableCell';\n /*\n * EditableCell Code https://github.com/vueComponent/ant-design-vue/blob/master/components/table/demo/EditableCell.vue\n */\n export default {\n components: {\n EditableCell,\n },\n data() {\n return {\n dataSource: [\n {\n key: '0',\n name: 'Edward King 0',\n age: '32',\n address: 'London, Park Lane no. 0',\n },\n {\n key: '1',\n name: 'Edward King 1',\n age: '32',\n address: 'London, Park Lane no. 1',\n },\n ],\n count: 2,\n columns: [\n {\n title: 'name',\n dataIndex: 'name',\n width: '30%',\n scopedSlots: { customRender: 'name' },\n },\n {\n title: 'age',\n dataIndex: 'age',\n },\n {\n title: 'address',\n dataIndex: 'address',\n },\n {\n title: 'operation',\n dataIndex: 'operation',\n scopedSlots: { customRender: 'operation' },\n },\n ],\n };\n },\n methods: {\n onCellChange(key, dataIndex, value) {\n const dataSource = [...this.dataSource];\n const target = dataSource.find(item => item.key === key);\n if (target) {\n target[dataIndex] = value;\n this.dataSource = dataSource;\n }\n },\n onDelete(key) {\n const dataSource = [...this.dataSource];\n this.dataSource = dataSource.filter(item => item.key !== key);\n },\n handleAdd() {\n const { count, dataSource } = this;\n const newData = {\n key: count,\n name: `Edward King ${count}`,\n age: 32,\n address: `London, Park Lane no. ${count}`,\n };\n this.dataSource = [...dataSource, newData];\n this.count = count + 1;\n },\n },\n };\n",style:"\n .editable-cell {\n position: relative;\n }\n\n .editable-cell-input-wrapper,\n .editable-cell-text-wrapper {\n padding-right: 24px;\n }\n\n .editable-cell-text-wrapper {\n padding: 5px 24px 5px 5px;\n }\n\n .editable-cell-icon,\n .editable-cell-icon-check {\n position: absolute;\n right: 0;\n width: 20px;\n cursor: pointer;\n }\n\n .editable-cell-icon {\n line-height: 18px;\n display: none;\n }\n\n .editable-cell-icon-check {\n line-height: 28px;\n }\n\n .editable-cell:hover .editable-cell-icon {\n display: inline-block;\n }\n\n .editable-cell-icon:hover,\n .editable-cell-icon-check:hover {\n color: #108ee9;\n }\n\n .editable-add-btn {\n margin-bottom: 8px;\n }\n",us:"\n#### Editable Cells\nTable with editable cells.\n",cn:"\n#### 可编辑单元格\n带单元格编辑功能的表格。\n",sourceCode:"<template>\n <div>\n <a-button class=\"editable-add-btn\" @click=\"handleAdd\">Add</a-button>\n <a-table bordered :dataSource=\"dataSource\" :columns=\"columns\">\n <template slot=\"name\" slot-scope=\"text, record\">\n <editable-cell :text=\"text\" @change=\"onCellChange(record.key, 'name', $event)\" />\n </template>\n <template slot=\"operation\" slot-scope=\"text, record\">\n <a-popconfirm\n v-if=\"dataSource.length\"\n title=\"Sure to delete?\"\n @confirm=\"() => onDelete(record.key)\"\n >\n <a href=\"javascript:;\">Delete</a>\n </a-popconfirm>\n </template>\n </a-table>\n </div>\n</template>\n<script>\n import EditableCell from './EditableCell';\n /*\n * EditableCell Code https://github.com/vueComponent/ant-design-vue/blob/master/components/table/demo/EditableCell.vue\n */\n export default {\n components: {\n EditableCell,\n },\n data() {\n return {\n dataSource: [\n {\n key: '0',\n name: 'Edward King 0',\n age: '32',\n address: 'London, Park Lane no. 0',\n },\n {\n key: '1',\n name: 'Edward King 1',\n age: '32',\n address: 'London, Park Lane no. 1',\n },\n ],\n count: 2,\n columns: [\n {\n title: 'name',\n dataIndex: 'name',\n width: '30%',\n scopedSlots: { customRender: 'name' },\n },\n {\n title: 'age',\n dataIndex: 'age',\n },\n {\n title: 'address',\n dataIndex: 'address',\n },\n {\n title: 'operation',\n dataIndex: 'operation',\n scopedSlots: { customRender: 'operation' },\n },\n ],\n };\n },\n methods: {\n onCellChange(key, dataIndex, value) {\n const dataSource = [...this.dataSource];\n const target = dataSource.find(item => item.key === key);\n if (target) {\n target[dataIndex] = value;\n this.dataSource = dataSource;\n }\n },\n onDelete(key) {\n const dataSource = [...this.dataSource];\n this.dataSource = dataSource.filter(item => item.key !== key);\n },\n handleAdd() {\n const { count, dataSource } = this;\n const newData = {\n key: count,\n name: `Edward King ${count}`,\n age: 32,\n address: `London, Park Lane no. ${count}`,\n };\n this.dataSource = [...dataSource, newData];\n this.count = count + 1;\n },\n },\n };\n<\/script>\n<style>\n .editable-cell {\n position: relative;\n }\n\n .editable-cell-input-wrapper,\n .editable-cell-text-wrapper {\n padding-right: 24px;\n }\n\n .editable-cell-text-wrapper {\n padding: 5px 24px 5px 5px;\n }\n\n .editable-cell-icon,\n .editable-cell-icon-check {\n position: absolute;\n right: 0;\n width: 20px;\n cursor: pointer;\n }\n\n .editable-cell-icon {\n line-height: 18px;\n display: none;\n }\n\n .editable-cell-icon-check {\n line-height: 28px;\n }\n\n .editable-cell:hover .editable-cell-icon {\n display: inline-block;\n }\n\n .editable-cell-icon:hover,\n .editable-cell-icon-check:hover {\n color: #108ee9;\n }\n\n .editable-add-btn {\n margin-bottom: 8px;\n }\n</style>\n"}}},[a("template",{slot:"component"},[a("div",[a("a-button",{staticClass:"editable-add-btn",on:{click:t.handleAdd}},[t._v("Add")]),t._v(" "),a("a-table",{attrs:{bordered:"",dataSource:t.dataSource,columns:t.columns},scopedSlots:t._u([{key:"name",fn:function(s,n){return[a("editable-cell",{attrs:{text:s},on:{change:function(s){return t.onCellChange(n.key,"name",s)}}})]}},{key:"operation",fn:function(s,n){return[t.dataSource.length?a("a-popconfirm",{attrs:{title:"Sure to delete?"},on:{confirm:function(){return t.onDelete(n.key)}}},[a("a",{attrs:{href:"javascript:;"}},[t._v("Delete")])]):t._e()]}}])})],1)]),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"可编辑单元格"}},[t._v("可编辑单元格 "),a("a",{staticClass:"anchor",attrs:{href:"#可编辑单元格"}},[t._v("#")])]),t._v(" "),a("p",[t._v("带单元格编辑功能的表格。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Editable-Cells"}},[t._v("Editable Cells "),a("a",{staticClass:"anchor",attrs:{href:"#Editable-Cells"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Table with editable cells.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"editable-add-btn"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"handleAdd"')]),t._v(">")]),t._v("Add"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("bordered")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"dataSource"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"name"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text, record"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("editable-cell")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":text")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v("\"onCellChange(record.key, 'name', $event)\"")]),t._v(" />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"operation"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text, record"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popconfirm")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("v-if")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"dataSource.length"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Sure to delete?"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("@confirm")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"() => onDelete(record.key)"')]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),t._v("Delete"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popconfirm")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" EditableCell "),a("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),a("span",{staticClass:"hljs-string"},[t._v("'./EditableCell'")]),t._v(";\n "),a("span",{staticClass:"hljs-comment"},[t._v("/*\n * EditableCell Code https://github.com/vueComponent/ant-design-vue/blob/master/components/table/demo/EditableCell.vue\n */")]),t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n "),a("span",{staticClass:"hljs-attr"},[t._v("components")]),t._v(": {\n EditableCell,\n },\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataSource")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'0'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Edward King 0'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'32'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London, Park Lane no. 0'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'1'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Edward King 1'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'32'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London, Park Lane no. 1'")]),t._v(",\n },\n ],\n "),a("span",{staticClass:"hljs-attr"},[t._v("count")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("2")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("columns")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'30%'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(" },\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'operation'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'operation'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'operation'")]),t._v(" },\n },\n ],\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n onCellChange(key, dataIndex, value) {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" dataSource = [...this.dataSource];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" target = dataSource.find("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("item")]),t._v(" =>")]),t._v(" item.key === key);\n "),a("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (target) {\n target[dataIndex] = value;\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".dataSource = dataSource;\n }\n },\n onDelete(key) {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" dataSource = [...this.dataSource];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".dataSource = dataSource.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("item")]),t._v(" =>")]),t._v(" item.key !== key);\n },\n handleAdd() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" { count, dataSource } = "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(";\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" newData = {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": count,\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("`Edward King "),a("span",{staticClass:"hljs-subst"},[t._v("${count}")]),t._v("`")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("`London, Park Lane no. "),a("span",{staticClass:"hljs-subst"},[t._v("${count}")]),t._v("`")]),t._v(",\n };\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".dataSource = [...dataSource, newData];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".count = count + "),a("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(";\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),a("span",{staticClass:"css"},[t._v("\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".editable-cell")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("position")]),t._v(": relative;\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".editable-cell-input-wrapper")]),t._v(",\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".editable-cell-text-wrapper")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("padding-right")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("24px")]),t._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".editable-cell-text-wrapper")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("padding")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("5px")]),t._v(" "),a("span",{staticClass:"hljs-number"},[t._v("24px")]),t._v(" "),a("span",{staticClass:"hljs-number"},[t._v("5px")]),t._v(" "),a("span",{staticClass:"hljs-number"},[t._v("5px")]),t._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".editable-cell-icon")]),t._v(",\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".editable-cell-icon-check")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("position")]),t._v(": absolute;\n "),a("span",{staticClass:"hljs-attribute"},[t._v("right")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("20px")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("cursor")]),t._v(": pointer;\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".editable-cell-icon")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("line-height")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("18px")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("display")]),t._v(": none;\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".editable-cell-icon-check")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("line-height")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("28px")]),t._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".editable-cell")]),a("span",{staticClass:"hljs-selector-pseudo"},[t._v(":hover")]),t._v(" "),a("span",{staticClass:"hljs-selector-class"},[t._v(".editable-cell-icon")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("display")]),t._v(": inline-block;\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".editable-cell-icon")]),a("span",{staticClass:"hljs-selector-pseudo"},[t._v(":hover")]),t._v(",\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".editable-cell-icon-check")]),a("span",{staticClass:"hljs-selector-pseudo"},[t._v(":hover")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("color")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("#108ee9")]),t._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".editable-add-btn")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("margin-bottom")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("8px")]),t._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};J._withStripped=!0;var O=a(15),F=a.n(O),K=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"editable-cell"},[t.editable?a("div",{staticClass:"editable-cell-input-wrapper"},[a("a-input",{attrs:{value:t.value},on:{change:t.handleChange,pressEnter:t.check}}),a("a-icon",{staticClass:"editable-cell-icon-check",attrs:{type:"check"},on:{click:t.check}})],1):a("div",{staticClass:"editable-cell-text-wrapper"},[t._v("\n "+t._s(t.value||" ")+"\n "),a("a-icon",{staticClass:"editable-cell-icon",attrs:{type:"edit"},on:{click:t.edit}})],1)])};K._withStripped=!0;var B={props:{text:String},data:function(){return{value:this.text,editable:!1}},methods:{handleChange:function(t){var s=t.target.value;this.value=s},check:function(){this.editable=!1,this.$emit("change",this.value)},edit:function(){this.editable=!0}}},z=Object(v.a)(B,K,[],!1,null,null,null);z.options.__file="components/table/demo/EditableCell.vue";var M={components:{EditableCell:z.exports},data:function(){return{dataSource:[{key:"0",name:"Edward King 0",age:"32",address:"London, Park Lane no. 0"},{key:"1",name:"Edward King 1",age:"32",address:"London, Park Lane no. 1"}],count:2,columns:[{title:"name",dataIndex:"name",width:"30%",scopedSlots:{customRender:"name"}},{title:"age",dataIndex:"age"},{title:"address",dataIndex:"address"},{title:"operation",dataIndex:"operation",scopedSlots:{customRender:"operation"}}]}},methods:{onCellChange:function(t,s,a){var n=[].concat(F()(this.dataSource)),e=n.find((function(s){return s.key===t}));e&&(e[s]=a,this.dataSource=n)},onDelete:function(t){var s=[].concat(F()(this.dataSource));this.dataSource=s.filter((function(s){return s.key!==t}))},handleAdd:function(){var t=this.count,s=this.dataSource,a={key:t,name:"Edward King "+t,age:32,address:"London, Park Lane no. "+t};this.dataSource=[].concat(F()(s),[a]),this.count=t+1}}},G=(a(1345),Object(v.a)(M,J,[],!1,null,null,null));G.options.__file="components/table/demo/edit-cell.md";var H=G.exports,$=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-table :columns="columns" :dataSource="data" bordered="">\n <template v-for="col in [\'name\', \'age\', \'address\']" :slot="col" slot-scope="text, record, index">\n <div :key="col">\n <a-input v-if="record.editable" style="margin: -5px 0" :value="text" @change="e => handleChange(e.target.value, record.key, col)"/>\n <template v-else="">{{text}}</template>\n </div>\n </template>\n <template slot="operation" slot-scope="text, record, index">\n <div class="editable-row-operations">\n <span v-if="record.editable">\n <a @click="() => save(record.key)">Save</a>\n <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.key)">\n <a>Cancel</a>\n </a-popconfirm>\n </span>\n <span v-else="">\n <a @click="() => edit(record.key)">Edit</a>\n </span>\n </div>\n </template>\n </a-table>\n',script:"\n const columns = [\n {\n title: 'name',\n dataIndex: 'name',\n width: '25%',\n scopedSlots: { customRender: 'name' },\n },\n {\n title: 'age',\n dataIndex: 'age',\n width: '15%',\n scopedSlots: { customRender: 'age' },\n },\n {\n title: 'address',\n dataIndex: 'address',\n width: '40%',\n scopedSlots: { customRender: 'address' },\n },\n {\n title: 'operation',\n dataIndex: 'operation',\n scopedSlots: { customRender: 'operation' },\n },\n ];\n\n const data = [];\n for (let i = 0; i < 100; i++) {\n data.push({\n key: i.toString(),\n name: `Edrward ${i}`,\n age: 32,\n address: `London Park no. ${i}`,\n });\n }\n export default {\n data() {\n this.cacheData = data.map(item => ({ ...item }));\n return {\n data,\n columns,\n };\n },\n methods: {\n handleChange(value, key, column) {\n const newData = [...this.data];\n const target = newData.filter(item => key === item.key)[0];\n if (target) {\n target[column] = value;\n this.data = newData;\n }\n },\n edit(key) {\n const newData = [...this.data];\n const target = newData.filter(item => key === item.key)[0];\n if (target) {\n target.editable = true;\n this.data = newData;\n }\n },\n save(key) {\n const newData = [...this.data];\n const newCacheData = [...this.cacheData];\n const target = newData.filter(item => key === item.key)[0];\n const targetCache = newCacheData.filter(item => key === item.key)[0];\n if (target && targetCache) {\n delete target.editable;\n this.data = newData;\n Object.assign(\n targetCache,\n target\n );\n this.cacheData = newCacheData;\n }\n },\n cancel(key) {\n const newData = [...this.data];\n const target = newData.filter(item => key === item.key)[0];\n if (target) {\n Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);\n delete target.editable;\n this.data = newData;\n }\n },\n },\n };\n",style:null,us:"\n#### Editable Rows\nTable with editable rows.\n",cn:"\n#### 可编辑行\n带行编辑功能的表格。\n",sourceCode:"<template>\n <a-table :columns=\"columns\" :dataSource=\"data\" bordered>\n <template\n v-for=\"col in ['name', 'age', 'address']\"\n :slot=\"col\"\n slot-scope=\"text, record, index\"\n >\n <div :key=\"col\">\n <a-input\n v-if=\"record.editable\"\n style=\"margin: -5px 0\"\n :value=\"text\"\n @change=\"e => handleChange(e.target.value, record.key, col)\"\n />\n <template v-else\n >{{text}}</template\n >\n </div>\n </template>\n <template slot=\"operation\" slot-scope=\"text, record, index\">\n <div class=\"editable-row-operations\">\n <span v-if=\"record.editable\">\n <a @click=\"() => save(record.key)\">Save</a>\n <a-popconfirm title=\"Sure to cancel?\" @confirm=\"() => cancel(record.key)\">\n <a>Cancel</a>\n </a-popconfirm>\n </span>\n <span v-else>\n <a @click=\"() => edit(record.key)\">Edit</a>\n </span>\n </div>\n </template>\n </a-table>\n</template>\n<script>\n const columns = [\n {\n title: 'name',\n dataIndex: 'name',\n width: '25%',\n scopedSlots: { customRender: 'name' },\n },\n {\n title: 'age',\n dataIndex: 'age',\n width: '15%',\n scopedSlots: { customRender: 'age' },\n },\n {\n title: 'address',\n dataIndex: 'address',\n width: '40%',\n scopedSlots: { customRender: 'address' },\n },\n {\n title: 'operation',\n dataIndex: 'operation',\n scopedSlots: { customRender: 'operation' },\n },\n ];\n\n const data = [];\n for (let i = 0; i < 100; i++) {\n data.push({\n key: i.toString(),\n name: `Edrward ${i}`,\n age: 32,\n address: `London Park no. ${i}`,\n });\n }\n export default {\n data() {\n this.cacheData = data.map(item => ({ ...item }));\n return {\n data,\n columns,\n };\n },\n methods: {\n handleChange(value, key, column) {\n const newData = [...this.data];\n const target = newData.filter(item => key === item.key)[0];\n if (target) {\n target[column] = value;\n this.data = newData;\n }\n },\n edit(key) {\n const newData = [...this.data];\n const target = newData.filter(item => key === item.key)[0];\n if (target) {\n target.editable = true;\n this.data = newData;\n }\n },\n save(key) {\n const newData = [...this.data];\n const newCacheData = [...this.cacheData];\n const target = newData.filter(item => key === item.key)[0];\n const targetCache = newCacheData.filter(item => key === item.key)[0];\n if (target && targetCache) {\n delete target.editable;\n this.data = newData;\n Object.assign(\n targetCache,\n target\n );\n this.cacheData = newCacheData;\n }\n },\n cancel(key) {\n const newData = [...this.data];\n const target = newData.filter(item => key === item.key)[0];\n if (target) {\n Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);\n delete target.editable;\n this.data = newData;\n }\n },\n },\n };\n<\/script>\n<style scoped>\n .editable-row-operations a {\n margin-right: 8px;\n }\n</style>\n"}}},[a("template",{slot:"component"},[a("a-table",{attrs:{columns:t.columns,dataSource:t.data,bordered:""},scopedSlots:t._u([t._l(["name","age","address"],(function(s){return{key:s,fn:function(n,e,l){return[a("div",{key:s},[e.editable?a("a-input",{staticStyle:{margin:"-5px 0"},attrs:{value:n},on:{change:function(a){return t.handleChange(a.target.value,e.key,s)}}}):[t._v(t._s(n))]],2)]}}})),{key:"operation",fn:function(s,n,e){return[a("div",{staticClass:"editable-row-operations"},[n.editable?a("span",[a("a",{on:{click:function(){return t.save(n.key)}}},[t._v("Save")]),t._v(" "),a("a-popconfirm",{attrs:{title:"Sure to cancel?"},on:{confirm:function(){return t.cancel(n.key)}}},[a("a",[t._v("Cancel")])])],1):a("span",[a("a",{on:{click:function(){return t.edit(n.key)}}},[t._v("Edit")])])])]}}],null,!0)})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"可编辑行"}},[t._v("可编辑行 "),a("a",{staticClass:"anchor",attrs:{href:"#可编辑行"}},[t._v("#")])]),t._v(" "),a("p",[t._v("带行编辑功能的表格。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Editable-Rows"}},[t._v("Editable Rows "),a("a",{staticClass:"anchor",attrs:{href:"#Editable-Rows"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Table with editable rows.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("bordered")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("v-for")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v("\"col in ['name', 'age', 'address']\"")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"col"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text, record, index"')]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":key")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"col"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-input")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("v-if")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"record.editable"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"margin: -5px 0"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":value")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"e => handleChange(e.target.value, record.key, col)"')]),t._v("\n />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("v-else")]),t._v("\n >")]),a("span",[t._v("{{")]),t._v("text"),a("span",[t._v("}}")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"operation"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text, record, index"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"editable-row-operations"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("v-if")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"record.editable"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"() => save(record.key)"')]),t._v(">")]),t._v("Save"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popconfirm")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Sure to cancel?"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("@confirm")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"() => cancel(record.key)"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("Cancel"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popconfirm")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("v-else")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"() => edit(record.key)"')]),t._v(">")]),t._v("Edit"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'25%'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(" },\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'15%'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(" },\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'40%'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(" },\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'operation'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'operation'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'operation'")]),t._v(" },\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),a("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < "),a("span",{staticClass:"hljs-number"},[t._v("100")]),t._v("; i++) {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": i.toString(),\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("`Edrward "),a("span",{staticClass:"hljs-subst"},[t._v("${i}")]),t._v("`")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("`London Park no. "),a("span",{staticClass:"hljs-subst"},[t._v("${i}")]),t._v("`")]),t._v(",\n });\n }\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".cacheData = data.map("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("item")]),t._v(" =>")]),t._v(" ({ ...item }));\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n columns,\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n handleChange(value, key, column) {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" newData = [...this.data];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" target = newData.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("item")]),t._v(" =>")]),t._v(" key === item.key)["),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (target) {\n target[column] = value;\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".data = newData;\n }\n },\n edit(key) {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" newData = [...this.data];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" target = newData.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("item")]),t._v(" =>")]),t._v(" key === item.key)["),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (target) {\n target.editable = "),a("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(";\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".data = newData;\n }\n },\n save(key) {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" newData = [...this.data];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" newCacheData = [...this.cacheData];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" target = newData.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("item")]),t._v(" =>")]),t._v(" key === item.key)["),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" targetCache = newCacheData.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("item")]),t._v(" =>")]),t._v(" key === item.key)["),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (target && targetCache) {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("delete")]),t._v(" target.editable;\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".data = newData;\n "),a("span",{staticClass:"hljs-built_in"},[t._v("Object")]),t._v(".assign(\n targetCache,\n target\n );\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".cacheData = newCacheData;\n }\n },\n cancel(key) {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" newData = [...this.data];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" target = newData.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("item")]),t._v(" =>")]),t._v(" key === item.key)["),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (target) {\n "),a("span",{staticClass:"hljs-built_in"},[t._v("Object")]),t._v(".assign(target, "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".cacheData.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("item")]),t._v(" =>")]),t._v(" key === item.key)["),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("]);\n "),a("span",{staticClass:"hljs-keyword"},[t._v("delete")]),t._v(" target.editable;\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".data = newData;\n }\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("scoped")]),t._v(">")]),a("span",{staticClass:"css"},[t._v("\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".editable-row-operations")]),t._v(" "),a("span",{staticClass:"hljs-selector-tag"},[t._v("a")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("margin-right")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("8px")]),t._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};$._withStripped=!0;for(var Y=[{title:"name",dataIndex:"name",width:"25%",scopedSlots:{customRender:"name"}},{title:"age",dataIndex:"age",width:"15%",scopedSlots:{customRender:"age"}},{title:"address",dataIndex:"address",width:"40%",scopedSlots:{customRender:"address"}},{title:"operation",dataIndex:"operation",scopedSlots:{customRender:"operation"}}],q=[],V=0;V<100;V++)q.push({key:V.toString(),name:"Edrward "+V,age:32,address:"London Park no. "+V});var W={data:function(){return this.cacheData=q.map((function(t){return l()({},t)})),{data:q,columns:Y}},methods:{handleChange:function(t,s,a){var n=[].concat(F()(this.data)),e=n.filter((function(t){return s===t.key}))[0];e&&(e[a]=t,this.data=n)},edit:function(t){var s=[].concat(F()(this.data)),a=s.filter((function(s){return t===s.key}))[0];a&&(a.editable=!0,this.data=s)},save:function(t){var s=[].concat(F()(this.data)),a=[].concat(F()(this.cacheData)),n=s.filter((function(s){return t===s.key}))[0],e=a.filter((function(s){return t===s.key}))[0];n&&e&&(delete n.editable,this.data=s,l()(e,n),this.cacheData=a)},cancel:function(t){var s=[].concat(F()(this.data)),a=s.filter((function(s){return t===s.key}))[0];a&&(l()(a,this.cacheData.filter((function(s){return t===s.key}))[0]),delete a.editable,this.data=s)}}},U=(a(1346),Object(v.a)(W,$,[],!1,null,"7683c326",null));U.options.__file="components/table/demo/edit-row.md";var X=U.exports,Q=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection"/>\n',script:"\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n width: '12%',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n width: '30%',\n key: 'address',\n },\n ];\n\n const data = [\n {\n key: 1,\n name: 'John Brown sr.',\n age: 60,\n address: 'New York No. 1 Lake Park',\n children: [\n {\n key: 11,\n name: 'John Brown',\n age: 42,\n address: 'New York No. 2 Lake Park',\n },\n {\n key: 12,\n name: 'John Brown jr.',\n age: 30,\n address: 'New York No. 3 Lake Park',\n children: [\n {\n key: 121,\n name: 'Jimmy Brown',\n age: 16,\n address: 'New York No. 3 Lake Park',\n },\n ],\n },\n {\n key: 13,\n name: 'Jim Green sr.',\n age: 72,\n address: 'London No. 1 Lake Park',\n children: [\n {\n key: 131,\n name: 'Jim Green',\n age: 42,\n address: 'London No. 2 Lake Park',\n children: [\n {\n key: 1311,\n name: 'Jim Green jr.',\n age: 25,\n address: 'London No. 3 Lake Park',\n },\n {\n key: 1312,\n name: 'Jimmy Green sr.',\n age: 18,\n address: 'London No. 4 Lake Park',\n },\n ],\n },\n ],\n },\n ],\n },\n {\n key: 2,\n name: 'Joe Black',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n },\n ];\n\n const rowSelection = {\n onChange: (selectedRowKeys, selectedRows) => {\n console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);\n },\n onSelect: (record, selected, selectedRows) => {\n console.log(record, selected, selectedRows);\n },\n onSelectAll: (selected, selectedRows, changeRows) => {\n console.log(selected, selectedRows, changeRows);\n },\n };\n\n export default {\n data() {\n return {\n data,\n columns,\n rowSelection,\n };\n },\n };\n",style:null,us:"\n#### Tree data\nDisplay tree structure data in Table when there is field key `children` in dataSource, try to customize `childrenColumnName` property to avoid tree table structure.\nYou can control the indent width by setting `indentSize`.\n> Note, no support for recursive selection of tree structure data table yet.\n",cn:"\n#### 树形数据展示\n表格支持树形数据的展示，当数据中有 `children` 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 `childrenColumnName` 进行配置。\n可以通过设置 `indentSize` 以控制每一层的缩进宽度。\n> 注：暂不支持父子数据递归关联选择。\n",sourceCode:"<template>\n <a-table :columns=\"columns\" :dataSource=\"data\" :rowSelection=\"rowSelection\" />\n</template>\n<script>\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n width: '12%',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n width: '30%',\n key: 'address',\n },\n ];\n\n const data = [\n {\n key: 1,\n name: 'John Brown sr.',\n age: 60,\n address: 'New York No. 1 Lake Park',\n children: [\n {\n key: 11,\n name: 'John Brown',\n age: 42,\n address: 'New York No. 2 Lake Park',\n },\n {\n key: 12,\n name: 'John Brown jr.',\n age: 30,\n address: 'New York No. 3 Lake Park',\n children: [\n {\n key: 121,\n name: 'Jimmy Brown',\n age: 16,\n address: 'New York No. 3 Lake Park',\n },\n ],\n },\n {\n key: 13,\n name: 'Jim Green sr.',\n age: 72,\n address: 'London No. 1 Lake Park',\n children: [\n {\n key: 131,\n name: 'Jim Green',\n age: 42,\n address: 'London No. 2 Lake Park',\n children: [\n {\n key: 1311,\n name: 'Jim Green jr.',\n age: 25,\n address: 'London No. 3 Lake Park',\n },\n {\n key: 1312,\n name: 'Jimmy Green sr.',\n age: 18,\n address: 'London No. 4 Lake Park',\n },\n ],\n },\n ],\n },\n ],\n },\n {\n key: 2,\n name: 'Joe Black',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n },\n ];\n\n const rowSelection = {\n onChange: (selectedRowKeys, selectedRows) => {\n console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);\n },\n onSelect: (record, selected, selectedRows) => {\n console.log(record, selected, selectedRows);\n },\n onSelectAll: (selected, selectedRows, changeRows) => {\n console.log(selected, selectedRows, changeRows);\n },\n };\n\n export default {\n data() {\n return {\n data,\n columns,\n rowSelection,\n };\n },\n };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("a-table",{attrs:{columns:t.columns,dataSource:t.data,rowSelection:t.rowSelection}})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"树形数据展示"}},[t._v("树形数据展示 "),a("a",{staticClass:"anchor",attrs:{href:"#树形数据展示"}},[t._v("#")])]),t._v(" "),a("p",[t._v("表格支持树形数据的展示，当数据中有 "),a("code",[t._v("children")]),t._v(" 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 "),a("code",[t._v("childrenColumnName")]),t._v(" 进行配置。"),a("br"),t._v("\n可以通过设置 "),a("code",[t._v("indentSize")]),t._v(" 以控制每一层的缩进宽度。"),a("br")]),t._v(" "),a("blockquote",[a("p",[t._v("注：暂不支持父子数据递归关联选择。")])])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Tree-data"}},[t._v("Tree data "),a("a",{staticClass:"anchor",attrs:{href:"#Tree-data"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Display tree structure data in Table when there is field key "),a("code",[t._v("children")]),t._v(" in dataSource, try to customize "),a("code",[t._v("childrenColumnName")]),t._v(" property to avoid tree table structure."),a("br"),t._v("\nYou can control the indent width by setting "),a("code",[t._v("indentSize")]),t._v("."),a("br")]),t._v(" "),a("blockquote",[a("p",[t._v("Note, no support for recursive selection of tree structure data table yet.")])])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":rowSelection")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"rowSelection"')]),t._v(" />")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'12%'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'30%'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'John Brown sr.'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("60")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York No. 1 Lake Park'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("11")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'John Brown'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("42")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York No. 2 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("12")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'John Brown jr.'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("30")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York No. 3 Lake Park'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("121")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jimmy Brown'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("16")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York No. 3 Lake Park'")]),t._v(",\n },\n ],\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("13")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim Green sr.'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("72")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 1 Lake Park'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("131")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim Green'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("42")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 2 Lake Park'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("1311")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim Green jr.'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("25")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 3 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("1312")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jimmy Green sr.'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("18")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 4 Lake Park'")]),t._v(",\n },\n ],\n },\n ],\n },\n ],\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("2")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Joe Black'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Sidney No. 1 Lake Park'")]),t._v(",\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" rowSelection = {\n "),a("span",{staticClass:"hljs-attr"},[t._v("onChange")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("selectedRowKeys, selectedRows")]),t._v(") =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),a("span",{staticClass:"hljs-string"},[t._v("`selectedRowKeys: "),a("span",{staticClass:"hljs-subst"},[t._v("${selectedRowKeys}")]),t._v("`")]),t._v(", "),a("span",{staticClass:"hljs-string"},[t._v("'selectedRows: '")]),t._v(", selectedRows);\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("onSelect")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("record, selected, selectedRows")]),t._v(") =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log(record, selected, selectedRows);\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("onSelectAll")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("selected, selectedRows, changeRows")]),t._v(") =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log(selected, selectedRows, changeRows);\n },\n };\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n columns,\n rowSelection,\n };\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};Q._withStripped=!0;var Z=[{title:"Name",dataIndex:"name",key:"name"},{title:"Age",dataIndex:"age",key:"age",width:"12%"},{title:"Address",dataIndex:"address",width:"30%",key:"address"}],tt=[{key:1,name:"John Brown sr.",age:60,address:"New York No. 1 Lake Park",children:[{key:11,name:"John Brown",age:42,address:"New York No. 2 Lake Park"},{key:12,name:"John Brown jr.",age:30,address:"New York No. 3 Lake Park",children:[{key:121,name:"Jimmy Brown",age:16,address:"New York No. 3 Lake Park"}]},{key:13,name:"Jim Green sr.",age:72,address:"London No. 1 Lake Park",children:[{key:131,name:"Jim Green",age:42,address:"London No. 2 Lake Park",children:[{key:1311,name:"Jim Green jr.",age:25,address:"London No. 3 Lake Park"},{key:1312,name:"Jimmy Green sr.",age:18,address:"London No. 4 Lake Park"}]}]}]},{key:2,name:"Joe Black",age:32,address:"Sidney No. 1 Lake Park"}],st={onChange:function(t,s){console.log("selectedRowKeys: "+t,"selectedRows: ",s)},onSelect:function(t,s,a){console.log(t,s,a)},onSelectAll:function(t,s,a){console.log(t,s,a)}},at={data:function(){return{data:tt,columns:Z,rowSelection:st}}},nt=Object(v.a)(at,Q,[],!1,null,null,null);nt.options.__file="components/table/demo/expand-children.md";var et=nt.exports,lt=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-table :columns="columns" :dataSource="data">\n <a slot="action" slot-scope="text" href="javascript:;">Delete</a>\n <p slot="expandedRowRender" slot-scope="record" style="margin: 0">{{record.description}}</p>\n </a-table>\n',script:"\n const columns = [\n { title: 'Name', dataIndex: 'name', key: 'name' },\n { title: 'Age', dataIndex: 'age', key: 'age' },\n { title: 'Address', dataIndex: 'address', key: 'address' },\n { title: 'Action', dataIndex: '', key: 'x', scopedSlots: { customRender: 'action' } },\n ];\n\n const data = [\n {\n key: 1,\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',\n },\n {\n key: 2,\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',\n },\n {\n key: 3,\n name: 'Joe Black',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',\n },\n ];\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n };\n",style:null,us:"\n#### Expandable Row\nWhen there's too much information to show and the table can't display all at once.\n",cn:"\n#### 可展开\n当表格内容较多不能一次性完全展示时。\n",sourceCode:"<template>\n <a-table :columns=\"columns\" :dataSource=\"data\">\n <a slot=\"action\" slot-scope=\"text\" href=\"javascript:;\">Delete</a>\n <p slot=\"expandedRowRender\" slot-scope=\"record\" style=\"margin: 0\">{{record.description}}</p>\n </a-table>\n</template>\n<script>\n const columns = [\n { title: 'Name', dataIndex: 'name', key: 'name' },\n { title: 'Age', dataIndex: 'age', key: 'age' },\n { title: 'Address', dataIndex: 'address', key: 'address' },\n { title: 'Action', dataIndex: '', key: 'x', scopedSlots: { customRender: 'action' } },\n ];\n\n const data = [\n {\n key: 1,\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',\n },\n {\n key: 2,\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',\n },\n {\n key: 3,\n name: 'Joe Black',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',\n },\n ];\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("a-table",{attrs:{columns:t.columns,dataSource:t.data},scopedSlots:t._u([{key:"action",fn:function(s){return a("a",{attrs:{href:"javascript:;"}},[t._v("Delete")])}},{key:"expandedRowRender",fn:function(s){return a("p",{staticStyle:{margin:"0"}},[t._v(t._s(s.description))])}}])})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"可展开"}},[t._v("可展开 "),a("a",{staticClass:"anchor",attrs:{href:"#可展开"}},[t._v("#")])]),t._v(" "),a("p",[t._v("当表格内容较多不能一次性完全展示时。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Expandable-Row"}},[t._v("Expandable Row "),a("a",{staticClass:"anchor",attrs:{href:"#Expandable-Row"}},[t._v("#")])]),t._v(" "),a("p",[t._v("When there's too much information to show and the table can't display all at once.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"action"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),t._v("Delete"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"expandedRowRender"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"record"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"margin: 0"')]),t._v(">")]),a("span",[t._v("{{")]),t._v("record.description"),a("span",[t._v("}}")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Name'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Age'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Action'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("''")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'x'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'action'")]),t._v(" } },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'John Brown'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York No. 1 Lake Park'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("2")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim Green'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("42")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 1 Lake Park'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("3")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Joe Black'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Sidney No. 1 Lake Park'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.'")]),t._v(",\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n columns,\n };\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};lt._withStripped=!0;var rt=[{title:"Name",dataIndex:"name",key:"name"},{title:"Age",dataIndex:"age",key:"age"},{title:"Address",dataIndex:"address",key:"address"},{title:"Action",dataIndex:"",key:"x",scopedSlots:{customRender:"action"}}],it=[{key:1,name:"John Brown",age:32,address:"New York No. 1 Lake Park",description:"My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."},{key:2,name:"Jim Green",age:42,address:"London No. 1 Lake Park",description:"My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."},{key:3,name:"Joe Black",age:32,address:"Sidney No. 1 Lake Park",description:"My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park."}],ot={data:function(){return{data:it,columns:rt}}},ct=Object(v.a)(ot,lt,[],!1,null,null,null);ct.options.__file="components/table/demo/expand.md";var vt=ct.exports,_t=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-table :columns="columns" :dataSource="data" :scroll="{ x: 1500, y: 300 }">\n <a slot="action" slot-scope="text" href="javascript:;">action</a>\n </a-table>\n',script:"\n const columns = [\n { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },\n { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },\n { title: 'Column 1', dataIndex: 'address', key: '1', width: 150 },\n { title: 'Column 2', dataIndex: 'address', key: '2', width: 150 },\n { title: 'Column 3', dataIndex: 'address', key: '3', width: 150 },\n { title: 'Column 4', dataIndex: 'address', key: '4', width: 150 },\n { title: 'Column 5', dataIndex: 'address', key: '5', width: 150 },\n { title: 'Column 6', dataIndex: 'address', key: '6', width: 150 },\n { title: 'Column 7', dataIndex: 'address', key: '7', width: 150 },\n { title: 'Column 8', dataIndex: 'address', key: '8' },\n {\n title: 'Action',\n key: 'operation',\n fixed: 'right',\n width: 100,\n scopedSlots: { customRender: 'action' },\n },\n ];\n\n const data = [];\n for (let i = 0; i < 100; i++) {\n data.push({\n key: i,\n name: `Edrward ${i}`,\n age: 32,\n address: `London Park no. ${i}`,\n });\n }\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n };\n",style:null,us:"\n#### Fixed Columns and Header\nA Solution for displaying large amounts of data with long columns.\n> Specify the width of columns if header and cell do not align properly. (Leave one column at least without width to fit fluid layout)\n> A fixed value which is greater than table width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.\n",cn:"\n#### 固定头和列\n适合同时展示有大量数据和数据列。\n> 若列头与内容不对齐或出现列重复，请指定**固定列**的宽度 `width`。\n> 建议指定 `scroll.x` 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 `scroll.x`。\n",sourceCode:"<template>\n <a-table :columns=\"columns\" :dataSource=\"data\" :scroll=\"{ x: 1500, y: 300 }\">\n <a slot=\"action\" slot-scope=\"text\" href=\"javascript:;\">action</a>\n </a-table>\n</template>\n<script>\n const columns = [\n { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },\n { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },\n { title: 'Column 1', dataIndex: 'address', key: '1', width: 150 },\n { title: 'Column 2', dataIndex: 'address', key: '2', width: 150 },\n { title: 'Column 3', dataIndex: 'address', key: '3', width: 150 },\n { title: 'Column 4', dataIndex: 'address', key: '4', width: 150 },\n { title: 'Column 5', dataIndex: 'address', key: '5', width: 150 },\n { title: 'Column 6', dataIndex: 'address', key: '6', width: 150 },\n { title: 'Column 7', dataIndex: 'address', key: '7', width: 150 },\n { title: 'Column 8', dataIndex: 'address', key: '8' },\n {\n title: 'Action',\n key: 'operation',\n fixed: 'right',\n width: 100,\n scopedSlots: { customRender: 'action' },\n },\n ];\n\n const data = [];\n for (let i = 0; i < 100; i++) {\n data.push({\n key: i,\n name: `Edrward ${i}`,\n age: 32,\n address: `London Park no. ${i}`,\n });\n }\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("a-table",{attrs:{columns:t.columns,dataSource:t.data,scroll:{x:1500,y:300}},scopedSlots:t._u([{key:"action",fn:function(s){return a("a",{attrs:{href:"javascript:;"}},[t._v("action")])}}])})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"固定头和列"}},[t._v("固定头和列 "),a("a",{staticClass:"anchor",attrs:{href:"#固定头和列"}},[t._v("#")])]),t._v(" "),a("p",[t._v("适合同时展示有大量数据和数据列。")]),t._v(" "),a("blockquote",[a("p",[t._v("若列头与内容不对齐或出现列重复，请指定"),a("strong",[t._v("固定列")]),t._v("的宽度 "),a("code",[t._v("width")]),t._v("。"),a("br"),t._v("\n建议指定 "),a("code",[t._v("scroll.x")]),t._v(" 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 "),a("code",[t._v("scroll.x")]),t._v("。"),a("br")])])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Fixed-Columns-and-Header"}},[t._v("Fixed Columns and Header "),a("a",{staticClass:"anchor",attrs:{href:"#Fixed-Columns-and-Header"}},[t._v("#")])]),t._v(" "),a("p",[t._v("A Solution for displaying large amounts of data with long columns.")]),t._v(" "),a("blockquote",[a("p",[t._v("Specify the width of columns if header and cell do not align properly. (Leave one column at least without width to fit fluid layout)"),a("br"),t._v("\nA fixed value which is greater than table width for "),a("code",[t._v("scroll.x")]),t._v(" is recommended. The sum of unfixed columns should not greater than "),a("code",[t._v("scroll.x")]),t._v("."),a("br")])])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":scroll")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"{ x: 1500, y: 300 }"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"action"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),t._v("action"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Full Name'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("100")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("fixed")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'left'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Age'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("100")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("fixed")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'left'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Column 1'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'1'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("150")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Column 2'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'2'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("150")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Column 3'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'3'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("150")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Column 4'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'4'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("150")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Column 5'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'5'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("150")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Column 6'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'6'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("150")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Column 7'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'7'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("150")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Column 8'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'8'")]),t._v(" },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Action'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'operation'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("fixed")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'right'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("100")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'action'")]),t._v(" },\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),a("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < "),a("span",{staticClass:"hljs-number"},[t._v("100")]),t._v("; i++) {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": i,\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("`Edrward "),a("span",{staticClass:"hljs-subst"},[t._v("${i}")]),t._v("`")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("`London Park no. "),a("span",{staticClass:"hljs-subst"},[t._v("${i}")]),t._v("`")]),t._v(",\n });\n }\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n columns,\n };\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};_t._withStripped=!0;for(var dt=[{title:"Full Name",width:100,dataIndex:"name",key:"name",fixed:"left"},{title:"Age",width:100,dataIndex:"age",key:"age",fixed:"left"},{title:"Column 1",dataIndex:"address",key:"1",width:150},{title:"Column 2",dataIndex:"address",key:"2",width:150},{title:"Column 3",dataIndex:"address",key:"3",width:150},{title:"Column 4",dataIndex:"address",key:"4",width:150},{title:"Column 5",dataIndex:"address",key:"5",width:150},{title:"Column 6",dataIndex:"address",key:"6",width:150},{title:"Column 7",dataIndex:"address",key:"7",width:150},{title:"Column 8",dataIndex:"address",key:"8"},{title:"Action",key:"operation",fixed:"right",width:100,scopedSlots:{customRender:"action"}}],pt=[],ht=0;ht<100;ht++)pt.push({key:ht,name:"Edrward "+ht,age:32,address:"London Park no. "+ht});var ut={data:function(){return{data:pt,columns:dt}}},mt=Object(v.a)(ut,_t,[],!1,null,null,null);mt.options.__file="components/table/demo/fixed-columns-header.md";var Ct=mt.exports,jt=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-table :columns="columns" :dataSource="data" :scroll="{ x: 1300 }">\n <a slot="action" slot-scope="text" href="javascript:;">action</a>\n </a-table>\n',script:"\n const columns = [\n { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },\n { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },\n { title: 'Column 1', dataIndex: 'address', key: '1' },\n { title: 'Column 2', dataIndex: 'address', key: '2' },\n { title: 'Column 3', dataIndex: 'address', key: '3' },\n { title: 'Column 4', dataIndex: 'address', key: '4' },\n { title: 'Column 5', dataIndex: 'address', key: '5' },\n { title: 'Column 6', dataIndex: 'address', key: '6' },\n { title: 'Column 7', dataIndex: 'address', key: '7' },\n { title: 'Column 8', dataIndex: 'address', key: '8' },\n {\n title: 'Action',\n key: 'operation',\n fixed: 'right',\n width: 100,\n scopedSlots: { customRender: 'action' },\n },\n ];\n\n const data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 40,\n address: 'London Park',\n },\n ];\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n };\n",style:null,us:"\n#### Fixed Columns\nTo fix some columns and scroll inside other columns, and you must set `scroll.x` meanwhile.\n> Specify the width of columns if header and cell do not align properly.(Leave one column at least without width to fit fluid layout)\n> A fixed value which is greater than table width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.\n",cn:"\n#### 固定列\n对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 `scroll.x` 配合使用。\n> 若列头与内容不对齐或出现列重复，请指定**固定列**的宽度 `width`。\n> 建议指定 `scroll.x` 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 `scroll.x`。\n",sourceCode:"<template>\n <a-table :columns=\"columns\" :dataSource=\"data\" :scroll=\"{ x: 1300 }\">\n <a slot=\"action\" slot-scope=\"text\" href=\"javascript:;\">action</a>\n </a-table>\n</template>\n<script>\n const columns = [\n { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },\n { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },\n { title: 'Column 1', dataIndex: 'address', key: '1' },\n { title: 'Column 2', dataIndex: 'address', key: '2' },\n { title: 'Column 3', dataIndex: 'address', key: '3' },\n { title: 'Column 4', dataIndex: 'address', key: '4' },\n { title: 'Column 5', dataIndex: 'address', key: '5' },\n { title: 'Column 6', dataIndex: 'address', key: '6' },\n { title: 'Column 7', dataIndex: 'address', key: '7' },\n { title: 'Column 8', dataIndex: 'address', key: '8' },\n {\n title: 'Action',\n key: 'operation',\n fixed: 'right',\n width: 100,\n scopedSlots: { customRender: 'action' },\n },\n ];\n\n const data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 40,\n address: 'London Park',\n },\n ];\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("a-table",{attrs:{columns:t.columns,dataSource:t.data,scroll:{x:1300}},scopedSlots:t._u([{key:"action",fn:function(s){return a("a",{attrs:{href:"javascript:;"}},[t._v("action")])}}])})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"固定列"}},[t._v("固定列 "),a("a",{staticClass:"anchor",attrs:{href:"#固定列"}},[t._v("#")])]),t._v(" "),a("p",[t._v("对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 "),a("code",[t._v("scroll.x")]),t._v(" 配合使用。")]),t._v(" "),a("blockquote",[a("p",[t._v("若列头与内容不对齐或出现列重复，请指定"),a("strong",[t._v("固定列")]),t._v("的宽度 "),a("code",[t._v("width")]),t._v("。"),a("br"),t._v("\n建议指定 "),a("code",[t._v("scroll.x")]),t._v(" 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 "),a("code",[t._v("scroll.x")]),t._v("。"),a("br")])])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Fixed-Columns"}},[t._v("Fixed Columns "),a("a",{staticClass:"anchor",attrs:{href:"#Fixed-Columns"}},[t._v("#")])]),t._v(" "),a("p",[t._v("To fix some columns and scroll inside other columns, and you must set "),a("code",[t._v("scroll.x")]),t._v(" meanwhile.")]),t._v(" "),a("blockquote",[a("p",[t._v("Specify the width of columns if header and cell do not align properly.(Leave one column at least without width to fit fluid layout)"),a("br"),t._v("\nA fixed value which is greater than table width for "),a("code",[t._v("scroll.x")]),t._v(" is recommended. The sum of unfixed columns should not greater than "),a("code",[t._v("scroll.x")]),t._v("."),a("br")])])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":scroll")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"{ x: 1300 }"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"action"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),t._v("action"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Full Name'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("100")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("fixed")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'left'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Age'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("100")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("fixed")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'left'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Column 1'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'1'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Column 2'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'2'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Column 3'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'3'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Column 4'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'4'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Column 5'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'5'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Column 6'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'6'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Column 7'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'7'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Column 8'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'8'")]),t._v(" },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Action'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'operation'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("fixed")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'right'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("100")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'action'")]),t._v(" },\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'1'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'John Brown'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'2'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim Green'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("40")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London Park'")]),t._v(",\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n columns,\n };\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};jt._withStripped=!0;var gt=[{title:"Full Name",width:100,dataIndex:"name",key:"name",fixed:"left"},{title:"Age",width:100,dataIndex:"age",key:"age",fixed:"left"},{title:"Column 1",dataIndex:"address",key:"1"},{title:"Column 2",dataIndex:"address",key:"2"},{title:"Column 3",dataIndex:"address",key:"3"},{title:"Column 4",dataIndex:"address",key:"4"},{title:"Column 5",dataIndex:"address",key:"5"},{title:"Column 6",dataIndex:"address",key:"6"},{title:"Column 7",dataIndex:"address",key:"7"},{title:"Column 8",dataIndex:"address",key:"8"},{title:"Action",key:"operation",fixed:"right",width:100,scopedSlots:{customRender:"action"}}],ft=[{key:"1",name:"John Brown",age:32,address:"New York Park"},{key:"2",name:"Jim Green",age:40,address:"London Park"}],yt={data:function(){return{data:ft,columns:gt}}},kt=Object(v.a)(yt,jt,[],!1,null,null,null);kt.options.__file="components/table/demo/fixed-columns.md";var bt=kt.exports,wt=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-table :columns="columns" :dataSource="data" :pagination="{ pageSize: 50 }" :scroll="{ y: 240 }"/>\n',script:"\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n width: 150,\n },\n {\n title: 'Age',\n dataIndex: 'age',\n width: 150,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n ];\n\n const data = [];\n for (let i = 0; i < 100; i++) {\n data.push({\n key: i,\n name: `Edward King ${i}`,\n age: 32,\n address: `London, Park Lane no. ${i}`,\n });\n }\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n };\n",style:null,us:"\n#### Fixed Header\nDisplay large amounts of data in scrollable view.\n> Specify width of columns if header and cell do not align properly.(Leave one column at least without width to fit fluid layout)\n",cn:"\n#### 固定表头\n方便一页内展示大量数据。\n需要指定 column 的 `width` 属性，否则列头和内容可能不对齐。（建议留一列不设宽度以适应弹性布局）\n",sourceCode:"<template>\n <a-table\n :columns=\"columns\"\n :dataSource=\"data\"\n :pagination=\"{ pageSize: 50 }\"\n :scroll=\"{ y: 240 }\"\n />\n</template>\n<script>\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n width: 150,\n },\n {\n title: 'Age',\n dataIndex: 'age',\n width: 150,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n ];\n\n const data = [];\n for (let i = 0; i < 100; i++) {\n data.push({\n key: i,\n name: `Edward King ${i}`,\n age: 32,\n address: `London, Park Lane no. ${i}`,\n });\n }\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("a-table",{attrs:{columns:t.columns,dataSource:t.data,pagination:{pageSize:50},scroll:{y:240}}})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"固定表头"}},[t._v("固定表头 "),a("a",{staticClass:"anchor",attrs:{href:"#固定表头"}},[t._v("#")])]),t._v(" "),a("p",[t._v("方便一页内展示大量数据。"),a("br"),t._v("\n需要指定 column 的 "),a("code",[t._v("width")]),t._v(" 属性，否则列头和内容可能不对齐。（建议留一列不设宽度以适应弹性布局）"),a("br")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Fixed-Header"}},[t._v("Fixed Header "),a("a",{staticClass:"anchor",attrs:{href:"#Fixed-Header"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Display large amounts of data in scrollable view.")]),t._v(" "),a("blockquote",[a("p",[t._v("Specify width of columns if header and cell do not align properly.(Leave one column at least without width to fit fluid layout)")])])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":pagination")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"{ pageSize: 50 }"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":scroll")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"{ y: 240 }"')]),t._v("\n />")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("150")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("150")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),a("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < "),a("span",{staticClass:"hljs-number"},[t._v("100")]),t._v("; i++) {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": i,\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("`Edward King "),a("span",{staticClass:"hljs-subst"},[t._v("${i}")]),t._v("`")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("`London, Park Lane no. "),a("span",{staticClass:"hljs-subst"},[t._v("${i}")]),t._v("`")]),t._v(",\n });\n }\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n columns,\n };\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};wt._withStripped=!0;for(var xt=[{title:"Name",dataIndex:"name",width:150},{title:"Age",dataIndex:"age",width:150},{title:"Address",dataIndex:"address"}],St=[],It=0;It<100;It++)St.push({key:It,name:"Edward King "+It,age:32,address:"London, Park Lane no. "+It});var Rt={data:function(){return{data:St,columns:xt}}},Nt=Object(v.a)(Rt,wt,[],!1,null,null,null);Nt.options.__file="components/table/demo/fixed-header.md";var Lt=Nt.exports,Pt=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-table :columns="columns" :dataSource="data" bordered="" size="middle" :scroll="{ x: \'130%\', y: 240 }"/>\n',script:"\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n width: 100,\n fixed: 'left',\n filters: [\n {\n text: 'Joe',\n value: 'Joe',\n },\n {\n text: 'John',\n value: 'John',\n },\n ],\n onFilter: (value, record) => record.name.indexOf(value) === 0,\n },\n {\n title: 'Other',\n children: [\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n width: 200,\n sorter: (a, b) => a.age - b.age,\n },\n {\n title: 'Address',\n children: [\n {\n title: 'Street',\n dataIndex: 'street',\n key: 'street',\n width: 200,\n },\n {\n title: 'Block',\n children: [\n {\n title: 'Building',\n dataIndex: 'building',\n key: 'building',\n width: 100,\n },\n {\n title: 'Door No.',\n dataIndex: 'number',\n key: 'number',\n width: 100,\n },\n ],\n },\n ],\n },\n ],\n },\n {\n title: 'Company',\n children: [\n {\n title: 'Company Address',\n dataIndex: 'companyAddress',\n key: 'companyAddress',\n },\n {\n title: 'Company Name',\n dataIndex: 'companyName',\n key: 'companyName',\n },\n ],\n },\n {\n title: 'Gender',\n dataIndex: 'gender',\n key: 'gender',\n width: 80,\n fixed: 'right',\n },\n ];\n\n const data = [];\n for (let i = 0; i < 100; i++) {\n data.push({\n key: i,\n name: 'John Brown',\n age: i + 1,\n street: 'Lake Park',\n building: 'C',\n number: 2035,\n companyAddress: 'Lake Street 42',\n companyName: 'SoftLake Co',\n gender: 'M',\n });\n }\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n };\n",style:null,us:"\n#### Grouping table head\nGroup table head with `columns[n].children`.\n",cn:"\n#### 表头分组\n`columns[n]` 可以内嵌 `children`，以渲染分组表头。\n",sourceCode:"<template>\n <a-table\n :columns=\"columns\"\n :dataSource=\"data\"\n bordered\n size=\"middle\"\n :scroll=\"{ x: '130%', y: 240 }\"\n />\n</template>\n<script>\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n width: 100,\n fixed: 'left',\n filters: [\n {\n text: 'Joe',\n value: 'Joe',\n },\n {\n text: 'John',\n value: 'John',\n },\n ],\n onFilter: (value, record) => record.name.indexOf(value) === 0,\n },\n {\n title: 'Other',\n children: [\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n width: 200,\n sorter: (a, b) => a.age - b.age,\n },\n {\n title: 'Address',\n children: [\n {\n title: 'Street',\n dataIndex: 'street',\n key: 'street',\n width: 200,\n },\n {\n title: 'Block',\n children: [\n {\n title: 'Building',\n dataIndex: 'building',\n key: 'building',\n width: 100,\n },\n {\n title: 'Door No.',\n dataIndex: 'number',\n key: 'number',\n width: 100,\n },\n ],\n },\n ],\n },\n ],\n },\n {\n title: 'Company',\n children: [\n {\n title: 'Company Address',\n dataIndex: 'companyAddress',\n key: 'companyAddress',\n },\n {\n title: 'Company Name',\n dataIndex: 'companyName',\n key: 'companyName',\n },\n ],\n },\n {\n title: 'Gender',\n dataIndex: 'gender',\n key: 'gender',\n width: 80,\n fixed: 'right',\n },\n ];\n\n const data = [];\n for (let i = 0; i < 100; i++) {\n data.push({\n key: i,\n name: 'John Brown',\n age: i + 1,\n street: 'Lake Park',\n building: 'C',\n number: 2035,\n companyAddress: 'Lake Street 42',\n companyName: 'SoftLake Co',\n gender: 'M',\n });\n }\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("a-table",{attrs:{columns:t.columns,dataSource:t.data,bordered:"",size:"middle",scroll:{x:"130%",y:240}}})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"表头分组"}},[t._v("表头分组 "),a("a",{staticClass:"anchor",attrs:{href:"#表头分组"}},[t._v("#")])]),t._v(" "),a("p",[a("code",[t._v("columns[n]")]),t._v(" 可以内嵌 "),a("code",[t._v("children")]),t._v("，以渲染分组表头。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Grouping-table-head"}},[t._v("Grouping table head "),a("a",{staticClass:"anchor",attrs:{href:"#Grouping-table-head"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Group table head with "),a("code",[t._v("columns[n].children")]),t._v(".")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("bordered")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("size")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"middle"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":scroll")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v("\"{ x: '130%', y: 240 }\"")]),t._v("\n />")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("100")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("fixed")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'left'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("filters")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Joe'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Joe'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'John'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'John'")]),t._v(",\n },\n ],\n "),a("span",{staticClass:"hljs-attr"},[t._v("onFilter")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("value, record")]),t._v(") =>")]),t._v(" record.name.indexOf(value) === "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Other'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("200")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("sorter")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("a, b")]),t._v(") =>")]),t._v(" a.age - b.age,\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Street'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'street'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'street'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("200")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Block'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Building'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'building'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'building'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("100")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Door No.'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'number'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'number'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("100")]),t._v(",\n },\n ],\n },\n ],\n },\n ],\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Company'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Company Address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'companyAddress'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'companyAddress'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Company Name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'companyName'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'companyName'")]),t._v(",\n },\n ],\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Gender'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'gender'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'gender'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("80")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("fixed")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'right'")]),t._v(",\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),a("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < "),a("span",{staticClass:"hljs-number"},[t._v("100")]),t._v("; i++) {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": i,\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'John Brown'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": i + "),a("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("street")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Lake Park'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("building")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'C'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("number")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("2035")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("companyAddress")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Lake Street 42'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("companyName")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'SoftLake Co'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("gender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'M'")]),t._v(",\n });\n }\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n columns,\n };\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};Pt._withStripped=!0;for(var At=[{title:"Name",dataIndex:"name",key:"name",width:100,fixed:"left",filters:[{text:"Joe",value:"Joe"},{text:"John",value:"John"}],onFilter:function(t,s){return 0===s.name.indexOf(t)}},{title:"Other",children:[{title:"Age",dataIndex:"age",key:"age",width:200,sorter:function(t,s){return t.age-s.age}},{title:"Address",children:[{title:"Street",dataIndex:"street",key:"street",width:200},{title:"Block",children:[{title:"Building",dataIndex:"building",key:"building",width:100},{title:"Door No.",dataIndex:"number",key:"number",width:100}]}]}]},{title:"Company",children:[{title:"Company Address",dataIndex:"companyAddress",key:"companyAddress"},{title:"Company Name",dataIndex:"companyName",key:"companyName"}]},{title:"Gender",dataIndex:"gender",key:"gender",width:80,fixed:"right"}],Dt=[],Tt=0;Tt<100;Tt++)Dt.push({key:Tt,name:"John Brown",age:Tt+1,street:"Lake Park",building:"C",number:2035,companyAddress:"Lake Street 42",companyName:"SoftLake Co",gender:"M"});var Et={data:function(){return{data:Dt,columns:At}}},Jt=Object(v.a)(Et,Pt,[],!1,null,null,null);Jt.options.__file="components/table/demo/grouping-columns.md";var Ot=Jt.exports,Ft=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-table :columns="columns" :dataSource="data" @change="onChange"/>\n',script:"\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n filters: [\n {\n text: 'Joe',\n value: 'Joe',\n },\n {\n text: 'Jim',\n value: 'Jim',\n },\n {\n text: 'Submenu',\n value: 'Submenu',\n children: [\n {\n text: 'Green',\n value: 'Green',\n },\n {\n text: 'Black',\n value: 'Black',\n },\n ],\n },\n ],\n // specify the condition of filtering result\n // here is that finding the name started with `value`\n onFilter: (value, record) => record.name.indexOf(value) === 0,\n sorter: (a, b) => a.name.length - b.name.length,\n sortDirections: ['descend'],\n },\n {\n title: 'Age',\n dataIndex: 'age',\n sorter: (a, b) => a.age - b.age,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n filters: [\n {\n text: 'London',\n value: 'London',\n },\n {\n text: 'New York',\n value: 'New York',\n },\n ],\n filterMultiple: false,\n onFilter: (value, record) => record.address.indexOf(value) === 0,\n sorter: (a, b) => a.address.length - b.address.length,\n sortDirections: ['descend', 'ascend'],\n },\n ];\n\n const data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'Jim Red',\n age: 32,\n address: 'London No. 2 Lake Park',\n },\n ];\n\n function onChange(pagination, filters, sorter) {\n console.log('params', pagination, filters, sorter);\n }\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n methods: {\n onChange,\n },\n };\n",style:null,us:"\n#### Filter and sorter\nUse `filters` to generate filter menu in columns, `onFilter` to determine filtered result, and `filterMultiple` to indicate whether it's multiple or single selection.\nUse `sorter` to make a column sortable. `sorter` can be a function of the type `function(a, b) { ... }` for sorting data locally.\n`sortDirections: ['ascend' | 'descend']` defines available sort methods for each columns, effective for all columns when set on table props.\nUses `defaultSortOrder` to make a column sorted by default.\nIf a `sortOrder` or `defaultSortOrder` is specified with the value `ascend` or `descend`, you can access this value from within the function passed to the `sorter` as explained above. Such a function can take the form: `function(a, b, sortOrder) { ... }`.\n",cn:"\n#### 筛选和排序\n对某一列数据进行筛选，使用列的 `filters` 属性来指定需要筛选菜单的列，`onFilter` 用于筛选当前数据，`filterMultiple` 用于指定多选和单选。\n对某一列数据进行排序，通过指定列的 `sorter` 函数即可启动排序按钮。`sorter: function(rowA, rowB) { ... }`， rowA、rowB 为比较的两个行数据。\n`sortDirections: ['ascend' | 'descend']`改变每列可用的排序方式，切换排序时按数组内容依次切换，设置在table props上时对所有列生效。\n使用 `defaultSortOrder` 属性，设置列的默认排序顺序。\n",sourceCode:"<template>\n <a-table :columns=\"columns\" :dataSource=\"data\" @change=\"onChange\" />\n</template>\n<script>\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n filters: [\n {\n text: 'Joe',\n value: 'Joe',\n },\n {\n text: 'Jim',\n value: 'Jim',\n },\n {\n text: 'Submenu',\n value: 'Submenu',\n children: [\n {\n text: 'Green',\n value: 'Green',\n },\n {\n text: 'Black',\n value: 'Black',\n },\n ],\n },\n ],\n // specify the condition of filtering result\n // here is that finding the name started with `value`\n onFilter: (value, record) => record.name.indexOf(value) === 0,\n sorter: (a, b) => a.name.length - b.name.length,\n sortDirections: ['descend'],\n },\n {\n title: 'Age',\n dataIndex: 'age',\n sorter: (a, b) => a.age - b.age,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n filters: [\n {\n text: 'London',\n value: 'London',\n },\n {\n text: 'New York',\n value: 'New York',\n },\n ],\n filterMultiple: false,\n onFilter: (value, record) => record.address.indexOf(value) === 0,\n sorter: (a, b) => a.address.length - b.address.length,\n sortDirections: ['descend', 'ascend'],\n },\n ];\n\n const data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'Jim Red',\n age: 32,\n address: 'London No. 2 Lake Park',\n },\n ];\n\n function onChange(pagination, filters, sorter) {\n console.log('params', pagination, filters, sorter);\n }\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n methods: {\n onChange,\n },\n };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("a-table",{attrs:{columns:t.columns,dataSource:t.data},on:{change:t.onChange}})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"筛选和排序"}},[t._v("筛选和排序 "),a("a",{staticClass:"anchor",attrs:{href:"#筛选和排序"}},[t._v("#")])]),t._v(" "),a("p",[t._v("对某一列数据进行筛选，使用列的 "),a("code",[t._v("filters")]),t._v(" 属性来指定需要筛选菜单的列，"),a("code",[t._v("onFilter")]),t._v(" 用于筛选当前数据，"),a("code",[t._v("filterMultiple")]),t._v(" 用于指定多选和单选。"),a("br"),t._v("\n对某一列数据进行排序，通过指定列的 "),a("code",[t._v("sorter")]),t._v(" 函数即可启动排序按钮。"),a("code",[t._v("sorter: function(rowA, rowB) { ... }")]),t._v("， rowA、rowB 为比较的两个行数据。"),a("br"),t._v(" "),a("code",[t._v("sortDirections: ['ascend' | 'descend']")]),t._v("改变每列可用的排序方式，切换排序时按数组内容依次切换，设置在table props上时对所有列生效。"),a("br"),t._v("\n使用 "),a("code",[t._v("defaultSortOrder")]),t._v(" 属性，设置列的默认排序顺序。"),a("br"),a("br"),a("br")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Filter-and-sorter"}},[t._v("Filter and sorter "),a("a",{staticClass:"anchor",attrs:{href:"#Filter-and-sorter"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Use "),a("code",[t._v("filters")]),t._v(" to generate filter menu in columns, "),a("code",[t._v("onFilter")]),t._v(" to determine filtered result, and "),a("code",[t._v("filterMultiple")]),t._v(" to indicate whether it's multiple or single selection."),a("br"),t._v("\nUse "),a("code",[t._v("sorter")]),t._v(" to make a column sortable. "),a("code",[t._v("sorter")]),t._v(" can be a function of the type "),a("code",[t._v("function(a, b) { ... }")]),t._v(" for sorting data locally."),a("br"),t._v(" "),a("code",[t._v("sortDirections: ['ascend' | 'descend']")]),t._v(" defines available sort methods for each columns, effective for all columns when set on table props."),a("br"),t._v("\nUses "),a("code",[t._v("defaultSortOrder")]),t._v(" to make a column sorted by default."),a("br"),t._v("\nIf a "),a("code",[t._v("sortOrder")]),t._v(" or "),a("code",[t._v("defaultSortOrder")]),t._v(" is specified with the value "),a("code",[t._v("ascend")]),t._v(" or "),a("code",[t._v("descend")]),t._v(", you can access this value from within the function passed to the "),a("code",[t._v("sorter")]),t._v(" as explained above. Such a function can take the form: "),a("code",[t._v("function(a, b, sortOrder) { ... }")]),t._v("."),a("br"),a("br"),a("br"),a("br")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v(" />")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("filters")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Joe'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Joe'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Submenu'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Submenu'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Green'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Green'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Black'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Black'")]),t._v(",\n },\n ],\n },\n ],\n "),a("span",{staticClass:"hljs-comment"},[t._v("// specify the condition of filtering result")]),t._v("\n "),a("span",{staticClass:"hljs-comment"},[t._v("// here is that finding the name started with `value`")]),t._v("\n onFilter: "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("value, record")]),t._v(") =>")]),t._v(" record.name.indexOf(value) === "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("sorter")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("a, b")]),t._v(") =>")]),t._v(" a.name.length - b.name.length,\n "),a("span",{staticClass:"hljs-attr"},[t._v("sortDirections")]),t._v(": ["),a("span",{staticClass:"hljs-string"},[t._v("'descend'")]),t._v("],\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("sorter")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("a, b")]),t._v(") =>")]),t._v(" a.age - b.age,\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("filters")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York'")]),t._v(",\n },\n ],\n "),a("span",{staticClass:"hljs-attr"},[t._v("filterMultiple")]),t._v(": "),a("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("onFilter")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("value, record")]),t._v(") =>")]),t._v(" record.address.indexOf(value) === "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("sorter")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("a, b")]),t._v(") =>")]),t._v(" a.address.length - b.address.length,\n "),a("span",{staticClass:"hljs-attr"},[t._v("sortDirections")]),t._v(": ["),a("span",{staticClass:"hljs-string"},[t._v("'descend'")]),t._v(", "),a("span",{staticClass:"hljs-string"},[t._v("'ascend'")]),t._v("],\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'1'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'John Brown'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'2'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim Green'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("42")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'3'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Joe Black'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Sidney No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'4'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim Red'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 2 Lake Park'")]),t._v(",\n },\n ];\n\n "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[t._v("function")]),t._v(" "),a("span",{staticClass:"hljs-title"},[t._v("onChange")]),t._v("("),a("span",{staticClass:"hljs-params"},[t._v("pagination, filters, sorter")]),t._v(") ")]),t._v("{\n "),a("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),a("span",{staticClass:"hljs-string"},[t._v("'params'")]),t._v(", pagination, filters, sorter);\n }\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n columns,\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n onChange,\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};Ft._withStripped=!0;var Kt=[{title:"Name",dataIndex:"name",filters:[{text:"Joe",value:"Joe"},{text:"Jim",value:"Jim"},{text:"Submenu",value:"Submenu",children:[{text:"Green",value:"Green"},{text:"Black",value:"Black"}]}],onFilter:function(t,s){return 0===s.name.indexOf(t)},sorter:function(t,s){return t.name.length-s.name.length},sortDirections:["descend"]},{title:"Age",dataIndex:"age",sorter:function(t,s){return t.age-s.age}},{title:"Address",dataIndex:"address",filters:[{text:"London",value:"London"},{text:"New York",value:"New York"}],filterMultiple:!1,onFilter:function(t,s){return 0===s.address.indexOf(t)},sorter:function(t,s){return t.address.length-s.address.length},sortDirections:["descend","ascend"]}],Bt=[{key:"1",name:"John Brown",age:32,address:"New York No. 1 Lake Park"},{key:"2",name:"Jim Green",age:42,address:"London No. 1 Lake Park"},{key:"3",name:"Joe Black",age:32,address:"Sidney No. 1 Lake Park"},{key:"4",name:"Jim Red",age:32,address:"London No. 2 Lake Park"}];var zt={data:function(){return{data:Bt,columns:Kt}},methods:{onChange:function(t,s,a){console.log("params",t,s,a)}}},Mt=Object(v.a)(zt,Ft,[],!1,null,null,null);Mt.options.__file="components/table/demo/head.md";var Gt=Mt.exports,Ht=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-table :columns="columns" :dataSource="data" class="components-table-demo-nested">\n <a slot="operation" slot-scope="text" href="javascript:;">Publish</a>\n <a-table slot="expandedRowRender" slot-scope="text" :columns="innerColumns" :dataSource="innerData" :pagination="false">\n <span slot="status" slot-scope="text"> <a-badge status="success"/>Finished </span>\n <span slot="operation" slot-scope="text" class="table-operation">\n <a href="javascript:;">Pause</a>\n <a href="javascript:;">Stop</a>\n <a-dropdown>\n <a-menu slot="overlay">\n <a-menu-item>\n Action 1\n </a-menu-item>\n <a-menu-item>\n Action 2\n </a-menu-item>\n </a-menu>\n <a href="javascript:;"> More <a-icon type="down"/> </a>\n </a-dropdown>\n </span>\n </a-table>\n </a-table>\n',script:"\n const columns = [\n { title: 'Name', dataIndex: 'name', key: 'name' },\n { title: 'Platform', dataIndex: 'platform', key: 'platform' },\n { title: 'Version', dataIndex: 'version', key: 'version' },\n { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },\n { title: 'Creator', dataIndex: 'creator', key: 'creator' },\n { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },\n { title: 'Action', key: 'operation', scopedSlots: { customRender: 'operation' } },\n ];\n\n const data = [];\n for (let i = 0; i < 3; ++i) {\n data.push({\n key: i,\n name: 'Screem',\n platform: 'iOS',\n version: '10.3.4.5654',\n upgradeNum: 500,\n creator: 'Jack',\n createdAt: '2014-12-24 23:12:00',\n });\n }\n\n const innerColumns = [\n { title: 'Date', dataIndex: 'date', key: 'date' },\n { title: 'Name', dataIndex: 'name', key: 'name' },\n { title: 'Status', key: 'state', scopedSlots: { customRender: 'status' } },\n { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },\n {\n title: 'Action',\n dataIndex: 'operation',\n key: 'operation',\n scopedSlots: { customRender: 'operation' },\n },\n ];\n\n const innerData = [];\n for (let i = 0; i < 3; ++i) {\n innerData.push({\n key: i,\n date: '2014-12-24 23:12:00',\n name: 'This is production name',\n upgradeNum: 'Upgraded: 56',\n });\n }\n\n export default {\n data() {\n return {\n data,\n columns,\n innerColumns,\n innerData,\n };\n },\n };\n",style:null,us:"\n#### Nested tables\nShowing more detailed info of every row.\n",cn:"\n#### 嵌套子表格\n展示每行数据更详细的信息。\n",sourceCode:"<template>\n <a-table :columns=\"columns\" :dataSource=\"data\" class=\"components-table-demo-nested\">\n <a slot=\"operation\" slot-scope=\"text\" href=\"javascript:;\">Publish</a>\n <a-table\n slot=\"expandedRowRender\"\n slot-scope=\"text\"\n :columns=\"innerColumns\"\n :dataSource=\"innerData\"\n :pagination=\"false\"\n >\n <span slot=\"status\" slot-scope=\"text\"> <a-badge status=\"success\" />Finished </span>\n <span slot=\"operation\" slot-scope=\"text\" class=\"table-operation\">\n <a href=\"javascript:;\">Pause</a>\n <a href=\"javascript:;\">Stop</a>\n <a-dropdown>\n <a-menu slot=\"overlay\">\n <a-menu-item>\n Action 1\n </a-menu-item>\n <a-menu-item>\n Action 2\n </a-menu-item>\n </a-menu>\n <a href=\"javascript:;\"> More <a-icon type=\"down\" /> </a>\n </a-dropdown>\n </span>\n </a-table>\n </a-table>\n</template>\n<script>\n const columns = [\n { title: 'Name', dataIndex: 'name', key: 'name' },\n { title: 'Platform', dataIndex: 'platform', key: 'platform' },\n { title: 'Version', dataIndex: 'version', key: 'version' },\n { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },\n { title: 'Creator', dataIndex: 'creator', key: 'creator' },\n { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },\n { title: 'Action', key: 'operation', scopedSlots: { customRender: 'operation' } },\n ];\n\n const data = [];\n for (let i = 0; i < 3; ++i) {\n data.push({\n key: i,\n name: 'Screem',\n platform: 'iOS',\n version: '10.3.4.5654',\n upgradeNum: 500,\n creator: 'Jack',\n createdAt: '2014-12-24 23:12:00',\n });\n }\n\n const innerColumns = [\n { title: 'Date', dataIndex: 'date', key: 'date' },\n { title: 'Name', dataIndex: 'name', key: 'name' },\n { title: 'Status', key: 'state', scopedSlots: { customRender: 'status' } },\n { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },\n {\n title: 'Action',\n dataIndex: 'operation',\n key: 'operation',\n scopedSlots: { customRender: 'operation' },\n },\n ];\n\n const innerData = [];\n for (let i = 0; i < 3; ++i) {\n innerData.push({\n key: i,\n date: '2014-12-24 23:12:00',\n name: 'This is production name',\n upgradeNum: 'Upgraded: 56',\n });\n }\n\n export default {\n data() {\n return {\n data,\n columns,\n innerColumns,\n innerData,\n };\n },\n };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("a-table",{staticClass:"components-table-demo-nested",attrs:{columns:t.columns,dataSource:t.data},scopedSlots:t._u([{key:"operation",fn:function(s){return a("a",{attrs:{href:"javascript:;"}},[t._v("Publish")])}},{key:"expandedRowRender",fn:function(s){return a("a-table",{attrs:{columns:t.innerColumns,dataSource:t.innerData,pagination:!1},scopedSlots:t._u([{key:"status",fn:function(s){return a("span",{},[a("a-badge",{attrs:{status:"success"}}),t._v("Finished ")],1)}},{key:"operation",fn:function(s){return a("span",{staticClass:"table-operation"},[a("a",{attrs:{href:"javascript:;"}},[t._v("Pause")]),t._v(" "),a("a",{attrs:{href:"javascript:;"}},[t._v("Stop")]),t._v(" "),a("a-dropdown",[a("a-menu",{attrs:{slot:"overlay"},slot:"overlay"},[a("a-menu-item",[t._v("\n Action 1\n ")]),t._v(" "),a("a-menu-item",[t._v("\n Action 2\n ")])],1),t._v(" "),a("a",{attrs:{href:"javascript:;"}},[t._v(" More "),a("a-icon",{attrs:{type:"down"}})],1)],1)],1)}}])})}}])})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"嵌套子表格"}},[t._v("嵌套子表格 "),a("a",{staticClass:"anchor",attrs:{href:"#嵌套子表格"}},[t._v("#")])]),t._v(" "),a("p",[t._v("展示每行数据更详细的信息。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Nested-tables"}},[t._v("Nested tables "),a("a",{staticClass:"anchor",attrs:{href:"#Nested-tables"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Showing more detailed info of every row.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"components-table-demo-nested"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"operation"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),t._v("Publish"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"expandedRowRender"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"innerColumns"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"innerData"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":pagination")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"false"')]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"status"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text"')]),t._v(">")]),t._v(" "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-badge")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("status")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"success"')]),t._v(" />")]),t._v("Finished "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"operation"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"table-operation"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),t._v("Pause"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),t._v("Stop"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-dropdown")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-menu")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"overlay"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-menu-item")]),t._v(">")]),t._v("\n Action 1\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-menu-item")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-menu-item")]),t._v(">")]),t._v("\n Action 2\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-menu-item")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-menu")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),t._v(" More "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"down"')]),t._v(" />")]),t._v(" "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-dropdown")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Name'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Platform'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'platform'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'platform'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Version'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'version'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'version'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Upgraded'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'upgradeNum'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'upgradeNum'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Creator'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'creator'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'creator'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Date'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'createdAt'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'createdAt'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Action'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'operation'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'operation'")]),t._v(" } },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),a("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < "),a("span",{staticClass:"hljs-number"},[t._v("3")]),t._v("; ++i) {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": i,\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Screem'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("platform")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'iOS'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("version")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'10.3.4.5654'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("upgradeNum")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("500")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("creator")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jack'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("createdAt")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'2014-12-24 23:12:00'")]),t._v(",\n });\n }\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" innerColumns = [\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Date'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'date'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'date'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Name'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Status'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'state'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'status'")]),t._v(" } },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Upgrade Status'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'upgradeNum'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'upgradeNum'")]),t._v(" },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Action'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'operation'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'operation'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'operation'")]),t._v(" },\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" innerData = [];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),a("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < "),a("span",{staticClass:"hljs-number"},[t._v("3")]),t._v("; ++i) {\n innerData.push({\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": i,\n "),a("span",{staticClass:"hljs-attr"},[t._v("date")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'2014-12-24 23:12:00'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'This is production name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("upgradeNum")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Upgraded: 56'")]),t._v(",\n });\n }\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n columns,\n innerColumns,\n innerData,\n };\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};Ht._withStripped=!0;for(var $t=[{title:"Name",dataIndex:"name",key:"name"},{title:"Platform",dataIndex:"platform",key:"platform"},{title:"Version",dataIndex:"version",key:"version"},{title:"Upgraded",dataIndex:"upgradeNum",key:"upgradeNum"},{title:"Creator",dataIndex:"creator",key:"creator"},{title:"Date",dataIndex:"createdAt",key:"createdAt"},{title:"Action",key:"operation",scopedSlots:{customRender:"operation"}}],Yt=[],qt=0;qt<3;++qt)Yt.push({key:qt,name:"Screem",platform:"iOS",version:"10.3.4.5654",upgradeNum:500,creator:"Jack",createdAt:"2014-12-24 23:12:00"});for(var Vt=[{title:"Date",dataIndex:"date",key:"date"},{title:"Name",dataIndex:"name",key:"name"},{title:"Status",key:"state",scopedSlots:{customRender:"status"}},{title:"Upgrade Status",dataIndex:"upgradeNum",key:"upgradeNum"},{title:"Action",dataIndex:"operation",key:"operation",scopedSlots:{customRender:"operation"}}],Wt=[],Ut=0;Ut<3;++Ut)Wt.push({key:Ut,date:"2014-12-24 23:12:00",name:"This is production name",upgradeNum:"Upgraded: 56"});var Xt={data:function(){return{data:Yt,columns:$t,innerColumns:Vt,innerData:Wt}}},Qt=Object(v.a)(Xt,Ht,[],!1,null,null,null);Qt.options.__file="components/table/demo/nested-table.md";var Zt=Qt.exports,ts=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <div class="table-operations">\n <a-button @click="setAgeSort">Sort age</a-button>\n <a-button @click="clearFilters">Clear filters</a-button>\n <a-button @click="clearAll">Clear filters and sorters</a-button>\n </div>\n <a-table :columns="columns" :dataSource="data" @change="handleChange"/>\n </div>\n',script:"\n const data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'Jim Red',\n age: 32,\n address: 'London No. 2 Lake Park',\n },\n ];\n\n export default {\n data() {\n return {\n data,\n filteredInfo: null,\n sortedInfo: null,\n };\n },\n computed: {\n columns() {\n let { sortedInfo, filteredInfo } = this;\n sortedInfo = sortedInfo || {};\n filteredInfo = filteredInfo || {};\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n filters: [{ text: 'Joe', value: 'Joe' }, { text: 'Jim', value: 'Jim' }],\n filteredValue: filteredInfo.name || null,\n onFilter: (value, record) => record.name.includes(value),\n sorter: (a, b) => a.name.length - b.name.length,\n sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n sorter: (a, b) => a.age - b.age,\n sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address',\n filters: [{ text: 'London', value: 'London' }, { text: 'New York', value: 'New York' }],\n filteredValue: filteredInfo.address || null,\n onFilter: (value, record) => record.address.includes(value),\n sorter: (a, b) => a.address.length - b.address.length,\n sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,\n },\n ];\n return columns;\n },\n },\n methods: {\n handleChange(pagination, filters, sorter) {\n console.log('Various parameters', pagination, filters, sorter);\n this.filteredInfo = filters;\n this.sortedInfo = sorter;\n },\n clearFilters() {\n this.filteredInfo = null;\n },\n clearAll() {\n this.filteredInfo = null;\n this.sortedInfo = null;\n },\n setAgeSort() {\n this.sortedInfo = {\n order: 'descend',\n columnKey: 'age',\n };\n },\n },\n };\n",style:null,us:"\n#### Reset filters and sorters\nControl filters and sorters by `filteredValue` and `sortOrder`.\n> 1. Defining `filteredValue` or `sortOrder` means that it is in the controlled mode.\n> 2. Make sure `sortOrder` is assigned for only one column.\n> 3. `column.key` is required.\n",cn:"\n#### 可控的筛选和排序\n使用受控属性对筛选和排序状态进行控制。\n> 1. columns 中定义了 filteredValue 和 sortOrder 属性即视为受控模式。\n> 2. 只支持同时对一列进行排序，请保证只有一列的 sortOrder 属性是生效的。\n> 3. 务必指定 `column.key`。\n",sourceCode:"<template>\n <div>\n <div class=\"table-operations\">\n <a-button @click=\"setAgeSort\">Sort age</a-button>\n <a-button @click=\"clearFilters\">Clear filters</a-button>\n <a-button @click=\"clearAll\">Clear filters and sorters</a-button>\n </div>\n <a-table :columns=\"columns\" :dataSource=\"data\" @change=\"handleChange\" />\n </div>\n</template>\n<script>\n const data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'Jim Red',\n age: 32,\n address: 'London No. 2 Lake Park',\n },\n ];\n\n export default {\n data() {\n return {\n data,\n filteredInfo: null,\n sortedInfo: null,\n };\n },\n computed: {\n columns() {\n let { sortedInfo, filteredInfo } = this;\n sortedInfo = sortedInfo || {};\n filteredInfo = filteredInfo || {};\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n filters: [{ text: 'Joe', value: 'Joe' }, { text: 'Jim', value: 'Jim' }],\n filteredValue: filteredInfo.name || null,\n onFilter: (value, record) => record.name.includes(value),\n sorter: (a, b) => a.name.length - b.name.length,\n sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n sorter: (a, b) => a.age - b.age,\n sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address',\n filters: [{ text: 'London', value: 'London' }, { text: 'New York', value: 'New York' }],\n filteredValue: filteredInfo.address || null,\n onFilter: (value, record) => record.address.includes(value),\n sorter: (a, b) => a.address.length - b.address.length,\n sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,\n },\n ];\n return columns;\n },\n },\n methods: {\n handleChange(pagination, filters, sorter) {\n console.log('Various parameters', pagination, filters, sorter);\n this.filteredInfo = filters;\n this.sortedInfo = sorter;\n },\n clearFilters() {\n this.filteredInfo = null;\n },\n clearAll() {\n this.filteredInfo = null;\n this.sortedInfo = null;\n },\n setAgeSort() {\n this.sortedInfo = {\n order: 'descend',\n columnKey: 'age',\n };\n },\n },\n };\n<\/script>\n<style scoped>\n .table-operations {\n margin-bottom: 16px;\n }\n\n .table-operations > button {\n margin-right: 8px;\n }\n</style>\n"}}},[a("template",{slot:"component"},[a("div",[a("div",{staticClass:"table-operations"},[a("a-button",{on:{click:t.setAgeSort}},[t._v("Sort age")]),t._v(" "),a("a-button",{on:{click:t.clearFilters}},[t._v("Clear filters")]),t._v(" "),a("a-button",{on:{click:t.clearAll}},[t._v("Clear filters and sorters")])],1),t._v(" "),a("a-table",{attrs:{columns:t.columns,dataSource:t.data},on:{change:t.handleChange}})],1)]),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"可控的筛选和排序"}},[t._v("可控的筛选和排序 "),a("a",{staticClass:"anchor",attrs:{href:"#可控的筛选和排序"}},[t._v("#")])]),t._v(" "),a("p",[t._v("使用受控属性对筛选和排序状态进行控制。")]),t._v(" "),a("blockquote",[a("ol",[a("li",[t._v("columns 中定义了 filteredValue 和 sortOrder 属性即视为受控模式。")]),t._v(" "),a("li",[t._v("只支持同时对一列进行排序，请保证只有一列的 sortOrder 属性是生效的。")]),t._v(" "),a("li",[t._v("务必指定 "),a("code",[t._v("column.key")]),t._v("。")])])])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Reset-filters-and-sorters"}},[t._v("Reset filters and sorters "),a("a",{staticClass:"anchor",attrs:{href:"#Reset-filters-and-sorters"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Control filters and sorters by "),a("code",[t._v("filteredValue")]),t._v(" and "),a("code",[t._v("sortOrder")]),t._v(".")]),t._v(" "),a("blockquote",[a("ol",[a("li",[t._v("Defining "),a("code",[t._v("filteredValue")]),t._v(" or "),a("code",[t._v("sortOrder")]),t._v(" means that it is in the controlled mode.")]),t._v(" "),a("li",[t._v("Make sure "),a("code",[t._v("sortOrder")]),t._v(" is assigned for only one column.")]),t._v(" "),a("li",[a("code",[t._v("column.key")]),t._v(" is required.")])])])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"table-operations"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"setAgeSort"')]),t._v(">")]),t._v("Sort age"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"clearFilters"')]),t._v(">")]),t._v("Clear filters"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"clearAll"')]),t._v(">")]),t._v("Clear filters and sorters"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"handleChange"')]),t._v(" />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'1'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'John Brown'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'2'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim Green'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("42")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'3'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Joe Black'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Sidney No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'4'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim Red'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 2 Lake Park'")]),t._v(",\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n "),a("span",{staticClass:"hljs-attr"},[t._v("filteredInfo")]),t._v(": "),a("span",{staticClass:"hljs-literal"},[t._v("null")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("sortedInfo")]),t._v(": "),a("span",{staticClass:"hljs-literal"},[t._v("null")]),t._v(",\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("computed")]),t._v(": {\n columns() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" { sortedInfo, filteredInfo } = "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(";\n sortedInfo = sortedInfo || {};\n filteredInfo = filteredInfo || {};\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("filters")]),t._v(": [{ "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Joe'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Joe'")]),t._v(" }, { "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim'")]),t._v(" }],\n "),a("span",{staticClass:"hljs-attr"},[t._v("filteredValue")]),t._v(": filteredInfo.name || "),a("span",{staticClass:"hljs-literal"},[t._v("null")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("onFilter")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("value, record")]),t._v(") =>")]),t._v(" record.name.includes(value),\n "),a("span",{staticClass:"hljs-attr"},[t._v("sorter")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("a, b")]),t._v(") =>")]),t._v(" a.name.length - b.name.length,\n "),a("span",{staticClass:"hljs-attr"},[t._v("sortOrder")]),t._v(": sortedInfo.columnKey === "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(" && sortedInfo.order,\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("sorter")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("a, b")]),t._v(") =>")]),t._v(" a.age - b.age,\n "),a("span",{staticClass:"hljs-attr"},[t._v("sortOrder")]),t._v(": sortedInfo.columnKey === "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(" && sortedInfo.order,\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("filters")]),t._v(": [{ "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London'")]),t._v(" }, { "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York'")]),t._v(" }],\n "),a("span",{staticClass:"hljs-attr"},[t._v("filteredValue")]),t._v(": filteredInfo.address || "),a("span",{staticClass:"hljs-literal"},[t._v("null")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("onFilter")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("value, record")]),t._v(") =>")]),t._v(" record.address.includes(value),\n "),a("span",{staticClass:"hljs-attr"},[t._v("sorter")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("a, b")]),t._v(") =>")]),t._v(" a.address.length - b.address.length,\n "),a("span",{staticClass:"hljs-attr"},[t._v("sortOrder")]),t._v(": sortedInfo.columnKey === "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(" && sortedInfo.order,\n },\n ];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" columns;\n },\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n handleChange(pagination, filters, sorter) {\n "),a("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),a("span",{staticClass:"hljs-string"},[t._v("'Various parameters'")]),t._v(", pagination, filters, sorter);\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".filteredInfo = filters;\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".sortedInfo = sorter;\n },\n clearFilters() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".filteredInfo = "),a("span",{staticClass:"hljs-literal"},[t._v("null")]),t._v(";\n },\n clearAll() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".filteredInfo = "),a("span",{staticClass:"hljs-literal"},[t._v("null")]),t._v(";\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".sortedInfo = "),a("span",{staticClass:"hljs-literal"},[t._v("null")]),t._v(";\n },\n setAgeSort() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".sortedInfo = {\n "),a("span",{staticClass:"hljs-attr"},[t._v("order")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'descend'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("columnKey")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n };\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("scoped")]),t._v(">")]),a("span",{staticClass:"css"},[t._v("\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".table-operations")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("margin-bottom")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("16px")]),t._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".table-operations")]),t._v(" > "),a("span",{staticClass:"hljs-selector-tag"},[t._v("button")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("margin-right")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("8px")]),t._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};ts._withStripped=!0;var ss=[{key:"1",name:"John Brown",age:32,address:"New York No. 1 Lake Park"},{key:"2",name:"Jim Green",age:42,address:"London No. 1 Lake Park"},{key:"3",name:"Joe Black",age:32,address:"Sidney No. 1 Lake Park"},{key:"4",name:"Jim Red",age:32,address:"London No. 2 Lake Park"}],as={data:function(){return{data:ss,filteredInfo:null,sortedInfo:null}},computed:{columns:function(){var t=this.sortedInfo,s=this.filteredInfo;t=t||{};var a=[{title:"Name",dataIndex:"name",key:"name",filters:[{text:"Joe",value:"Joe"},{text:"Jim",value:"Jim"}],filteredValue:(s=s||{}).name||null,onFilter:function(t,s){return s.name.includes(t)},sorter:function(t,s){return t.name.length-s.name.length},sortOrder:"name"===t.columnKey&&t.order},{title:"Age",dataIndex:"age",key:"age",sorter:function(t,s){return t.age-s.age},sortOrder:"age"===t.columnKey&&t.order},{title:"Address",dataIndex:"address",key:"address",filters:[{text:"London",value:"London"},{text:"New York",value:"New York"}],filteredValue:s.address||null,onFilter:function(t,s){return s.address.includes(t)},sorter:function(t,s){return t.address.length-s.address.length},sortOrder:"address"===t.columnKey&&t.order}];return a}},methods:{handleChange:function(t,s,a){console.log("Various parameters",t,s,a),this.filteredInfo=s,this.sortedInfo=a},clearFilters:function(){this.filteredInfo=null},clearAll:function(){this.filteredInfo=null,this.sortedInfo=null},setAgeSort:function(){this.sortedInfo={order:"descend",columnKey:"age"}}}},ns=(a(1347),Object(v.a)(as,ts,[],!1,null,"14cbb6b2",null));ns.options.__file="components/table/demo/reset-filter.md";var es=ns.exports,ls=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <div style="margin-bottom: 16px">\n <a-button type="primary" @click="start" :disabled="!hasSelected" :loading="loading">\n Reload\n </a-button>\n <span style="margin-left: 8px">\n <template v-if="hasSelected">\n {{`Selected ${selectedRowKeys.length} items`}}\n </template>\n </span>\n </div>\n <a-table :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :columns="columns" :dataSource="data"/>\n </div>\n',script:"\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n ];\n\n const data = [];\n for (let i = 0; i < 46; i++) {\n data.push({\n key: i,\n name: `Edward King ${i}`,\n age: 32,\n address: `London, Park Lane no. ${i}`,\n });\n }\n\n export default {\n data() {\n return {\n data,\n columns,\n selectedRowKeys: [], // Check here to configure the default column\n loading: false,\n };\n },\n computed: {\n hasSelected() {\n return this.selectedRowKeys.length > 0;\n },\n },\n methods: {\n start() {\n this.loading = true;\n // ajax request after empty completing\n setTimeout(() => {\n this.loading = false;\n this.selectedRowKeys = [];\n }, 1000);\n },\n onSelectChange(selectedRowKeys) {\n console.log('selectedRowKeys changed: ', selectedRowKeys);\n this.selectedRowKeys = selectedRowKeys;\n },\n },\n };\n",style:null,us:"\n#### Selection and operation\nTo perform operations and clear selections after selecting some rows, use `rowSelection.selectedRowKeys` to control selected rows.\n",cn:"\n#### 选择和操作\n选择后进行操作，完成后清空选择，通过 `rowSelection.selectedRowKeys` 来控制选中项。\n",sourceCode:'<template>\n <div>\n <div style="margin-bottom: 16px">\n <a-button type="primary" @click="start" :disabled="!hasSelected" :loading="loading">\n Reload\n </a-button>\n <span style="margin-left: 8px">\n <template v-if="hasSelected">\n {{`Selected ${selectedRowKeys.length} items`}}\n </template>\n </span>\n </div>\n <a-table\n :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"\n :columns="columns"\n :dataSource="data"\n />\n </div>\n</template>\n<script>\n const columns = [\n {\n title: \'Name\',\n dataIndex: \'name\',\n },\n {\n title: \'Age\',\n dataIndex: \'age\',\n },\n {\n title: \'Address\',\n dataIndex: \'address\',\n },\n ];\n\n const data = [];\n for (let i = 0; i < 46; i++) {\n data.push({\n key: i,\n name: `Edward King ${i}`,\n age: 32,\n address: `London, Park Lane no. ${i}`,\n });\n }\n\n export default {\n data() {\n return {\n data,\n columns,\n selectedRowKeys: [], // Check here to configure the default column\n loading: false,\n };\n },\n computed: {\n hasSelected() {\n return this.selectedRowKeys.length > 0;\n },\n },\n methods: {\n start() {\n this.loading = true;\n // ajax request after empty completing\n setTimeout(() => {\n this.loading = false;\n this.selectedRowKeys = [];\n }, 1000);\n },\n onSelectChange(selectedRowKeys) {\n console.log(\'selectedRowKeys changed: \', selectedRowKeys);\n this.selectedRowKeys = selectedRowKeys;\n },\n },\n };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("div",[a("div",{staticStyle:{"margin-bottom":"16px"}},[a("a-button",{attrs:{type:"primary",disabled:!t.hasSelected,loading:t.loading},on:{click:t.start}},[t._v("\n Reload\n ")]),t._v(" "),a("span",{staticStyle:{"margin-left":"8px"}},[t.hasSelected?[t._v("\n "+t._s("Selected "+t.selectedRowKeys.length+" items")+"\n ")]:t._e()],2)],1),t._v(" "),a("a-table",{attrs:{rowSelection:{selectedRowKeys:t.selectedRowKeys,onChange:t.onSelectChange},columns:t.columns,dataSource:t.data}})],1)]),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"选择和操作"}},[t._v("选择和操作 "),a("a",{staticClass:"anchor",attrs:{href:"#选择和操作"}},[t._v("#")])]),t._v(" "),a("p",[t._v("选择后进行操作，完成后清空选择，通过 "),a("code",[t._v("rowSelection.selectedRowKeys")]),t._v(" 来控制选中项。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Selection-and-operation"}},[t._v("Selection and operation "),a("a",{staticClass:"anchor",attrs:{href:"#Selection-and-operation"}},[t._v("#")])]),t._v(" "),a("p",[t._v("To perform operations and clear selections after selecting some rows, use "),a("code",[t._v("rowSelection.selectedRowKeys")]),t._v(" to control selected rows.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"margin-bottom: 16px"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"primary"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"start"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":disabled")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"!hasSelected"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":loading")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"loading"')]),t._v(">")]),t._v("\n Reload\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"margin-left: 8px"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("v-if")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"hasSelected"')]),t._v(">")]),t._v("\n "),a("span",[t._v("{{")]),t._v("`Selected ${selectedRowKeys.length} items`"),a("span",[t._v("}}")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":rowSelection")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v("\n />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),a("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < "),a("span",{staticClass:"hljs-number"},[t._v("46")]),t._v("; i++) {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": i,\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("`Edward King "),a("span",{staticClass:"hljs-subst"},[t._v("${i}")]),t._v("`")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("`London, Park Lane no. "),a("span",{staticClass:"hljs-subst"},[t._v("${i}")]),t._v("`")]),t._v(",\n });\n }\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n columns,\n "),a("span",{staticClass:"hljs-attr"},[t._v("selectedRowKeys")]),t._v(": [], "),a("span",{staticClass:"hljs-comment"},[t._v("// Check here to configure the default column")]),t._v("\n loading: "),a("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(",\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("computed")]),t._v(": {\n hasSelected() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".selectedRowKeys.length > "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(";\n },\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n start() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".loading = "),a("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(";\n "),a("span",{staticClass:"hljs-comment"},[t._v("// ajax request after empty completing")]),t._v("\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".loading = "),a("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".selectedRowKeys = [];\n }, "),a("span",{staticClass:"hljs-number"},[t._v("1000")]),t._v(");\n },\n onSelectChange(selectedRowKeys) {\n "),a("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),a("span",{staticClass:"hljs-string"},[t._v("'selectedRowKeys changed: '")]),t._v(", selectedRowKeys);\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".selectedRowKeys = selectedRowKeys;\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};ls._withStripped=!0;for(var rs=[{title:"Name",dataIndex:"name"},{title:"Age",dataIndex:"age"},{title:"Address",dataIndex:"address"}],is=[],os=0;os<46;os++)is.push({key:os,name:"Edward King "+os,age:32,address:"London, Park Lane no. "+os});var cs={data:function(){return{data:is,columns:rs,selectedRowKeys:[],loading:!1}},computed:{hasSelected:function(){return this.selectedRowKeys.length>0}},methods:{start:function(){var t=this;this.loading=!0,setTimeout((function(){t.loading=!1,t.selectedRowKeys=[]}),1e3)},onSelectChange:function(t){console.log("selectedRowKeys changed: ",t),this.selectedRowKeys=t}}},vs=Object(v.a)(cs,ls,[],!1,null,null,null);vs.options.__file="components/table/demo/row-selection-and-operation.md";var _s=vs.exports,ds=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-table :rowSelection="rowSelection" :columns="columns" :dataSource="data"/>\n',script:"\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n ];\n\n const data = [];\n for (let i = 0; i < 46; i++) {\n data.push({\n key: i,\n name: `Edward King ${i}`,\n age: 32,\n address: `London, Park Lane no. ${i}`,\n });\n }\n\n export default {\n data() {\n return {\n data,\n columns,\n selectedRowKeys: [], // Check here to configure the default column\n };\n },\n computed: {\n rowSelection() {\n const { selectedRowKeys } = this;\n return {\n selectedRowKeys,\n onChange: this.onSelectChange,\n hideDefaultSelections: true,\n selections: [\n {\n key: 'all-data',\n text: 'Select All Data',\n onSelect: () => {\n this.selectedRowKeys = [...Array(46).keys()]; // 0...45\n },\n },\n {\n key: 'odd',\n text: 'Select Odd Row',\n onSelect: changableRowKeys => {\n let newSelectedRowKeys = [];\n newSelectedRowKeys = changableRowKeys.filter((key, index) => {\n if (index % 2 !== 0) {\n return false;\n }\n return true;\n });\n this.selectedRowKeys = newSelectedRowKeys;\n },\n },\n {\n key: 'even',\n text: 'Select Even Row',\n onSelect: changableRowKeys => {\n let newSelectedRowKeys = [];\n newSelectedRowKeys = changableRowKeys.filter((key, index) => {\n if (index % 2 !== 0) {\n return true;\n }\n return false;\n });\n this.selectedRowKeys = newSelectedRowKeys;\n },\n },\n ],\n onSelection: this.onSelection,\n };\n },\n },\n methods: {\n onSelectChange(selectedRowKeys) {\n console.log('selectedRowKeys changed: ', selectedRowKeys);\n this.selectedRowKeys = selectedRowKeys;\n },\n },\n };\n",style:null,us:"\n#### Custom selection\nUse `rowSelection.selections` custom selections, default no select dropdown, show default selections via setting to `true`.\n",cn:"\n#### 自定义选择项\n通过 `rowSelection.selections` 自定义选择项，默认不显示下拉选项，设为 `true` 时显示默认选择项。\n",sourceCode:"<template>\n <a-table :rowSelection=\"rowSelection\" :columns=\"columns\" :dataSource=\"data\" />\n</template>\n<script>\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n ];\n\n const data = [];\n for (let i = 0; i < 46; i++) {\n data.push({\n key: i,\n name: `Edward King ${i}`,\n age: 32,\n address: `London, Park Lane no. ${i}`,\n });\n }\n\n export default {\n data() {\n return {\n data,\n columns,\n selectedRowKeys: [], // Check here to configure the default column\n };\n },\n computed: {\n rowSelection() {\n const { selectedRowKeys } = this;\n return {\n selectedRowKeys,\n onChange: this.onSelectChange,\n hideDefaultSelections: true,\n selections: [\n {\n key: 'all-data',\n text: 'Select All Data',\n onSelect: () => {\n this.selectedRowKeys = [...Array(46).keys()]; // 0...45\n },\n },\n {\n key: 'odd',\n text: 'Select Odd Row',\n onSelect: changableRowKeys => {\n let newSelectedRowKeys = [];\n newSelectedRowKeys = changableRowKeys.filter((key, index) => {\n if (index % 2 !== 0) {\n return false;\n }\n return true;\n });\n this.selectedRowKeys = newSelectedRowKeys;\n },\n },\n {\n key: 'even',\n text: 'Select Even Row',\n onSelect: changableRowKeys => {\n let newSelectedRowKeys = [];\n newSelectedRowKeys = changableRowKeys.filter((key, index) => {\n if (index % 2 !== 0) {\n return true;\n }\n return false;\n });\n this.selectedRowKeys = newSelectedRowKeys;\n },\n },\n ],\n onSelection: this.onSelection,\n };\n },\n },\n methods: {\n onSelectChange(selectedRowKeys) {\n console.log('selectedRowKeys changed: ', selectedRowKeys);\n this.selectedRowKeys = selectedRowKeys;\n },\n },\n };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("a-table",{attrs:{rowSelection:t.rowSelection,columns:t.columns,dataSource:t.data}})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"自定义选择项"}},[t._v("自定义选择项 "),a("a",{staticClass:"anchor",attrs:{href:"#自定义选择项"}},[t._v("#")])]),t._v(" "),a("p",[t._v("通过 "),a("code",[t._v("rowSelection.selections")]),t._v(" 自定义选择项，默认不显示下拉选项，设为 "),a("code",[t._v("true")]),t._v(" 时显示默认选择项。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Custom-selection"}},[t._v("Custom selection "),a("a",{staticClass:"anchor",attrs:{href:"#Custom-selection"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Use "),a("code",[t._v("rowSelection.selections")]),t._v(" custom selections, default no select dropdown, show default selections via setting to "),a("code",[t._v("true")]),t._v(".")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":rowSelection")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"rowSelection"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(" />")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),a("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < "),a("span",{staticClass:"hljs-number"},[t._v("46")]),t._v("; i++) {\n data.push({\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": i,\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("`Edward King "),a("span",{staticClass:"hljs-subst"},[t._v("${i}")]),t._v("`")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("`London, Park Lane no. "),a("span",{staticClass:"hljs-subst"},[t._v("${i}")]),t._v("`")]),t._v(",\n });\n }\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n columns,\n "),a("span",{staticClass:"hljs-attr"},[t._v("selectedRowKeys")]),t._v(": [], "),a("span",{staticClass:"hljs-comment"},[t._v("// Check here to configure the default column")]),t._v("\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("computed")]),t._v(": {\n rowSelection() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" { selectedRowKeys } = "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(";\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n selectedRowKeys,\n "),a("span",{staticClass:"hljs-attr"},[t._v("onChange")]),t._v(": "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".onSelectChange,\n "),a("span",{staticClass:"hljs-attr"},[t._v("hideDefaultSelections")]),t._v(": "),a("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("selections")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'all-data'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Select All Data'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("onSelect")]),t._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".selectedRowKeys = [...Array("),a("span",{staticClass:"hljs-number"},[t._v("46")]),t._v(").keys()]; "),a("span",{staticClass:"hljs-comment"},[t._v("// 0...45")]),t._v("\n },\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'odd'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Select Odd Row'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("onSelect")]),t._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("changableRowKeys")]),t._v(" =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" newSelectedRowKeys = [];\n newSelectedRowKeys = changableRowKeys.filter("),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("key, index")]),t._v(") =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (index % "),a("span",{staticClass:"hljs-number"},[t._v("2")]),t._v(" !== "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" "),a("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n }\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" "),a("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(";\n });\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".selectedRowKeys = newSelectedRowKeys;\n },\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'even'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Select Even Row'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("onSelect")]),t._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("changableRowKeys")]),t._v(" =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" newSelectedRowKeys = [];\n newSelectedRowKeys = changableRowKeys.filter("),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("key, index")]),t._v(") =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (index % "),a("span",{staticClass:"hljs-number"},[t._v("2")]),t._v(" !== "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" "),a("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(";\n }\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" "),a("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n });\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".selectedRowKeys = newSelectedRowKeys;\n },\n },\n ],\n "),a("span",{staticClass:"hljs-attr"},[t._v("onSelection")]),t._v(": "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".onSelection,\n };\n },\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n onSelectChange(selectedRowKeys) {\n "),a("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),a("span",{staticClass:"hljs-string"},[t._v("'selectedRowKeys changed: '")]),t._v(", selectedRowKeys);\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".selectedRowKeys = selectedRowKeys;\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};ds._withStripped=!0;for(var ps=[{title:"Name",dataIndex:"name"},{title:"Age",dataIndex:"age"},{title:"Address",dataIndex:"address"}],hs=[],us=0;us<46;us++)hs.push({key:us,name:"Edward King "+us,age:32,address:"London, Park Lane no. "+us});var ms={data:function(){return{data:hs,columns:ps,selectedRowKeys:[]}},computed:{rowSelection:function(){var t=this;return{selectedRowKeys:this.selectedRowKeys,onChange:this.onSelectChange,hideDefaultSelections:!0,selections:[{key:"all-data",text:"Select All Data",onSelect:function(){t.selectedRowKeys=[].concat(F()(Array(46).keys()))}},{key:"odd",text:"Select Odd Row",onSelect:function(s){var a;a=s.filter((function(t,s){return s%2==0})),t.selectedRowKeys=a}},{key:"even",text:"Select Even Row",onSelect:function(s){var a;a=s.filter((function(t,s){return s%2!=0})),t.selectedRowKeys=a}}],onSelection:this.onSelection}}},methods:{onSelectChange:function(t){console.log("selectedRowKeys changed: ",t),this.selectedRowKeys=t}}},Cs=Object(v.a)(ms,ds,[],!1,null,null,null);Cs.options.__file="components/table/demo/row-selection-custom.md";var js=Cs.exports,gs=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-table :rowSelection="rowSelection" :columns="columns" :dataSource="data">\n <a slot="name" slot-scope="text" href="javascript:;">{{text}}</a>\n </a-table>\n',script:"\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n scopedSlots: { customRender: 'name' },\n },\n {\n title: 'Age',\n dataIndex: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n ];\n const data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'Disabled User',\n age: 99,\n address: 'Sidney No. 1 Lake Park',\n },\n ];\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n computed: {\n rowSelection() {\n const { selectedRowKeys } = this;\n return {\n onChange: (selectedRowKeys, selectedRows) => {\n console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);\n },\n getCheckboxProps: record => ({\n props: {\n disabled: record.name === 'Disabled User', // Column configuration not to be checked\n name: record.name,\n },\n }),\n };\n },\n },\n };\n",style:null,us:"\n#### selection\nRows can be selectable by making first column as a selectable column.\n> selection happens when clicking checkbox defaultly.\n",cn:"\n#### 可选择\n第一列是联动的选择框。\n> 默认点击 checkbox 触发选择行为\n",sourceCode:"<template>\n <a-table :rowSelection=\"rowSelection\" :columns=\"columns\" :dataSource=\"data\">\n <a slot=\"name\" slot-scope=\"text\" href=\"javascript:;\">{{text}}</a>\n </a-table>\n</template>\n<script>\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n scopedSlots: { customRender: 'name' },\n },\n {\n title: 'Age',\n dataIndex: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n ];\n const data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'Disabled User',\n age: 99,\n address: 'Sidney No. 1 Lake Park',\n },\n ];\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n computed: {\n rowSelection() {\n const { selectedRowKeys } = this;\n return {\n onChange: (selectedRowKeys, selectedRows) => {\n console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);\n },\n getCheckboxProps: record => ({\n props: {\n disabled: record.name === 'Disabled User', // Column configuration not to be checked\n name: record.name,\n },\n }),\n };\n },\n },\n };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("a-table",{attrs:{rowSelection:t.rowSelection,columns:t.columns,dataSource:t.data},scopedSlots:t._u([{key:"name",fn:function(s){return a("a",{attrs:{href:"javascript:;"}},[t._v(t._s(s))])}}])})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"可选择"}},[t._v("可选择 "),a("a",{staticClass:"anchor",attrs:{href:"#可选择"}},[t._v("#")])]),t._v(" "),a("p",[t._v("第一列是联动的选择框。")]),t._v(" "),a("blockquote",[a("p",[t._v("默认点击 checkbox 触发选择行为")])])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"selection"}},[t._v("selection "),a("a",{staticClass:"anchor",attrs:{href:"#selection"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Rows can be selectable by making first column as a selectable column.")]),t._v(" "),a("blockquote",[a("p",[t._v("selection happens when clicking checkbox defaultly.")])])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":rowSelection")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"rowSelection"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"name"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),a("span",[t._v("{{")]),t._v("text"),a("span",[t._v("}}")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("scopedSlots")]),t._v(": { "),a("span",{staticClass:"hljs-attr"},[t._v("customRender")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(" },\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n },\n ];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'1'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'John Brown'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'2'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim Green'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("42")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'3'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Joe Black'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Sidney No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'4'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Disabled User'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("99")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Sidney No. 1 Lake Park'")]),t._v(",\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n columns,\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("computed")]),t._v(": {\n rowSelection() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" { selectedRowKeys } = "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(";\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),a("span",{staticClass:"hljs-attr"},[t._v("onChange")]),t._v(": "),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("selectedRowKeys, selectedRows")]),t._v(") =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),a("span",{staticClass:"hljs-string"},[t._v("`selectedRowKeys: "),a("span",{staticClass:"hljs-subst"},[t._v("${selectedRowKeys}")]),t._v("`")]),t._v(", "),a("span",{staticClass:"hljs-string"},[t._v("'selectedRows: '")]),t._v(", selectedRows);\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("getCheckboxProps")]),t._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("record")]),t._v(" =>")]),t._v(" ({\n "),a("span",{staticClass:"hljs-attr"},[t._v("props")]),t._v(": {\n "),a("span",{staticClass:"hljs-attr"},[t._v("disabled")]),t._v(": record.name === "),a("span",{staticClass:"hljs-string"},[t._v("'Disabled User'")]),t._v(", "),a("span",{staticClass:"hljs-comment"},[t._v("// Column configuration not to be checked")]),t._v("\n name: record.name,\n },\n }),\n };\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};gs._withStripped=!0;var fs=[{title:"Name",dataIndex:"name",scopedSlots:{customRender:"name"}},{title:"Age",dataIndex:"age"},{title:"Address",dataIndex:"address"}],ys=[{key:"1",name:"John Brown",age:32,address:"New York No. 1 Lake Park"},{key:"2",name:"Jim Green",age:42,address:"London No. 1 Lake Park"},{key:"3",name:"Joe Black",age:32,address:"Sidney No. 1 Lake Park"},{key:"4",name:"Disabled User",age:99,address:"Sidney No. 1 Lake Park"}],ks={data:function(){return{data:ys,columns:fs}},computed:{rowSelection:function(){this.selectedRowKeys;return{onChange:function(t,s){console.log("selectedRowKeys: "+t,"selectedRows: ",s)},getCheckboxProps:function(t){return{props:{disabled:"Disabled User"===t.name,name:t.name}}}}}}},bs=Object(v.a)(ks,gs,[],!1,null,null,null);bs.options.__file="components/table/demo/row-selection.md";var ws=bs.exports,xs=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div id="components-table-demo-size">\n <h4>Middle size table</h4>\n <a-table :columns="columns" :dataSource="data" size="middle"/>\n <h4>Small size table</h4>\n <a-table :columns="columns" :dataSource="data" size="small"/>\n </div>\n',script:"\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n ];\n const data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n },\n ];\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n };\n",style:"\n #components-table-demo-size h4 {\n margin-bottom: 16px;\n }\n",us:"\n#### size\nTwo compacted table size: `middle` and `small`, `small` size is used in Modal only.\n",cn:"\n#### 紧凑型\n两种紧凑型的列表，小型列表只用于对话框内。\n",sourceCode:"<template>\n <div id=\"components-table-demo-size\">\n <h4>Middle size table</h4>\n <a-table :columns=\"columns\" :dataSource=\"data\" size=\"middle\" />\n <h4>Small size table</h4>\n <a-table :columns=\"columns\" :dataSource=\"data\" size=\"small\" />\n </div>\n</template>\n<script>\n const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n ];\n const data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n },\n ];\n\n export default {\n data() {\n return {\n data,\n columns,\n };\n },\n };\n<\/script>\n<style>\n #components-table-demo-size h4 {\n margin-bottom: 16px;\n }\n</style>\n"}}},[a("template",{slot:"component"},[a("div",{attrs:{id:"components-table-demo-size"}},[a("h4",[t._v("Middle size table")]),t._v(" "),a("a-table",{attrs:{columns:t.columns,dataSource:t.data,size:"middle"}}),t._v(" "),a("h4",[t._v("Small size table")]),t._v(" "),a("a-table",{attrs:{columns:t.columns,dataSource:t.data,size:"small"}})],1)]),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"紧凑型"}},[t._v("紧凑型 "),a("a",{staticClass:"anchor",attrs:{href:"#紧凑型"}},[t._v("#")])]),t._v(" "),a("p",[t._v("两种紧凑型的列表，小型列表只用于对话框内。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"size"}},[t._v("size "),a("a",{staticClass:"anchor",attrs:{href:"#size"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Two compacted table size: "),a("code",[t._v("middle")]),t._v(" and "),a("code",[t._v("small")]),t._v(", "),a("code",[t._v("small")]),t._v(" size is used in Modal only.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("id")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"components-table-demo-size"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("h4")]),t._v(">")]),t._v("Middle size table"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("h4")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("size")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"middle"')]),t._v(" />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("h4")]),t._v(">")]),t._v("Small size table"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("h4")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":columns")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"columns"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("size")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"small"')]),t._v(" />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" columns = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Name'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'name'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Age'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'age'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Address'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'address'")]),t._v(",\n },\n ];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'1'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'John Brown'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'2'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim Green'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("42")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 1 Lake Park'")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'3'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("name")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Joe Black'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Sidney No. 1 Lake Park'")]),t._v(",\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n columns,\n };\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),a("span",{staticClass:"css"},[t._v("\n "),a("span",{staticClass:"hljs-selector-id"},[t._v("#components-table-demo-size")]),t._v(" "),a("span",{staticClass:"hljs-selector-tag"},[t._v("h4")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("margin-bottom")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("16px")]),t._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};xs._withStripped=!0;var Ss=[{title:"Name",dataIndex:"name"},{title:"Age",dataIndex:"age"},{title:"Address",dataIndex:"address"}],Is=[{key:"1",name:"John Brown",age:32,address:"New York No. 1 Lake Park"},{key:"2",name:"Jim Green",age:42,address:"London No. 1 Lake Park"},{key:"3",name:"Joe Black",age:32,address:"Sidney No. 1 Lake Park"}],Rs={data:function(){return{data:Is,columns:Ss}}},Ns=(a(1348),Object(v.a)(Rs,xs,[],!1,null,null,null));Ns.options.__file="components/table/demo/size.md";var Ls=Ns.exports,Ps=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-table :dataSource="data">\n <a-table-column-group>\n <span slot="title" style="color: #1890ff">Name</span>\n <a-table-column dataIndex="firstName" key="firstName">\n <span slot="title" style="color: #1890ff">First Name</span>\n </a-table-column>\n <a-table-column title="Last Name" dataIndex="lastName" key="lastName"/>\n </a-table-column-group>\n <a-table-column title="Age" dataIndex="age" key="age"/>\n <a-table-column title="Address" dataIndex="address" key="address"/>\n <a-table-column title="Tags" dataIndex="tags" key="tags">\n <template slot-scope="tags">\n <span>\n <a-tag v-for="tag in tags" color="blue" :key="tag">{{tag}}</a-tag>\n </span>\n </template>\n </a-table-column>\n <a-table-column title="Action" key="action">\n <template slot-scope="text, record">\n <span>\n <a href="javascript:;">Action 一 {{record.firstName}}</a>\n <a-divider type="vertical"/>\n <a href="javascript:;">Delete</a>\n </span>\n </template>\n </a-table-column>\n </a-table>\n',script:"\n const data = [\n {\n key: '1',\n firstName: 'John',\n lastName: 'Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n tags: ['nice', 'developer'],\n },\n {\n key: '2',\n firstName: 'Jim',\n lastName: 'Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n tags: ['loser'],\n },\n {\n key: '3',\n firstName: 'Joe',\n lastName: 'Black',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n tags: ['cool', 'teacher'],\n },\n ];\n\n export default {\n data() {\n return {\n data,\n };\n },\n };\n",style:null,us:"\n#### template style API\nUsing template style API\n> Since this is just a syntax sugar for the prop `columns`, so that you can't compose `Column` and `ColumnGroup` with other Components.\n",cn:"\n#### template 风格的 API\n使用 template 风格的 API\n> 这个只是一个描述 `columns` 的语法糖，所以你不能用其他组件去包裹 `Column` 和 `ColumnGroup`。\n",sourceCode:'<template>\n <a-table :dataSource="data">\n <a-table-column-group>\n <span slot="title" style="color: #1890ff">Name</span>\n <a-table-column dataIndex="firstName" key="firstName">\n <span slot="title" style="color: #1890ff">First Name</span>\n </a-table-column>\n <a-table-column title="Last Name" dataIndex="lastName" key="lastName" />\n </a-table-column-group>\n <a-table-column title="Age" dataIndex="age" key="age" />\n <a-table-column title="Address" dataIndex="address" key="address" />\n <a-table-column title="Tags" dataIndex="tags" key="tags">\n <template slot-scope="tags">\n <span>\n <a-tag v-for="tag in tags" color="blue" :key="tag">{{tag}}</a-tag>\n </span>\n </template>\n </a-table-column>\n <a-table-column title="Action" key="action">\n <template slot-scope="text, record">\n <span>\n <a href="javascript:;">Action 一 {{record.firstName}}</a>\n <a-divider type="vertical" />\n <a href="javascript:;">Delete</a>\n </span>\n </template>\n </a-table-column>\n </a-table>\n</template>\n<script>\n const data = [\n {\n key: \'1\',\n firstName: \'John\',\n lastName: \'Brown\',\n age: 32,\n address: \'New York No. 1 Lake Park\',\n tags: [\'nice\', \'developer\'],\n },\n {\n key: \'2\',\n firstName: \'Jim\',\n lastName: \'Green\',\n age: 42,\n address: \'London No. 1 Lake Park\',\n tags: [\'loser\'],\n },\n {\n key: \'3\',\n firstName: \'Joe\',\n lastName: \'Black\',\n age: 32,\n address: \'Sidney No. 1 Lake Park\',\n tags: [\'cool\', \'teacher\'],\n },\n ];\n\n export default {\n data() {\n return {\n data,\n };\n },\n };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("a-table",{attrs:{dataSource:t.data}},[a("a-table-column-group",[a("span",{staticStyle:{color:"#1890ff"},attrs:{slot:"title"},slot:"title"},[t._v("Name")]),t._v(" "),a("a-table-column",{key:"firstName",attrs:{dataIndex:"firstName"}},[a("span",{staticStyle:{color:"#1890ff"},attrs:{slot:"title"},slot:"title"},[t._v("First Name")])]),t._v(" "),a("a-table-column",{key:"lastName",attrs:{title:"Last Name",dataIndex:"lastName"}})],1),t._v(" "),a("a-table-column",{key:"age",attrs:{title:"Age",dataIndex:"age"}}),t._v(" "),a("a-table-column",{key:"address",attrs:{title:"Address",dataIndex:"address"}}),t._v(" "),a("a-table-column",{key:"tags",attrs:{title:"Tags",dataIndex:"tags"},scopedSlots:t._u([{key:"default",fn:function(s){return[a("span",t._l(s,(function(s){return a("a-tag",{key:s,attrs:{color:"blue"}},[t._v(t._s(s))])})),1)]}}])}),t._v(" "),a("a-table-column",{key:"action",attrs:{title:"Action"},scopedSlots:t._u([{key:"default",fn:function(s,n){return[a("span",[a("a",{attrs:{href:"javascript:;"}},[t._v("Action 一 "+t._s(n.firstName))]),t._v(" "),a("a-divider",{attrs:{type:"vertical"}}),t._v(" "),a("a",{attrs:{href:"javascript:;"}},[t._v("Delete")])],1)]}}])})],1)],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"template-风格的-API"}},[t._v("template 风格的 API "),a("a",{staticClass:"anchor",attrs:{href:"#template-风格的-API"}},[t._v("#")])]),t._v(" "),a("p",[t._v("使用 template 风格的 API")]),t._v(" "),a("blockquote",[a("p",[t._v("这个只是一个描述 "),a("code",[t._v("columns")]),t._v(" 的语法糖，所以你不能用其他组件去包裹 "),a("code",[t._v("Column")]),t._v(" 和 "),a("code",[t._v("ColumnGroup")]),t._v("。")])])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"template-style-API"}},[t._v("template style API "),a("a",{staticClass:"anchor",attrs:{href:"#template-style-API"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Using template style API")]),t._v(" "),a("blockquote",[a("p",[t._v("Since this is just a syntax sugar for the prop "),a("code",[t._v("columns")]),t._v(", so that you can't compose "),a("code",[t._v("Column")]),t._v(" and "),a("code",[t._v("ColumnGroup")]),t._v(" with other Components.")])])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"data"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table-column-group")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"color: #1890ff"')]),t._v(">")]),t._v("Name"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table-column")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"firstName"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"firstName"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"color: #1890ff"')]),t._v(">")]),t._v("First Name"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table-column")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table-column")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Last Name"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"lastName"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"lastName"')]),t._v(" />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table-column-group")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table-column")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Age"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"age"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"age"')]),t._v(" />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table-column")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Address"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"address"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"address"')]),t._v(" />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table-column")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Tags"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("dataIndex")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"tags"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"tags"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"tags"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-tag")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("v-for")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"tag in tags"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("color")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"blue"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":key")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"tag"')]),t._v(">")]),a("span",[t._v("{{")]),t._v("tag"),a("span",[t._v("}}")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-tag")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table-column")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-table-column")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Action"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"action"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text, record"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),t._v("Action 一 "),a("span",[t._v("{{")]),t._v("record.firstName"),a("span",[t._v("}}")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-divider")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"vertical"')]),t._v(" />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"javascript:;"')]),t._v(">")]),t._v("Delete"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table-column")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-table")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'1'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("firstName")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'John'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("lastName")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Brown'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'New York No. 1 Lake Park'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("tags")]),t._v(": ["),a("span",{staticClass:"hljs-string"},[t._v("'nice'")]),t._v(", "),a("span",{staticClass:"hljs-string"},[t._v("'developer'")]),t._v("],\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'2'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("firstName")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Jim'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("lastName")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Green'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("42")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'London No. 1 Lake Park'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("tags")]),t._v(": ["),a("span",{staticClass:"hljs-string"},[t._v("'loser'")]),t._v("],\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'3'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("firstName")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Joe'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("lastName")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Black'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("age")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("32")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("address")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'Sidney No. 1 Lake Park'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("tags")]),t._v(": ["),a("span",{staticClass:"hljs-string"},[t._v("'cool'")]),t._v(", "),a("span",{staticClass:"hljs-string"},[t._v("'teacher'")]),t._v("],\n },\n ];\n\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n data,\n };\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};Ps._withStripped=!0;var As=[{key:"1",firstName:"John",lastName:"Brown",age:32,address:"New York No. 1 Lake Park",tags:["nice","developer"]},{key:"2",firstName:"Jim",lastName:"Green",age:42,address:"London No. 1 Lake Park",tags:["loser"]},{key:"3",firstName:"Joe",lastName:"Black",age:32,address:"Sidney No. 1 Lake Park",tags:["cool","teacher"]}],Ds={data:function(){return{data:As}}},Ts=Object(v.a)(Ds,Ps,[],!1,null,null,null);Ts.options.__file="components/table/demo/template.md";var Es=Ts.exports,Js=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("a-table",{attrs:{bordered:"",columns:t.columns,components:t.components,"data-source":t.data},scopedSlots:t._u([{key:"action",fn:function(){return[a("a",{attrs:{href:"javascript:;"}},[t._v("Delete")])]},proxy:!0}])})};Js._withStripped=!0;var Os=a(7),Fs=a.n(Os),Ks=a(16),Bs=a.n(Ks),zs=a(14),Ms=a(1349),Gs=a.n(Ms);zs.a.component("vue-draggable-resizable",Gs.a);var Hs=[{title:"Date",dataIndex:"date",width:200},{title:"Amount",dataIndex:"amount",width:100},{title:"Type",dataIndex:"type",width:100},{title:"Note",dataIndex:"note",width:100},{title:"Action",key:"action",scopedSlots:{customRender:"action"}}],$s=[{key:0,date:"2018-02-11",amount:120,type:"income",note:"transfer"},{key:1,date:"2018-03-11",amount:243,type:"income",note:"transfer"},{key:2,date:"2018-04-11",amount:98,type:"income",note:"transfer"}],Ys={};Hs.forEach((function(t){Ys[t.key]=t.width}));var qs=zs.a.observable(Ys),Vs=function(t,s,a){var n=null,e=s.key,l=Bs()(s,["key"]),r=Hs.find((function(t){return(t.dataIndex||t.key)===e}));if(!r.width)return t("th",l,[a]);return t("th",Fs()([l,{directives:[{name:"ant-ref",value:function(t){return n=t}}],attrs:{width:r.width},class:"resize-table-th"}]),[a,t("vue-draggable-resizable",{key:r.key,class:"table-draggable-handle",attrs:{w:10,x:qs[e]||r.width,z:1,axis:"x",draggable:!0,resizable:!1},on:{dragging:function(t,s){qs[e]=0,r.width=Math.max(t,1)},dragstop:function(){qs[e]=n.getBoundingClientRect().width}}})])},Ws={name:"App",data:function(){return this.components={header:{cell:Vs}},{data:$s,columns:Hs}}},Us=(a(1350),a(1351)),Xs=a.n(Us),Qs=a(1352),Zs=a.n(Qs),ta=Object(v.a)(Ws,Js,[],!1,null,null,null);"function"==typeof Xs.a&&Xs()(ta),"function"==typeof Zs.a&&Zs()(ta),ta.options.__file="components/table/demo/resizable-column.vue";var sa=ta.exports,aa="<cn>\n#### 可伸缩列\n集成 [vue-draggable-resizable](https://github.com/mauricius/vue-draggable-resizable) 来实现可伸缩列。\n</cn>\n\n<us>\n#### Resizable column\nImplement resizable column by integrate with [vue-draggable-resizable](https://github.com/mauricius/vue-draggable-resizable).\n</us>\n\n<template>\n <a-table bordered :columns=\"columns\" :components=\"components\" :data-source=\"data\">\n <template v-slot:action>\n <a href=\"javascript:;\">Delete</a>\n </template>\n </a-table>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport VueDraggableResizable from 'vue-draggable-resizable';\n\nVue.component('vue-draggable-resizable', VueDraggableResizable);\nconst columns = [\n {\n title: 'Date',\n dataIndex: 'date',\n width: 200,\n },\n {\n title: 'Amount',\n dataIndex: 'amount',\n width: 100,\n },\n {\n title: 'Type',\n dataIndex: 'type',\n width: 100,\n },\n {\n title: 'Note',\n dataIndex: 'note',\n width: 100,\n },\n {\n title: 'Action',\n key: 'action',\n scopedSlots: { customRender: 'action' },\n },\n];\nconst data = [\n {\n key: 0,\n date: '2018-02-11',\n amount: 120,\n type: 'income',\n note: 'transfer',\n },\n {\n key: 1,\n date: '2018-03-11',\n amount: 243,\n type: 'income',\n note: 'transfer',\n },\n {\n key: 2,\n date: '2018-04-11',\n amount: 98,\n type: 'income',\n note: 'transfer',\n },\n];\nconst draggingMap = {};\ncolumns.forEach(col => {\n draggingMap[col.key] = col.width;\n});\nconst draggingState = Vue.observable(draggingMap);\nconst ResizeableTitle = (h, props, children) => {\n let thDom = null;\n const { key, ...restProps } = props;\n const col = columns.find(col => {\n const k = col.dataIndex || col.key;\n return k === key;\n });\n if (!col.width) {\n return <th {...restProps}>{children}</th>;\n }\n const onDrag = (x, y) => {\n draggingState[key] = 0;\n col.width = Math.max(x, 1);\n };\n\n const onDragstop = () => {\n draggingState[key] = thDom.getBoundingClientRect().width;\n };\n return (\n <th {...restProps} v-ant-ref={r => (thDom = r)} width={col.width} class=\"resize-table-th\">\n {children}\n <vue-draggable-resizable\n key={col.key}\n class=\"table-draggable-handle\"\n w={10}\n x={draggingState[key] || col.width}\n z={1}\n axis=\"x\"\n draggable={true}\n resizable={false}\n onDragging={onDrag}\n onDragstop={onDragstop}\n ></vue-draggable-resizable>\n </th>\n );\n};\nexport default {\n name: 'App',\n data() {\n this.components = {\n header: {\n cell: ResizeableTitle,\n },\n };\n return {\n data,\n columns,\n };\n },\n};\n<\/script>\n<style lang=\"less\">\n.resize-table-th {\n position: relative;\n .table-draggable-handle {\n height: 100% !important;\n bottom: 0;\n left: auto !important;\n right: -5px;\n cursor: col-resize;\n touch-action: none;\n }\n}\n</style>\n",na=function(){var t=this.$createElement;this._self._c;return this._m(0)};na._withStripped=!0;var ea=Object(v.a)({},na,[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[a("h2",{attrs:{id:"API"}},[t._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),a("h3",{attrs:{id:"Table"}},[t._v("Table "),a("a",{staticClass:"anchor",attrs:{href:"#Table"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("参数")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bordered")]),t._v(" "),a("td",[t._v("是否展示外边框和列边框")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("childrenColumnName")]),t._v(" "),a("td",[t._v("指定树形结构的列名")]),t._v(" "),a("td",[t._v("string[]")]),t._v(" "),a("td",[t._v("children")])]),t._v(" "),a("tr",[a("td",[t._v("columns")]),t._v(" "),a("td",[t._v("表格列的配置描述，具体项见"),a("a",{attrs:{href:"#Column"}},[t._v("下表")])]),t._v(" "),a("td",[t._v("array")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("components")]),t._v(" "),a("td",[t._v("覆盖默认的 table 元素")]),t._v(" "),a("td",[t._v("object")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("dataSource")]),t._v(" "),a("td",[t._v("数据数组")]),t._v(" "),a("td",[t._v("any[]")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",[t._v("defaultExpandAllRows")]),t._v(" "),a("td",[t._v("初始时，是否展开所有行")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("defaultExpandedRowKeys")]),t._v(" "),a("td",[t._v("默认展开的行")]),t._v(" "),a("td",[t._v("string[]")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("expandedRowKeys")]),t._v(" "),a("td",[t._v("展开的行，控制属性")]),t._v(" "),a("td",[t._v("string[]")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("expandedRowRender")]),t._v(" "),a("td",[t._v("额外的展开行")]),t._v(" "),a("td",[t._v('Function(record, index, indent, expanded):VNode | slot="expandedRowRender" slot-scope="record, index, indent, expanded"')]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("expandIcon")]),t._v(" "),a("td",[t._v("自定义展开图标")]),t._v(" "),a("td",[t._v('Function(props):VNode | slot="expandIcon" slot-scope="props"')]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("expandRowByClick")]),t._v(" "),a("td",[t._v("通过点击行来展开子行")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("false")])])]),t._v(" "),a("tr",[a("td",[t._v("footer")]),t._v(" "),a("td",[t._v("表格尾部")]),t._v(" "),a("td",[t._v("Function(currentPageData)|slot-scope")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",[t._v("indentSize")]),t._v(" "),a("td",[t._v("展示树形数据时，每层缩进的宽度，以 px 为单位")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("15")])]),t._v(" "),a("tr",[a("td",[t._v("loading")]),t._v(" "),a("td",[t._v("页面是否加载中")]),t._v(" "),a("td",[t._v("boolean|"),a("a",{attrs:{href:"/components/spin-cn"}},[t._v("object")])]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("locale")]),t._v(" "),a("td",[t._v("默认文案设置，目前包括排序、过滤、空数据文案")]),t._v(" "),a("td",[t._v("object")]),t._v(" "),a("td",[t._v("filterConfirm: '确定' "),a("br"),t._v(" filterReset: '重置' "),a("br"),t._v(" emptyText: '暂无数据'"),a("br"),a("br")])]),t._v(" "),a("tr",[a("td",[t._v("pagination")]),t._v(" "),a("td",[t._v("分页器，参考"),a("a",{attrs:{href:"#pagination"}},[t._v("配置项")]),t._v("或 "),a("a",{attrs:{href:"/components/pagination-cn/"}},[t._v("pagination")]),t._v("文档，设为 false 时不展示和进行分页")]),t._v(" "),a("td",[t._v("object")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",[t._v("rowClassName")]),t._v(" "),a("td",[t._v("表格行的类名")]),t._v(" "),a("td",[t._v("Function(record, index):string")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("rowKey")]),t._v(" "),a("td",[t._v("表格行 key 的取值，可以是字符串或一个函数")]),t._v(" "),a("td",[t._v("string|Function(record):string")]),t._v(" "),a("td",[t._v("'key'")])]),t._v(" "),a("tr",[a("td",[t._v("rowSelection")]),t._v(" "),a("td",[t._v("列表项是否可选择，"),a("a",{attrs:{href:"#rowSelection"}},[t._v("配置项")])]),t._v(" "),a("td",[t._v("object")]),t._v(" "),a("td",[t._v("null")])]),t._v(" "),a("tr",[a("td",[t._v("scroll")]),t._v(" "),a("td",[t._v("设置横向或纵向滚动，也可用于指定滚动区域的宽和高，建议为 "),a("code",{pre:!0},[t._v("x")]),t._v(" 设置一个数字，如果要设置为 "),a("code",{pre:!0},[t._v("true")]),t._v("，需要配合样式 "),a("code",{pre:!0},[t._v(".ant-table td { white-space: nowrap; }")])]),t._v(" "),a("td",[t._v("{ x: number | true, y: number }")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("showHeader")]),t._v(" "),a("td",[t._v("是否显示表头")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("true")])]),t._v(" "),a("tr",[a("td",[t._v("size")]),t._v(" "),a("td",[t._v("表格大小")]),t._v(" "),a("td",[t._v("default | middle | small")]),t._v(" "),a("td",[t._v("default")])]),t._v(" "),a("tr",[a("td",[t._v("title")]),t._v(" "),a("td",[t._v("表格标题")]),t._v(" "),a("td",[t._v("Function(currentPageData)|slot-scope")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",[t._v("customHeaderRow")]),t._v(" "),a("td",[t._v("设置头部行属性")]),t._v(" "),a("td",[t._v("Function(column, index)")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("customRow")]),t._v(" "),a("td",[t._v("设置行属性")]),t._v(" "),a("td",[t._v("Function(record, index)")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h3",{attrs:{id:"事件"}},[t._v("事件 "),a("a",{staticClass:"anchor",attrs:{href:"#事件"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名称")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("回调参数")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("expandedRowsChange")]),t._v(" "),a("td",[t._v("展开的行变化时触发")]),t._v(" "),a("td",[t._v("Function(expandedRows)")])]),t._v(" "),a("tr",[a("td",[t._v("change")]),t._v(" "),a("td",[t._v("分页、排序、筛选变化时触发")]),t._v(" "),a("td",[t._v("Function(pagination, filters, sorter, { currentDataSource })")])]),t._v(" "),a("tr",[a("td",[t._v("expand")]),t._v(" "),a("td",[t._v("点击展开图标时触发")]),t._v(" "),a("td",[t._v("Function(expanded, record)")])])])]),t._v(" "),a("h4",{attrs:{id:"customRow-用法"}},[t._v("customRow 用法 "),a("a",{staticClass:"anchor",attrs:{href:"#customRow-用法"}},[t._v("#")])]),t._v(" "),a("p",[t._v("适用于 "),a("code",{pre:!0},[t._v("customRow")]),t._v(" "),a("code",{pre:!0},[t._v("customHeaderRow")]),t._v(" "),a("code",{pre:!0},[t._v("customCell")]),t._v(" "),a("code",{pre:!0},[t._v("customHeaderCell")]),t._v("。遵循"),a("a",{attrs:{href:"https://github.com/vuejs/babel-plugin-transform-vue-jsx"}},[t._v("Vue jsx")]),t._v("语法。")]),t._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[t._v("<Table\n customRow={(record) => {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("props")]),t._v(": {\n xxx... "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("//属性")]),t._v("\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("on")]),t._v(": { "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// 事件")]),t._v("\n click: "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[t._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[t._v("event")]),t._v(") =>")]),t._v(" {}, "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// 点击行")]),t._v("\n dblclick: "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[t._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[t._v("event")]),t._v(") =>")]),t._v(" {},\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("contextmenu")]),t._v(": "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[t._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[t._v("event")]),t._v(") =>")]),t._v(" {},\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("mouseenter")]),t._v(": "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[t._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[t._v("event")]),t._v(") =>")]),t._v(" {}, "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// 鼠标移入行")]),t._v("\n mouseleave: "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[t._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[t._v("event")]),t._v(") =>")]),t._v(" {}\n },\n\n };\n )}\n customHeaderRow={(column) => {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("on")]),t._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("click")]),t._v(": "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[t._v("()")]),t._v(" =>")]),t._v(" {}, "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// 点击表头行")]),t._v("\n }\n };\n )}\n/>\n")])]),t._v(" "),a("h3",{attrs:{id:"Column"}},[t._v("Column "),a("a",{staticClass:"anchor",attrs:{href:"#Column"}},[t._v("#")])]),t._v(" "),a("p",[t._v("列描述数据对象，是 columns 中的一项，Column 使用相同的 API。")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("参数")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("align")]),t._v(" "),a("td",[t._v("设置列内容的对齐方式")]),t._v(" "),a("td",[t._v("'left' | 'right' | 'center'")]),t._v(" "),a("td",[t._v("'left'")])]),t._v(" "),a("tr",[a("td",[t._v("colSpan")]),t._v(" "),a("td",[t._v("表头列合并,设置为 0 时，不渲染")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",[t._v("dataIndex")]),t._v(" "),a("td",[t._v("列数据在数据项中对应的 key，支持 "),a("code",{pre:!0},[t._v("a.b.c")]),t._v(" 的嵌套写法")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("filterDropdown")]),t._v(" "),a("td",[t._v("可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互")]),t._v(" "),a("td",[t._v("VNode | slot-scope")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("filterDropdownVisible")]),t._v(" "),a("td",[t._v("用于控制自定义筛选菜单是否可见")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("filtered")]),t._v(" "),a("td",[t._v("标识数据是否经过过滤，筛选图标会高亮")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("filteredValue")]),t._v(" "),a("td",[t._v("筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组")]),t._v(" "),a("td",[t._v("string[]")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("filterIcon")]),t._v(" "),a("td",[t._v("自定义 fiter 图标。")]),t._v(" "),a("td",[t._v("VNode | (filtered: boolean, column: Column) => vNode |slot |slot-scope")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("filterMultiple")]),t._v(" "),a("td",[t._v("是否多选")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("true")])]),t._v(" "),a("tr",[a("td",[t._v("filters")]),t._v(" "),a("td",[t._v("表头的筛选菜单项")]),t._v(" "),a("td",[t._v("object[]")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("fixed")]),t._v(" "),a("td",[t._v("列是否固定，可选 "),a("code",{pre:!0},[t._v("true")]),t._v("(等效于 left) "),a("code",{pre:!0},[t._v("'left'")]),t._v(" "),a("code",{pre:!0},[t._v("'right'")])]),t._v(" "),a("td",[t._v("boolean|string")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("key")]),t._v(" "),a("td",[t._v("Vue 需要的 key，如果已经设置了唯一的 "),a("code",{pre:!0},[t._v("dataIndex")]),t._v("，可以忽略这个属性")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("customRender")]),t._v(" "),a("td",[t._v("生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格行/列合并,可参考 demo 表格行/列合并")]),t._v(" "),a("td",[t._v("Function(text, record, index) {}|slot-scope")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("sorter")]),t._v(" "),a("td",[t._v("排序函数，本地排序使用一个函数(参考 "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort"}},[t._v("Array.sort")]),t._v(" 的 compareFunction)，需要服务端排序可设为 true")]),t._v(" "),a("td",[t._v("Function|boolean")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("sortOrder")]),t._v(" "),a("td",[t._v("排序的受控属性，外界可用此控制列的排序，可设置为 "),a("code",{pre:!0},[t._v("'ascend'")]),t._v(" "),a("code",{pre:!0},[t._v("'descend'")]),t._v(" "),a("code",{pre:!0},[t._v("false")])]),t._v(" "),a("td",[t._v("boolean|string")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("title")]),t._v(" "),a("td",[t._v("列头显示文字")]),t._v(" "),a("td",[t._v("string|slot")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("width")]),t._v(" "),a("td",[t._v("列宽度")]),t._v(" "),a("td",[t._v("string|number")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("customCell")]),t._v(" "),a("td",[t._v("设置单元格属性")]),t._v(" "),a("td",[t._v("Function(record, rowIndex)")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("customHeaderCell")]),t._v(" "),a("td",[t._v("设置头部单元格属性")]),t._v(" "),a("td",[t._v("Function(column)")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("onFilter")]),t._v(" "),a("td",[t._v("本地模式下，确定筛选的运行函数, 使用 template 或 jsx 时作为"),a("code",{pre:!0},[t._v("filter")]),t._v("事件使用")]),t._v(" "),a("td",[t._v("Function")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("onFilterDropdownVisibleChange")]),t._v(" "),a("td",[t._v("自定义筛选菜单可见变化时调用，使用 template 或 jsx 时作为"),a("code",{pre:!0},[t._v("filterDropdownVisibleChange")]),t._v("事件使用")]),t._v(" "),a("td",[t._v("function(visible) {}")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("slots")]),t._v(" "),a("td",[t._v("使用 columns 时，可以通过该属性配置支持 slot 的属性，如 "),a("code",{pre:!0},[t._v("slots: { filterIcon: 'XXX'}")])]),t._v(" "),a("td",[t._v("object")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("scopedSlots")]),t._v(" "),a("td",[t._v("使用 columns 时，可以通过该属性配置支持 slot-scope 的属性，如 "),a("code",{pre:!0},[t._v("scopedSlots: { customRender: 'XXX'}")])]),t._v(" "),a("td",[t._v("object")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h3",{attrs:{id:"ColumnGroup"}},[t._v("ColumnGroup "),a("a",{staticClass:"anchor",attrs:{href:"#ColumnGroup"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("参数")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("title")]),t._v(" "),a("td",[t._v("列头显示文字")]),t._v(" "),a("td",[t._v("string|slot")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("slots")]),t._v(" "),a("td",[t._v("使用 columns 时，可以通过该属性配置支持 slot 的属性，如 "),a("code",{pre:!0},[t._v("slots: { title: 'XXX'}")])]),t._v(" "),a("td",[t._v("object")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h3",{attrs:{id:"pagination"}},[t._v("pagination "),a("a",{staticClass:"anchor",attrs:{href:"#pagination"}},[t._v("#")])]),t._v(" "),a("p",[t._v("分页的配置项。")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("参数")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("position")]),t._v(" "),a("td",[t._v("指定分页显示的位置")]),t._v(" "),a("td",[t._v("'top' | 'bottom' | 'both'")]),t._v(" "),a("td",[t._v("'bottom'")])])])]),t._v(" "),a("p",[t._v("更多配置项，请查看 "),a("a",{attrs:{href:"/components/pagination/"}},[a("code",{pre:!0},[t._v("Pagination")])]),t._v("。")]),t._v(" "),a("h3",{attrs:{id:"rowSelection"}},[t._v("rowSelection "),a("a",{staticClass:"anchor",attrs:{href:"#rowSelection"}},[t._v("#")])]),t._v(" "),a("p",[t._v("选择功能的配置。")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("参数")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("columnWidth")]),t._v(" "),a("td",[t._v("自定义列表选择框宽度")]),t._v(" "),a("td",[t._v("string|number")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("columnTitle")]),t._v(" "),a("td",[t._v("自定义列表选择框标题")]),t._v(" "),a("td",[t._v("string|VNode")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("fixed")]),t._v(" "),a("td",[t._v("把选择框列固定在左边")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("getCheckboxProps")]),t._v(" "),a("td",[t._v("选择框的默认属性配置")]),t._v(" "),a("td",[t._v("Function(record)")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("hideDefaultSelections")]),t._v(" "),a("td",[t._v("去掉『全选』『反选』两个默认选项")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("selectedRowKeys")]),t._v(" "),a("td",[t._v("指定选中项的 key 数组，需要和 onChange 进行配合")]),t._v(" "),a("td",[t._v("string[]")]),t._v(" "),a("td",[t._v("[]")])]),t._v(" "),a("tr",[a("td",[t._v("selections")]),t._v(" "),a("td",[t._v("自定义选择配置项, 设为 "),a("code",{pre:!0},[t._v("true")]),t._v(" 时使用默认选择项")]),t._v(" "),a("td",[t._v("object[]|boolean")]),t._v(" "),a("td",[t._v("true")])]),t._v(" "),a("tr",[a("td",[t._v("type")]),t._v(" "),a("td",[t._v("多选/单选，"),a("code",{pre:!0},[t._v("checkbox")]),t._v(" or "),a("code",{pre:!0},[t._v("radio")])]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("checkbox")])])]),t._v(" "),a("tr",[a("td",[t._v("onChange")]),t._v(" "),a("td",[t._v("选中项发生变化时的回调")]),t._v(" "),a("td",[t._v("Function(selectedRowKeys, selectedRows)")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("onSelect")]),t._v(" "),a("td",[t._v("用户手动选择/取消选择某列的回调")]),t._v(" "),a("td",[t._v("Function(record, selected, selectedRows, nativeEvent)")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("onSelectAll")]),t._v(" "),a("td",[t._v("用户手动选择/取消选择所有列的回调")]),t._v(" "),a("td",[t._v("Function(selected, selectedRows, changeRows)")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("onSelectInvert")]),t._v(" "),a("td",[t._v("用户手动选择反选的回调")]),t._v(" "),a("td",[t._v("Function(selectedRows)")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h3",{attrs:{id:"selection"}},[t._v("selection "),a("a",{staticClass:"anchor",attrs:{href:"#selection"}},[t._v("#")])]),t._v(" "),a("p",[t._v("自定义选择配置项")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("参数")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("key")]),t._v(" "),a("td",[t._v("Vue 需要的 key，建议设置")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("text")]),t._v(" "),a("td",[t._v("选择项显示的文字")]),t._v(" "),a("td",[t._v("string|VNode")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("onSelect")]),t._v(" "),a("td",[t._v("选择项点击回调")]),t._v(" "),a("td",[t._v("Function(changeableRowKeys)")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h2",{attrs:{id:"注意"}},[t._v("注意 "),a("a",{staticClass:"anchor",attrs:{href:"#注意"}},[t._v("#")])]),t._v(" "),a("p",[t._v("在 Table 中，"),a("code",{pre:!0},[t._v("dataSource")]),t._v(" 和 "),a("code",{pre:!0},[t._v("columns")]),t._v(" 里的数据值都需要指定 "),a("code",{pre:!0},[t._v("key")]),t._v(" 值。对于 "),a("code",{pre:!0},[t._v("dataSource")]),t._v(" 默认将每列数据的 "),a("code",{pre:!0},[t._v("key")]),t._v(" 属性作为唯一的标识。")]),t._v(" "),a("p",[t._v("如果你的数据没有这个属性，务必使用 "),a("code",{pre:!0},[t._v("rowKey")]),t._v(" 来指定数据列的主键。若没有指定，控制台会出现缺少 key 的提示，表格组件也会出现各类奇怪的错误。")]),t._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// 比如你的数据主键是 uid")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(' <Table rowKey="uid" />;\n// 或\nreturn <Table rowKey={record => record.uid} />;\n')])])])}],!1,null,null,null);ea.options.__file="components/table/index.zh-CN.md";var la=ea.exports,ra=function(){var t=this.$createElement;this._self._c;return this._m(0)};ra._withStripped=!0;var ia=Object(v.a)({},ra,[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[a("h2",{attrs:{id:"API"}},[t._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),a("h3",{attrs:{id:"Table"}},[t._v("Table "),a("a",{staticClass:"anchor",attrs:{href:"#Table"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Property")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Type")]),t._v(" "),a("th",[t._v("Default")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bordered")]),t._v(" "),a("td",[t._v("Whether to show all table borders")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("false")])])]),t._v(" "),a("tr",[a("td",[t._v("childrenColumnName")]),t._v(" "),a("td",[t._v("The column contains children to display")]),t._v(" "),a("td",[t._v("string[]")]),t._v(" "),a("td",[t._v("children")])]),t._v(" "),a("tr",[a("td",[t._v("columns")]),t._v(" "),a("td",[t._v("Columns of table "),a("a",{attrs:{href:"#Column"}},[t._v("config")])]),t._v(" "),a("td",[t._v("array")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("components")]),t._v(" "),a("td",[t._v("Override default table elements")]),t._v(" "),a("td",[t._v("object")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("dataSource")]),t._v(" "),a("td",[t._v("Data record array to be displayed")]),t._v(" "),a("td",[t._v("any[]")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("defaultExpandAllRows")]),t._v(" "),a("td",[t._v("Expand all rows initially")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("false")])])]),t._v(" "),a("tr",[a("td",[t._v("defaultExpandedRowKeys")]),t._v(" "),a("td",[t._v("Initial expanded row keys")]),t._v(" "),a("td",[t._v("string[]")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("expandedRowKeys")]),t._v(" "),a("td",[t._v("Current expanded row keys")]),t._v(" "),a("td",[t._v("string[]")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("expandedRowRender")]),t._v(" "),a("td",[t._v("Expanded container render for each row")]),t._v(" "),a("td",[t._v("Function(record, index, indent, expanded):VNode|slot-scope")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("expandIcon")]),t._v(" "),a("td",[t._v("Customize row expand Icon.")]),t._v(" "),a("td",[t._v('Function(props):VNode | slot="expandIcon" slot-scope="props"')]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("expandRowByClick")]),t._v(" "),a("td",[t._v("Whether to expand row by clicking anywhere in the whole row")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("false")])])]),t._v(" "),a("tr",[a("td",[t._v("footer")]),t._v(" "),a("td",[t._v("Table footer renderer")]),t._v(" "),a("td",[t._v("Function(currentPageData)|slot-scope")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",[t._v("indentSize")]),t._v(" "),a("td",[t._v("Indent size in pixels of tree data")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("15")])]),t._v(" "),a("tr",[a("td",[t._v("loading")]),t._v(" "),a("td",[t._v("Loading status of table")]),t._v(" "),a("td",[t._v("boolean|"),a("a",{attrs:{href:"/components/spin"}},[t._v("object")])]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("false")])])]),t._v(" "),a("tr",[a("td",[t._v("locale")]),t._v(" "),a("td",[t._v("i18n text including filter, sort, empty text, etc")]),t._v(" "),a("td",[t._v("object")]),t._v(" "),a("td",[t._v("filterConfirm: 'Ok' "),a("br"),t._v(" filterReset: 'Reset' "),a("br"),t._v(" emptyText: 'No Data'"),a("br"),a("br")])]),t._v(" "),a("tr",[a("td",[t._v("pagination")]),t._v(" "),a("td",[t._v("Config of pagination. You can ref table pagination "),a("a",{attrs:{href:"#pagination"}},[t._v("config")]),t._v(" or full "),a("a",{attrs:{href:"/components/pagination/"}},[a("code",{pre:!0},[t._v("pagination")])]),t._v(" document, hide it by setting it to "),a("code",{pre:!0},[t._v("false")])]),t._v(" "),a("td",[t._v("object")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",[t._v("rowClassName")]),t._v(" "),a("td",[t._v("Row's className")]),t._v(" "),a("td",[t._v("Function(record, index):string")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("rowKey")]),t._v(" "),a("td",[t._v("Row's unique key, could be a string or function that returns a string")]),t._v(" "),a("td",[t._v("string|Function(record, index):string")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("key")])])]),t._v(" "),a("tr",[a("td",[t._v("rowSelection")]),t._v(" "),a("td",[t._v("Row selection "),a("a",{attrs:{href:"#rowSelection"}},[t._v("config")])]),t._v(" "),a("td",[t._v("object")]),t._v(" "),a("td",[t._v("null")])]),t._v(" "),a("tr",[a("td",[t._v("scroll")]),t._v(" "),a("td",[t._v("Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area. It is recommended to set a number for "),a("code",{pre:!0},[t._v("x")]),t._v(", if you want to set it to "),a("code",{pre:!0},[t._v("true")]),t._v(", you need to add style "),a("code",{pre:!0},[t._v(".ant-table td { white-space: nowrap; }")]),t._v(".")]),t._v(" "),a("td",[t._v("{ x: number | true, y: number }")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("showHeader")]),t._v(" "),a("td",[t._v("Whether to show table header")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("true")])])]),t._v(" "),a("tr",[a("td",[t._v("size")]),t._v(" "),a("td",[t._v("Size of table")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("default")]),t._v(" | "),a("code",{pre:!0},[t._v("middle")]),t._v(" | "),a("code",{pre:!0},[t._v("small")]),t._v(" | "),a("code",{pre:!0},[t._v("large")])]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("default")])])]),t._v(" "),a("tr",[a("td",[t._v("title")]),t._v(" "),a("td",[t._v("Table title renderer")]),t._v(" "),a("td",[t._v("Function(currentPageData)|slot-scope")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",[t._v("customHeaderRow")]),t._v(" "),a("td",[t._v("Set props on per header row")]),t._v(" "),a("td",[t._v("Function(column, index)")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("customRow")]),t._v(" "),a("td",[t._v("Set props on per row")]),t._v(" "),a("td",[t._v("Function(record, index)")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h3",{attrs:{id:"Events"}},[t._v("Events "),a("a",{staticClass:"anchor",attrs:{href:"#Events"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Events Name")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Arguments")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("change")]),t._v(" "),a("td",[t._v("Callback executed when pagination, filters or sorter is changed")]),t._v(" "),a("td",[t._v("Function(pagination, filters, sorter, { currentDataSource })")])]),t._v(" "),a("tr",[a("td",[t._v("expand")]),t._v(" "),a("td",[t._v("Callback executed when the row expand icon is clicked")]),t._v(" "),a("td",[t._v("Function(expanded, record)")])]),t._v(" "),a("tr",[a("td",[t._v("expandedRowsChange")]),t._v(" "),a("td",[t._v("Callback executed when the expanded rows change")]),t._v(" "),a("td",[t._v("Function(expandedRows)")])])])]),t._v(" "),a("h4",{attrs:{id:"customRow-usage"}},[t._v("customRow usage "),a("a",{staticClass:"anchor",attrs:{href:"#customRow-usage"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Same as "),a("code",{pre:!0},[t._v("customRow")]),t._v(" "),a("code",{pre:!0},[t._v("customHeaderRow")]),t._v(" "),a("code",{pre:!0},[t._v("customCell")]),t._v(" "),a("code",{pre:!0},[t._v("customHeaderCell")]),t._v(". Follow "),a("a",{attrs:{href:"https://github.com/vuejs/babel-plugin-transform-vue-jsx"}},[t._v("Vue jsx")]),t._v(" syntax。")]),t._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[t._v("<Table\n customRow={(record) => {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("props")]),t._v(": {\n xxx...\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("on")]),t._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("click")]),t._v(": "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[t._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[t._v("event")]),t._v(") =>")]),t._v(" {}, "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// click row")]),t._v("\n dblclick: "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[t._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[t._v("event")]),t._v(") =>")]),t._v(" {}, "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// double click row")]),t._v("\n contextmenu: "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[t._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[t._v("event")]),t._v(") =>")]),t._v(" {} "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// right button click row")]),t._v("\n mouseenter: "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[t._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[t._v("event")]),t._v(") =>")]),t._v(" {} "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// mouse enter row")]),t._v("\n mouseleave: "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[t._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[t._v("event")]),t._v(") =>")]),t._v(" {} "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// mouse leave row")]),t._v("\n },\n };\n )}\n customHeaderRow={(column) => {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("on")]),t._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("click")]),t._v(": "),a("span",{pre:!0,attrs:{class:"hljs-function"}},[a("span",{pre:!0,attrs:{class:"hljs-params"}},[t._v("()")]),t._v(" =>")]),t._v(" {}, "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// click header row")]),t._v("\n },\n };\n )}\n/>\n")])]),t._v(" "),a("h3",{attrs:{id:"Column"}},[t._v("Column "),a("a",{staticClass:"anchor",attrs:{href:"#Column"}},[t._v("#")])]),t._v(" "),a("p",[t._v("One of the Table "),a("code",{pre:!0},[t._v("columns")]),t._v(" prop for describing the table's columns, Column has the same API.")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Property")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Type")]),t._v(" "),a("th",[t._v("Default")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("align")]),t._v(" "),a("td",[t._v("specify how content is aligned")]),t._v(" "),a("td",[t._v("'left' | 'right' | 'center'")]),t._v(" "),a("td",[t._v("'left'")])]),t._v(" "),a("tr",[a("td",[t._v("colSpan")]),t._v(" "),a("td",[t._v("Span of this column's title")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",[t._v("dataIndex")]),t._v(" "),a("td",[t._v("Display field of the data record, could be set like "),a("code",{pre:!0},[t._v("a.b.c")])]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("defaultSortOrder")]),t._v(" "),a("td",[t._v("Default order of sorted values: "),a("code",{pre:!0},[t._v("'ascend'")]),t._v(" "),a("code",{pre:!0},[t._v("'descend'")]),t._v(" "),a("code",{pre:!0},[t._v("null")])]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("filterDropdown")]),t._v(" "),a("td",[t._v("Customized filter overlay")]),t._v(" "),a("td",[t._v("slot | slot-scope")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("filterDropdownVisible")]),t._v(" "),a("td",[t._v("Whether "),a("code",{pre:!0},[t._v("filterDropdown")]),t._v(" is visible")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("filtered")]),t._v(" "),a("td",[t._v("Whether the "),a("code",{pre:!0},[t._v("dataSource")]),t._v(" is filtered")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("false")])])]),t._v(" "),a("tr",[a("td",[t._v("filteredValue")]),t._v(" "),a("td",[t._v("Controlled filtered value, filter icon will highlight")]),t._v(" "),a("td",[t._v("string[]")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("filterIcon")]),t._v(" "),a("td",[t._v("Customized filter icon")]),t._v(" "),a("td",[t._v("slot | slot-scope | (filtered: boolean, column: Column)")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("false")])])]),t._v(" "),a("tr",[a("td",[t._v("filterMultiple")]),t._v(" "),a("td",[t._v("Whether multiple filters can be selected")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("true")])])]),t._v(" "),a("tr",[a("td",[t._v("filters")]),t._v(" "),a("td",[t._v("Filter menu config")]),t._v(" "),a("td",[t._v("object[]")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("fixed")]),t._v(" "),a("td",[t._v("Set column to be fixed: "),a("code",{pre:!0},[t._v("true")]),t._v("(same as left) "),a("code",{pre:!0},[t._v("'left'")]),t._v(" "),a("code",{pre:!0},[t._v("'right'")])]),t._v(" "),a("td",[t._v("boolean|string")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("false")])])]),t._v(" "),a("tr",[a("td",[t._v("key")]),t._v(" "),a("td",[t._v("Unique key of this column, you can ignore this prop if you've set a unique "),a("code",{pre:!0},[t._v("dataIndex")])]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("customRender")]),t._v(" "),a("td",[t._v("Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config")]),t._v(" "),a("td",[t._v("Function(text, record, index) {}|slot-scope")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("sorter")]),t._v(" "),a("td",[t._v("Sort function for local sort, see "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort"}},[t._v("Array.sort")]),t._v("'s compareFunction. If you need sort buttons only, set to "),a("code",{pre:!0},[t._v("true")])]),t._v(" "),a("td",[t._v("Function|boolean")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("sortOrder")]),t._v(" "),a("td",[t._v("Order of sorted values: "),a("code",{pre:!0},[t._v("'ascend'")]),t._v(" "),a("code",{pre:!0},[t._v("'descend'")]),t._v(" "),a("code",{pre:!0},[t._v("false")])]),t._v(" "),a("td",[t._v("boolean|string")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("title")]),t._v(" "),a("td",[t._v("Title of this column")]),t._v(" "),a("td",[t._v("string|slot")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("width")]),t._v(" "),a("td",[t._v("Width of this column")]),t._v(" "),a("td",[t._v("string|number")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("customCell")]),t._v(" "),a("td",[t._v("Set props on per cell")]),t._v(" "),a("td",[t._v("Function(record, rowIndex)")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("customHeaderCell")]),t._v(" "),a("td",[t._v("Set props on per header cell")]),t._v(" "),a("td",[t._v("Function(column)")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("onFilter")]),t._v(" "),a("td",[t._v("Callback executed when the confirm filter button is clicked, Use as a "),a("code",{pre:!0},[t._v("filter")]),t._v(" event when using template or jsx")]),t._v(" "),a("td",[t._v("Function")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("onFilterDropdownVisibleChange")]),t._v(" "),a("td",[t._v("Callback executed when "),a("code",{pre:!0},[t._v("filterDropdownVisible")]),t._v(" is changed, Use as a "),a("code",{pre:!0},[t._v("filterDropdownVisible")]),t._v(" event when using template or jsx")]),t._v(" "),a("td",[t._v("function(visible) {}")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("slots")]),t._v(" "),a("td",[t._v("When using columns, you can use this property to configure the properties that support the slot, such as "),a("code",{pre:!0},[t._v("slots: { filterIcon: 'XXX'}")])]),t._v(" "),a("td",[t._v("object")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("scopedSlots")]),t._v(" "),a("td",[t._v("When using columns, you can use this property to configure the properties that support the slot-scope, such as "),a("code",{pre:!0},[t._v("scopedSlots: { customRender: 'XXX'}")])]),t._v(" "),a("td",[t._v("object")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h3",{attrs:{id:"ColumnGroup"}},[t._v("ColumnGroup "),a("a",{staticClass:"anchor",attrs:{href:"#ColumnGroup"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Property")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Type")]),t._v(" "),a("th",[t._v("Default")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("title")]),t._v(" "),a("td",[t._v("Title of the column group")]),t._v(" "),a("td",[t._v("string|slot")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("slots")]),t._v(" "),a("td",[t._v("When using columns, you can use this property to configure the properties that support the slot, such as "),a("code",{pre:!0},[t._v("slots: { title: 'XXX'}")])]),t._v(" "),a("td",[t._v("object")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h3",{attrs:{id:"pagination"}},[t._v("pagination "),a("a",{staticClass:"anchor",attrs:{href:"#pagination"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Properties for pagination.")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Property")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Type")]),t._v(" "),a("th",[t._v("Default")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("position")]),t._v(" "),a("td",[t._v("specify the position of "),a("code",{pre:!0},[t._v("Pagination")])]),t._v(" "),a("td",[t._v("'top' | 'bottom' | 'both'")]),t._v(" "),a("td",[t._v("'bottom'")])])])]),t._v(" "),a("p",[t._v("More about pagination, please check "),a("a",{attrs:{href:"/components/pagination/"}},[a("code",{pre:!0},[t._v("Pagination")])]),t._v(".")]),t._v(" "),a("h3",{attrs:{id:"rowSelection"}},[t._v("rowSelection "),a("a",{staticClass:"anchor",attrs:{href:"#rowSelection"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Properties for row selection.")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Property")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Type")]),t._v(" "),a("th",[t._v("Default")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("columnWidth")]),t._v(" "),a("td",[t._v("Set the width of the selection column")]),t._v(" "),a("td",[t._v("string|number")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("columnTitle")]),t._v(" "),a("td",[t._v("Set the title of the selection column")]),t._v(" "),a("td",[t._v("string|VNode")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("fixed")]),t._v(" "),a("td",[t._v("Fixed selection column on the left")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("getCheckboxProps")]),t._v(" "),a("td",[t._v("Get Checkbox or Radio props")]),t._v(" "),a("td",[t._v("Function(record)")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("hideDefaultSelections")]),t._v(" "),a("td",[t._v("Remove the default "),a("code",{pre:!0},[t._v("Select All")]),t._v(" and "),a("code",{pre:!0},[t._v("Select Invert")]),t._v(" selections")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("false")])])]),t._v(" "),a("tr",[a("td",[t._v("selectedRowKeys")]),t._v(" "),a("td",[t._v("Controlled selected row keys")]),t._v(" "),a("td",[t._v("string[]")]),t._v(" "),a("td",[t._v("[]")])]),t._v(" "),a("tr",[a("td",[t._v("selections")]),t._v(" "),a("td",[t._v("Custom selection config, only displays default selections when set to "),a("code",{pre:!0},[t._v("true")])]),t._v(" "),a("td",[t._v("object[]|boolean")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("type")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("checkbox")]),t._v(" or "),a("code",{pre:!0},[t._v("radio")])]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("checkbox")]),t._v(" | "),a("code",{pre:!0},[t._v("radio")])]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("checkbox")])])]),t._v(" "),a("tr",[a("td",[t._v("onChange")]),t._v(" "),a("td",[t._v("Callback executed when selected rows change")]),t._v(" "),a("td",[t._v("Function(selectedRowKeys, selectedRows)")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("onSelect")]),t._v(" "),a("td",[t._v("Callback executed when select/deselect one row")]),t._v(" "),a("td",[t._v("Function(record, selected, selectedRows, nativeEvent)")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("onSelectAll")]),t._v(" "),a("td",[t._v("Callback executed when select/deselect all rows")]),t._v(" "),a("td",[t._v("Function(selected, selectedRows, changeRows)")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("onSelectInvert")]),t._v(" "),a("td",[t._v("Callback executed when row selection is inverted")]),t._v(" "),a("td",[t._v("Function(selectedRows)")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h3",{attrs:{id:"selection"}},[t._v("selection "),a("a",{staticClass:"anchor",attrs:{href:"#selection"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Custom selection config")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Property")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Type")]),t._v(" "),a("th",[t._v("Default")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("key")]),t._v(" "),a("td",[t._v("Unique key of this selection")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("text")]),t._v(" "),a("td",[t._v("Display text of this selection")]),t._v(" "),a("td",[t._v("string|VNode")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("onSelect")]),t._v(" "),a("td",[t._v("Callback executed when this selection is clicked")]),t._v(" "),a("td",[t._v("Function(changeableRowKeys)")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h2",{attrs:{id:"Note"}},[t._v("Note "),a("a",{staticClass:"anchor",attrs:{href:"#Note"}},[t._v("#")])]),t._v(" "),a("p",[t._v("The values inside "),a("code",{pre:!0},[t._v("dataSource")]),t._v(" and "),a("code",{pre:!0},[t._v("columns")]),t._v(" should follow this in Table, and "),a("code",{pre:!0},[t._v("dataSource[i].key")]),t._v(" would be treated as key value default for "),a("code",{pre:!0},[t._v("dataSource")]),t._v(".")]),t._v(" "),a("p",[t._v("If "),a("code",{pre:!0},[t._v("dataSource[i].key")]),t._v(" is not provided, then you should specify the primary key of dataSource value via "),a("code",{pre:!0},[t._v("rowKey")]),t._v(". If not, warnings will show in browser console.")]),t._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// primary key is uid")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(' <Table rowKey="uid" />;\n// or\nreturn <Table rowKey={record => record.uid} />;\n')])])])}],!1,null,null,null);ia.options.__file="components/table/index.en-US.md";var oa=ia.exports,ca="# Table 表格\n\n 展示行列数据。\n\n## 何时使用\n\n- 当有大量结构化的数据需要展现时；\n- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。\n\n## 如何使用\n\n指定表格的数据源 `dataSource` 为一个数组。\n ## 代码演示",va="# Table\n\n A table displays rows of data.\n\n## When To Use\n\n- To display a collection of structured data.\n- To sort, search, paginate, filter data.\n\n## How To Use\n\nSpecify `dataSource` of Table as an array of data.\n## Examples\n",_a={category:"Components",cols:1,type:"Data Display",title:"Table",subtitle:"表格",render:function(){var t=arguments[0];return t("div",[t("md",{attrs:{cn:ca,us:va}}),t(d),t(j),t(w),t(L),t(E),t(H),t(X),t(et),t(vt),t(Ct),t(bt),t(Lt),t(Ot),t(Gt),t(Zt),t(es),t(_s),t(js),t(ws),t(Ls),t(Es),t("demo-container",{attrs:{code:aa}},[t(sa)]),t("api",[t("template",{slot:"cn"},[t(la)]),t(oa)])])}},da=Object(v.a)(_a,void 0,void 0,!1,null,null,null);da.options.__file="components/table/demo/index.vue";s.default=da.exports}}]);
|
