1 line
58 KiB
JavaScript
1 line
58 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{1461:function(t,s,e){"use strict";e.r(s);var a=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-transfer :dataSource="mockData" :titles="[\'Source\', \'Target\']" :targetKeys="targetKeys" :selectedKeys="selectedKeys" @change="handleChange" @selectChange="handleSelectChange" @scroll="handleScroll" :render="item=>item.title" :disabled="disabled"/>\n <a-switch unCheckedChildren="enabled" checkedChildren="disabled" :checked="disabled" @change="handleDisable" style="margin-top: 16px"/>\n </div>\n',script:"\n export default {\n data() {\n const mockData = [];\n for (let i = 0; i < 20; i++) {\n mockData.push({\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n disabled: i % 3 < 1,\n });\n }\n\n const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);\n return {\n mockData,\n targetKeys: oriTargetKeys,\n selectedKeys: ['1', '4'],\n disabled: false,\n };\n },\n methods: {\n handleChange(nextTargetKeys, direction, moveKeys) {\n this.targetKeys = nextTargetKeys;\n\n console.log('targetKeys: ', nextTargetKeys);\n console.log('direction: ', direction);\n console.log('moveKeys: ', moveKeys);\n },\n handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {\n this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];\n\n console.log('sourceSelectedKeys: ', sourceSelectedKeys);\n console.log('targetSelectedKeys: ', targetSelectedKeys);\n },\n handleScroll(direction, e) {\n console.log('direction:', direction);\n console.log('target:', e.target);\n },\n handleDisable(disabled) {\n this.disabled = disabled;\n },\n },\n };\n",style:null,us:"\n#### Basic\nThe most basic usage of `Transfer` involves providing the source data and target keys arrays, plus the rendering and some callback functions.\n",cn:"\n#### 基本用法\n最基本的用法，展示了 `dataSource`、`targetKeys`、每行的渲染函数 `render` 以及回调函数 `change` `selectChange` `scroll` 的用法。\n",sourceCode:'<template>\n <div>\n <a-transfer\n :dataSource="mockData"\n :titles="[\'Source\', \'Target\']"\n :targetKeys="targetKeys"\n :selectedKeys="selectedKeys"\n @change="handleChange"\n @selectChange="handleSelectChange"\n @scroll="handleScroll"\n :render="item=>item.title"\n :disabled="disabled"\n />\n <a-switch\n unCheckedChildren="enabled"\n checkedChildren="disabled"\n :checked="disabled"\n @change="handleDisable"\n style="margin-top: 16px"\n />\n </div>\n</template>\n<script>\n export default {\n data() {\n const mockData = [];\n for (let i = 0; i < 20; i++) {\n mockData.push({\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n disabled: i % 3 < 1,\n });\n }\n\n const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);\n return {\n mockData,\n targetKeys: oriTargetKeys,\n selectedKeys: [\'1\', \'4\'],\n disabled: false,\n };\n },\n methods: {\n handleChange(nextTargetKeys, direction, moveKeys) {\n this.targetKeys = nextTargetKeys;\n\n console.log(\'targetKeys: \', nextTargetKeys);\n console.log(\'direction: \', direction);\n console.log(\'moveKeys: \', moveKeys);\n },\n handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {\n this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];\n\n console.log(\'sourceSelectedKeys: \', sourceSelectedKeys);\n console.log(\'targetSelectedKeys: \', targetSelectedKeys);\n },\n handleScroll(direction, e) {\n console.log(\'direction:\', direction);\n console.log(\'target:\', e.target);\n },\n handleDisable(disabled) {\n this.disabled = disabled;\n },\n },\n };\n<\/script>\n'}}},[e("template",{slot:"component"},[e("div",[e("a-transfer",{attrs:{dataSource:t.mockData,titles:["Source","Target"],targetKeys:t.targetKeys,selectedKeys:t.selectedKeys,render:function(t){return t.title},disabled:t.disabled},on:{change:t.handleChange,selectChange:t.handleSelectChange,scroll:t.handleScroll}}),t._v(" "),e("a-switch",{staticStyle:{"margin-top":"16px"},attrs:{unCheckedChildren:"enabled",checkedChildren:"disabled",checked:t.disabled},on:{change:t.handleDisable}})],1)]),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"基本用法"}},[t._v("基本用法 "),e("a",{staticClass:"anchor",attrs:{href:"#基本用法"}},[t._v("#")])]),t._v(" "),e("p",[t._v("最基本的用法，展示了 "),e("code",[t._v("dataSource")]),t._v("、"),e("code",[t._v("targetKeys")]),t._v("、每行的渲染函数 "),e("code",[t._v("render")]),t._v(" 以及回调函数 "),e("code",[t._v("change")]),t._v(" "),e("code",[t._v("selectChange")]),t._v(" "),e("code",[t._v("scroll")]),t._v(" 的用法。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Basic"}},[t._v("Basic "),e("a",{staticClass:"anchor",attrs:{href:"#Basic"}},[t._v("#")])]),t._v(" "),e("p",[t._v("The most basic usage of "),e("code",[t._v("Transfer")]),t._v(" involves providing the source data and target keys arrays, plus the rendering and some callback functions.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-transfer")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"mockData"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":titles")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"['Source', 'Target']\"")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":targetKeys")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"targetKeys"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":selectedKeys")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"selectedKeys"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"handleChange"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@selectChange")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"handleSelectChange"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@scroll")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"handleScroll"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":render")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item=>item.title"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":disabled")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"disabled"')]),t._v("\n />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-switch")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("unCheckedChildren")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"enabled"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("checkedChildren")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"disabled"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":checked")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"disabled"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"handleDisable"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"margin-top: 16px"')]),t._v("\n />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" mockData = [];\n "),e("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),e("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),e("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < "),e("span",{staticClass:"hljs-number"},[t._v("20")]),t._v("; i++) {\n mockData.push({\n "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": i.toString(),\n "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("`content"),e("span",{staticClass:"hljs-subst"},[t._v("${i + "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v("}")]),t._v("`")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("`description of content"),e("span",{staticClass:"hljs-subst"},[t._v("${i + "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v("}")]),t._v("`")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("disabled")]),t._v(": i % "),e("span",{staticClass:"hljs-number"},[t._v("3")]),t._v(" < "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(",\n });\n }\n\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" oriTargetKeys = mockData.filter("),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("item")]),t._v(" =>")]),t._v(" +item.key % "),e("span",{staticClass:"hljs-number"},[t._v("3")]),t._v(" > "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(").map("),e("span",{staticClass:"hljs-function"},[e("span",{staticClass:"hljs-params"},[t._v("item")]),t._v(" =>")]),t._v(" item.key);\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n mockData,\n "),e("span",{staticClass:"hljs-attr"},[t._v("targetKeys")]),t._v(": oriTargetKeys,\n "),e("span",{staticClass:"hljs-attr"},[t._v("selectedKeys")]),t._v(": ["),e("span",{staticClass:"hljs-string"},[t._v("'1'")]),t._v(", "),e("span",{staticClass:"hljs-string"},[t._v("'4'")]),t._v("],\n "),e("span",{staticClass:"hljs-attr"},[t._v("disabled")]),t._v(": "),e("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(",\n };\n },\n "),e("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n handleChange(nextTargetKeys, direction, moveKeys) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".targetKeys = nextTargetKeys;\n\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'targetKeys: '")]),t._v(", nextTargetKeys);\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'direction: '")]),t._v(", direction);\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'moveKeys: '")]),t._v(", moveKeys);\n },\n handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];\n\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'sourceSelectedKeys: '")]),t._v(", sourceSelectedKeys);\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'targetSelectedKeys: '")]),t._v(", targetSelectedKeys);\n },\n handleScroll(direction, e) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'direction:'")]),t._v(", direction);\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'target:'")]),t._v(", e.target);\n },\n handleDisable(disabled) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".disabled = disabled;\n },\n },\n };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};a._withStripped=!0;var n=e(15),l=e.n(n),r={data:function(){for(var t=[],s=0;s<20;s++)t.push({key:s.toString(),title:"content"+(s+1),description:"description of content"+(s+1),disabled:s%3<1});var e=t.filter((function(t){return+t.key%3>1})).map((function(t){return t.key}));return{mockData:t,targetKeys:e,selectedKeys:["1","4"],disabled:!1}},methods:{handleChange:function(t,s,e){this.targetKeys=t,console.log("targetKeys: ",t),console.log("direction: ",s),console.log("moveKeys: ",e)},handleSelectChange:function(t,s){this.selectedKeys=[].concat(l()(t),l()(s)),console.log("sourceSelectedKeys: ",t),console.log("targetSelectedKeys: ",s)},handleScroll:function(t,s){console.log("direction:",t),console.log("target:",s.target)},handleDisable:function(t){this.disabled=t}}},i=e(31),o=Object(i.a)(r,a,[],!1,null,null,null);o.options.__file="components/transfer/demo/basic.md";var c=o.exports,v=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n <a-transfer :dataSource="mockData" showSearch="" :filterOption="filterOption" :targetKeys="targetKeys" @change="handleChange" @search="handleSearch" :render="item=>item.title">\n </a-transfer>\n',script:"\n export default {\n data() {\n return {\n mockData: [],\n targetKeys: [],\n };\n },\n mounted() {\n this.getMock();\n },\n methods: {\n getMock() {\n const targetKeys = [];\n const mockData = [];\n for (let i = 0; i < 20; i++) {\n const data = {\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n chosen: Math.random() * 2 > 1,\n };\n if (data.chosen) {\n targetKeys.push(data.key);\n }\n mockData.push(data);\n }\n this.mockData = mockData;\n this.targetKeys = targetKeys;\n },\n filterOption(inputValue, option) {\n return option.description.indexOf(inputValue) > -1;\n },\n handleChange(targetKeys, direction, moveKeys) {\n console.log(targetKeys, direction, moveKeys);\n this.targetKeys = targetKeys;\n },\n handleSearch(dir, value) {\n console.log('search:', dir, value);\n },\n },\n };\n",style:null,us:"\n#### Search\nTransfer with a search box.\n",cn:"\n#### 带搜索框\n带搜索框的穿梭框，可以自定义搜索函数。\n",sourceCode:'<template>\n <a-transfer\n :dataSource="mockData"\n showSearch\n :filterOption="filterOption"\n :targetKeys="targetKeys"\n @change="handleChange"\n @search="handleSearch"\n :render="item=>item.title"\n >\n </a-transfer>\n</template>\n<script>\n export default {\n data() {\n return {\n mockData: [],\n targetKeys: [],\n };\n },\n mounted() {\n this.getMock();\n },\n methods: {\n getMock() {\n const targetKeys = [];\n const mockData = [];\n for (let i = 0; i < 20; i++) {\n const data = {\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n chosen: Math.random() * 2 > 1,\n };\n if (data.chosen) {\n targetKeys.push(data.key);\n }\n mockData.push(data);\n }\n this.mockData = mockData;\n this.targetKeys = targetKeys;\n },\n filterOption(inputValue, option) {\n return option.description.indexOf(inputValue) > -1;\n },\n handleChange(targetKeys, direction, moveKeys) {\n console.log(targetKeys, direction, moveKeys);\n this.targetKeys = targetKeys;\n },\n handleSearch(dir, value) {\n console.log(\'search:\', dir, value);\n },\n },\n };\n<\/script>\n'}}},[e("template",{slot:"component"},[e("a-transfer",{attrs:{dataSource:t.mockData,showSearch:"",filterOption:t.filterOption,targetKeys:t.targetKeys,render:function(t){return t.title}},on:{change:t.handleChange,search:t.handleSearch}})],1),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"带搜索框"}},[t._v("带搜索框 "),e("a",{staticClass:"anchor",attrs:{href:"#带搜索框"}},[t._v("#")])]),t._v(" "),e("p",[t._v("带搜索框的穿梭框，可以自定义搜索函数。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Search"}},[t._v("Search "),e("a",{staticClass:"anchor",attrs:{href:"#Search"}},[t._v("#")])]),t._v(" "),e("p",[t._v("Transfer with a search box.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-transfer")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"mockData"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("showSearch")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":filterOption")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"filterOption"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":targetKeys")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"targetKeys"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"handleChange"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@search")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"handleSearch"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":render")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item=>item.title"')]),t._v("\n >")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-transfer")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),e("span",{staticClass:"hljs-attr"},[t._v("mockData")]),t._v(": [],\n "),e("span",{staticClass:"hljs-attr"},[t._v("targetKeys")]),t._v(": [],\n };\n },\n mounted() {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".getMock();\n },\n "),e("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n getMock() {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" targetKeys = [];\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" mockData = [];\n "),e("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),e("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),e("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < "),e("span",{staticClass:"hljs-number"},[t._v("20")]),t._v("; i++) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = {\n "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": i.toString(),\n "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("`content"),e("span",{staticClass:"hljs-subst"},[t._v("${i + "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v("}")]),t._v("`")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("`description of content"),e("span",{staticClass:"hljs-subst"},[t._v("${i + "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v("}")]),t._v("`")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("chosen")]),t._v(": "),e("span",{staticClass:"hljs-built_in"},[t._v("Math")]),t._v(".random() * "),e("span",{staticClass:"hljs-number"},[t._v("2")]),t._v(" > "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(",\n };\n "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (data.chosen) {\n targetKeys.push(data.key);\n }\n mockData.push(data);\n }\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".mockData = mockData;\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".targetKeys = targetKeys;\n },\n filterOption(inputValue, option) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" option.description.indexOf(inputValue) > "),e("span",{staticClass:"hljs-number"},[t._v("-1")]),t._v(";\n },\n handleChange(targetKeys, direction, moveKeys) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log(targetKeys, direction, moveKeys);\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".targetKeys = targetKeys;\n },\n handleSearch(dir, value) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),e("span",{staticClass:"hljs-string"},[t._v("'search:'")]),t._v(", dir, value);\n },\n },\n };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};v._withStripped=!0;var _={data:function(){return{mockData:[],targetKeys:[]}},mounted:function(){this.getMock()},methods:{getMock:function(){for(var t=[],s=[],e=0;e<20;e++){var a={key:e.toString(),title:"content"+(e+1),description:"description of content"+(e+1),chosen:2*Math.random()>1};a.chosen&&t.push(a.key),s.push(a)}this.mockData=s,this.targetKeys=t},filterOption:function(t,s){return s.description.indexOf(t)>-1},handleChange:function(t,s,e){console.log(t,s,e),this.targetKeys=t},handleSearch:function(t,s){console.log("search:",t,s)}}},d=Object(i.a)(_,v,[],!1,null,null,null);d.options.__file="components/transfer/demo/search.md";var h=d.exports,p=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n <a-transfer :dataSource="mockData" showSearch="" :listStyle="{\n width: \'250px\',\n height: \'300px\',\n }" :operations="[\'to right\', \'to left\']" :targetKeys="targetKeys" @change="handleChange" :render="item=>`${item.title}-${item.description}`">\n <a-button size="small" style="float:right;margin: 5px" @click="getMock" slot="footer" slot-scope="props">\n reload\n </a-button>\n <span slot="notFoundContent">\n 没数据\n </span>\n </a-transfer>\n',script:"\n export default {\n data() {\n return {\n mockData: [],\n targetKeys: [],\n };\n },\n mounted() {\n this.getMock();\n },\n methods: {\n getMock() {\n const targetKeys = [];\n const mockData = [];\n for (let i = 0; i < 20; i++) {\n const data = {\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n chosen: Math.random() * 2 > 1,\n };\n if (data.chosen) {\n targetKeys.push(data.key);\n }\n mockData.push(data);\n }\n this.mockData = mockData;\n this.targetKeys = targetKeys;\n },\n handleChange(targetKeys, direction, moveKeys) {\n console.log(targetKeys, direction, moveKeys);\n this.targetKeys = targetKeys;\n },\n },\n };\n",style:null,us:"\n#### Advanced\nYou can customize the labels of the transfer buttons, the width and height of the columns, and what should be displayed in the footer.\n",cn:"\n#### 高级用法\n穿梭框高级用法，可配置操作文案，可定制宽高，可对底部进行自定义渲染。\n",sourceCode:'<template>\n <a-transfer\n :dataSource="mockData"\n showSearch\n :listStyle="{\n width: \'250px\',\n height: \'300px\',\n }"\n :operations="[\'to right\', \'to left\']"\n :targetKeys="targetKeys"\n @change="handleChange"\n :render="item=>`${item.title}-${item.description}`"\n >\n <a-button\n size="small"\n style="float:right;margin: 5px"\n @click="getMock"\n slot="footer"\n slot-scope="props"\n >\n reload\n </a-button>\n <span slot="notFoundContent">\n 没数据\n </span>\n </a-transfer>\n</template>\n<script>\n export default {\n data() {\n return {\n mockData: [],\n targetKeys: [],\n };\n },\n mounted() {\n this.getMock();\n },\n methods: {\n getMock() {\n const targetKeys = [];\n const mockData = [];\n for (let i = 0; i < 20; i++) {\n const data = {\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n chosen: Math.random() * 2 > 1,\n };\n if (data.chosen) {\n targetKeys.push(data.key);\n }\n mockData.push(data);\n }\n this.mockData = mockData;\n this.targetKeys = targetKeys;\n },\n handleChange(targetKeys, direction, moveKeys) {\n console.log(targetKeys, direction, moveKeys);\n this.targetKeys = targetKeys;\n },\n },\n };\n<\/script>\n'}}},[e("template",{slot:"component"},[e("a-transfer",{attrs:{dataSource:t.mockData,showSearch:"",listStyle:{width:"250px",height:"300px"},operations:["to right","to left"],targetKeys:t.targetKeys,render:function(t){return t.title+"-"+t.description}},on:{change:t.handleChange},scopedSlots:t._u([{key:"footer",fn:function(s){return e("a-button",{staticStyle:{float:"right",margin:"5px"},attrs:{size:"small"},on:{click:t.getMock}},[t._v("\n reload\n ")])}}])},[t._v(" "),e("span",{attrs:{slot:"notFoundContent"},slot:"notFoundContent"},[t._v("\n 没数据\n ")])])],1),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"高级用法"}},[t._v("高级用法 "),e("a",{staticClass:"anchor",attrs:{href:"#高级用法"}},[t._v("#")])]),t._v(" "),e("p",[t._v("穿梭框高级用法，可配置操作文案，可定制宽高，可对底部进行自定义渲染。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Advanced"}},[t._v("Advanced "),e("a",{staticClass:"anchor",attrs:{href:"#Advanced"}},[t._v("#")])]),t._v(" "),e("p",[t._v("You can customize the labels of the transfer buttons, the width and height of the columns, and what should be displayed in the footer.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-transfer")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"mockData"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("showSearch")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":listStyle")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"{\n width: '250px',\n height: '300px',\n }\"")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":operations")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"['to right', 'to left']\"")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":targetKeys")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"targetKeys"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"handleChange"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":render")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"item=>`${item.title}-${item.description}`"')]),t._v("\n >")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("size")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"small"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"float:right;margin: 5px"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"getMock"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"footer"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"props"')]),t._v("\n >")]),t._v("\n reload\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"notFoundContent"')]),t._v(">")]),t._v("\n 没数据\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-transfer")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),e("span",{staticClass:"hljs-attr"},[t._v("mockData")]),t._v(": [],\n "),e("span",{staticClass:"hljs-attr"},[t._v("targetKeys")]),t._v(": [],\n };\n },\n mounted() {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".getMock();\n },\n "),e("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n getMock() {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" targetKeys = [];\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" mockData = [];\n "),e("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),e("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),e("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < "),e("span",{staticClass:"hljs-number"},[t._v("20")]),t._v("; i++) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = {\n "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": i.toString(),\n "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("`content"),e("span",{staticClass:"hljs-subst"},[t._v("${i + "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v("}")]),t._v("`")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("`description of content"),e("span",{staticClass:"hljs-subst"},[t._v("${i + "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v("}")]),t._v("`")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("chosen")]),t._v(": "),e("span",{staticClass:"hljs-built_in"},[t._v("Math")]),t._v(".random() * "),e("span",{staticClass:"hljs-number"},[t._v("2")]),t._v(" > "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(",\n };\n "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (data.chosen) {\n targetKeys.push(data.key);\n }\n mockData.push(data);\n }\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".mockData = mockData;\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".targetKeys = targetKeys;\n },\n handleChange(targetKeys, direction, moveKeys) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log(targetKeys, direction, moveKeys);\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".targetKeys = targetKeys;\n },\n },\n };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};p._withStripped=!0;var g={data:function(){return{mockData:[],targetKeys:[]}},mounted:function(){this.getMock()},methods:{getMock:function(){for(var t=[],s=[],e=0;e<20;e++){var a={key:e.toString(),title:"content"+(e+1),description:"description of content"+(e+1),chosen:2*Math.random()>1};a.chosen&&t.push(a.key),s.push(a)}this.mockData=s,this.targetKeys=t},handleChange:function(t,s,e){console.log(t,s,e),this.targetKeys=t}}},m=Object(i.a)(g,p,[],!1,null,null,null);m.options.__file="components/transfer/demo/advanced.md";var u=m.exports,y=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n <a-transfer :dataSource="mockData" :listStyle="{\n width: \'300px\',\n height: \'300px\',\n }" :targetKeys="targetKeys" @change="handleChange" :render="renderItem">\n </a-transfer>\n',script:'\n export default {\n data() {\n return {\n mockData: [],\n targetKeys: [],\n };\n },\n mounted() {\n this.getMock();\n },\n methods: {\n getMock() {\n const targetKeys = [];\n const mockData = [];\n for (let i = 0; i < 20; i++) {\n const data = {\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n chosen: Math.random() * 2 > 1,\n };\n if (data.chosen) {\n targetKeys.push(data.key);\n }\n mockData.push(data);\n }\n this.mockData = mockData;\n this.targetKeys = targetKeys;\n },\n renderItem(item) {\n const customLabel = (\n <span class="custom-item">\n {item.title} - {item.description}\n </span>\n );\n\n return {\n label: customLabel, // for displayed item\n value: item.title, // for title and filter matching\n };\n },\n handleChange(targetKeys, direction, moveKeys) {\n console.log(targetKeys, direction, moveKeys);\n this.targetKeys = targetKeys;\n },\n },\n };\n',style:null,us:"\n#### Custom datasource\nCustom each Transfer Item, and in this way you can render a complex datasource.\n",cn:"\n#### 自定义渲染行数据\n自定义渲染每一个 Transfer Item，可用于渲染复杂数据。\n",sourceCode:'<template>\n <a-transfer\n :dataSource="mockData"\n :listStyle="{\n width: \'300px\',\n height: \'300px\',\n }"\n :targetKeys="targetKeys"\n @change="handleChange"\n :render="renderItem"\n >\n </a-transfer>\n</template>\n<script>\n export default {\n data() {\n return {\n mockData: [],\n targetKeys: [],\n };\n },\n mounted() {\n this.getMock();\n },\n methods: {\n getMock() {\n const targetKeys = [];\n const mockData = [];\n for (let i = 0; i < 20; i++) {\n const data = {\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n chosen: Math.random() * 2 > 1,\n };\n if (data.chosen) {\n targetKeys.push(data.key);\n }\n mockData.push(data);\n }\n this.mockData = mockData;\n this.targetKeys = targetKeys;\n },\n renderItem(item) {\n const customLabel = (\n <span class="custom-item">\n {item.title} - {item.description}\n </span>\n );\n\n return {\n label: customLabel, // for displayed item\n value: item.title, // for title and filter matching\n };\n },\n handleChange(targetKeys, direction, moveKeys) {\n console.log(targetKeys, direction, moveKeys);\n this.targetKeys = targetKeys;\n },\n },\n };\n<\/script>\n'}}},[e("template",{slot:"component"},[e("a-transfer",{attrs:{dataSource:t.mockData,listStyle:{width:"300px",height:"300px"},targetKeys:t.targetKeys,render:t.renderItem},on:{change:t.handleChange}})],1),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"自定义渲染行数据"}},[t._v("自定义渲染行数据 "),e("a",{staticClass:"anchor",attrs:{href:"#自定义渲染行数据"}},[t._v("#")])]),t._v(" "),e("p",[t._v("自定义渲染每一个 Transfer Item，可用于渲染复杂数据。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Custom-datasource"}},[t._v("Custom datasource "),e("a",{staticClass:"anchor",attrs:{href:"#Custom-datasource"}},[t._v("#")])]),t._v(" "),e("p",[t._v("Custom each Transfer Item, and in this way you can render a complex datasource.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-transfer")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"mockData"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":listStyle")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"{\n width: '300px',\n height: '300px',\n }\"")]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":targetKeys")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"targetKeys"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"handleChange"')]),t._v("\n "),e("span",{staticClass:"hljs-attr"},[t._v(":render")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"renderItem"')]),t._v("\n >")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("a-transfer")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),e("span",{staticClass:"hljs-attr"},[t._v("mockData")]),t._v(": [],\n "),e("span",{staticClass:"hljs-attr"},[t._v("targetKeys")]),t._v(": [],\n };\n },\n mounted() {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".getMock();\n },\n "),e("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n getMock() {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" targetKeys = [];\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" mockData = [];\n "),e("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),e("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),e("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < "),e("span",{staticClass:"hljs-number"},[t._v("20")]),t._v("; i++) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" data = {\n "),e("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v(": i.toString(),\n "),e("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("`content"),e("span",{staticClass:"hljs-subst"},[t._v("${i + "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v("}")]),t._v("`")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("`description of content"),e("span",{staticClass:"hljs-subst"},[t._v("${i + "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v("}")]),t._v("`")]),t._v(",\n "),e("span",{staticClass:"hljs-attr"},[t._v("chosen")]),t._v(": "),e("span",{staticClass:"hljs-built_in"},[t._v("Math")]),t._v(".random() * "),e("span",{staticClass:"hljs-number"},[t._v("2")]),t._v(" > "),e("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(",\n };\n "),e("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (data.chosen) {\n targetKeys.push(data.key);\n }\n mockData.push(data);\n }\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".mockData = mockData;\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".targetKeys = targetKeys;\n },\n renderItem(item) {\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" customLabel = (\n "),e("span",{staticClass:"xml"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"custom-item"')]),t._v(">")]),t._v("\n {item.title} - {item.description}\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")])]),t._v("\n );\n\n "),e("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),e("span",{staticClass:"hljs-attr"},[t._v("label")]),t._v(": customLabel, "),e("span",{staticClass:"hljs-comment"},[t._v("// for displayed item")]),t._v("\n value: item.title, "),e("span",{staticClass:"hljs-comment"},[t._v("// for title and filter matching")]),t._v("\n };\n },\n handleChange(targetKeys, direction, moveKeys) {\n "),e("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log(targetKeys, direction, moveKeys);\n "),e("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".targetKeys = targetKeys;\n },\n },\n };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};y._withStripped=!0;var C={data:function(){return{mockData:[],targetKeys:[]}},mounted:function(){this.getMock()},methods:{getMock:function(){for(var t=[],s=[],e=0;e<20;e++){var a={key:e.toString(),title:"content"+(e+1),description:"description of content"+(e+1),chosen:2*Math.random()>1};a.chosen&&t.push(a.key),s.push(a)}this.mockData=s,this.targetKeys=t},renderItem:function(t){return{label:(0,this.$createElement)("span",{class:"custom-item"},[t.title," - ",t.description]),value:t.title}},handleChange:function(t,s,e){console.log(t,s,e),this.targetKeys=t}}},j=Object(i.a)(C,y,[],!1,null,null,null);j.options.__file="components/transfer/demo/custom-item.md";var f=j.exports,k=function(){var t=this.$createElement;this._self._c;return this._m(0)};k._withStripped=!0;var K=Object(i.a)({},k,[function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[e("h2",{attrs:{id:"API"}},[t._v("API "),e("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),t._v(" "),e("th",[t._v("说明")]),t._v(" "),e("th",[t._v("类型")]),t._v(" "),e("th",[t._v("默认值")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("dataSource")]),t._v(" "),e("td",[t._v("数据源，其中的数据将会被渲染到左边一栏中，"),e("code",{pre:!0},[t._v("targetKeys")]),t._v(" 中指定的除外。")]),t._v(" "),e("td",[t._v("[{key: string.isRequired,title: string.isRequired,description: string,disabled: bool}][]")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("disabled")]),t._v(" "),e("td",[t._v("是否禁用")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("filterOption")]),t._v(" "),e("td",[t._v("接收 "),e("code",{pre:!0},[t._v("inputValue")]),t._v(" "),e("code",{pre:!0},[t._v("option")]),t._v(" 两个参数，当 "),e("code",{pre:!0},[t._v("option")]),t._v(" 符合筛选条件时，应返回 "),e("code",{pre:!0},[t._v("true")]),t._v("，反之则返回 "),e("code",{pre:!0},[t._v("false")]),t._v("。")]),t._v(" "),e("td",[t._v("(inputValue, option): boolean")]),t._v(" "),e("td")]),t._v(" "),e("tr",[e("td",[t._v("footer")]),t._v(" "),e("td",[t._v("可以设置为一个 作用域插槽")]),t._v(" "),e("td",[t._v('slot="footer" slot-scope="props"')]),t._v(" "),e("td")]),t._v(" "),e("tr",[e("td",[t._v("lazy")]),t._v(" "),e("td",[t._v("Transfer 使用了 [vc-lazy-load]优化性能，这里可以设置相关参数。设为 "),e("code",{pre:!0},[t._v("false")]),t._v(" 可以关闭懒加载。")]),t._v(" "),e("td",[t._v("object|boolean")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("{ height: 32, offset: 32 }")])])]),t._v(" "),e("tr",[e("td",[t._v("listStyle")]),t._v(" "),e("td",[t._v("两个穿梭框的自定义样式")]),t._v(" "),e("td",[t._v("object")]),t._v(" "),e("td")]),t._v(" "),e("tr",[e("td",[t._v("locale")]),t._v(" "),e("td",[t._v("各种语言")]),t._v(" "),e("td",[t._v("object")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("{ itemUnit: '项', itemsUnit: '项', notFoundContent: '列表为空', searchPlaceholder: '请输入搜索内容' }")])])]),t._v(" "),e("tr",[e("td",[t._v("operations")]),t._v(" "),e("td",[t._v("操作文案集合，顺序从上至下")]),t._v(" "),e("td",[t._v("string[]")]),t._v(" "),e("td",[t._v("['>', '<']")])]),t._v(" "),e("tr",[e("td",[t._v("render")]),t._v(" "),e("td",[t._v("每行数据渲染函数，该函数的入参为 "),e("code",{pre:!0},[t._v("dataSource")]),t._v(" 中的项，返回值为 element。或者返回一个普通对象，其中 "),e("code",{pre:!0},[t._v("label")]),t._v(" 字段为 element，"),e("code",{pre:!0},[t._v("value")]),t._v(" 字段为 title")]),t._v(" "),e("td",[t._v("Function(record)")]),t._v(" "),e("td")]),t._v(" "),e("tr",[e("td",[t._v("selectedKeys")]),t._v(" "),e("td",[t._v("设置哪些项应该被选中")]),t._v(" "),e("td",[t._v("string[]")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("showSearch")]),t._v(" "),e("td",[t._v("是否显示搜索框")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("targetKeys")]),t._v(" "),e("td",[t._v("显示在右侧框数据的 key 集合")]),t._v(" "),e("td",[t._v("string[]")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("titles")]),t._v(" "),e("td",[t._v("标题集合，顺序从左至右")]),t._v(" "),e("td",[t._v("string[]")]),t._v(" "),e("td",[t._v("['', '']")])])])]),t._v(" "),e("h3",{attrs:{id:"事件"}},[t._v("事件 "),e("a",{staticClass:"anchor",attrs:{href:"#事件"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("事件名称")]),t._v(" "),e("th",[t._v("说明")]),t._v(" "),e("th",[t._v("回调参数")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("change")]),t._v(" "),e("td",[t._v("选项在两栏之间转移时的回调函数")]),t._v(" "),e("td",[t._v("(targetKeys, direction, moveKeys): void")])]),t._v(" "),e("tr",[e("td",[t._v("scroll")]),t._v(" "),e("td",[t._v("选项列表滚动时的回调函数")]),t._v(" "),e("td",[t._v("(direction, event): void")])]),t._v(" "),e("tr",[e("td",[t._v("search")]),t._v(" "),e("td",[t._v("搜索框内容时改变时的回调函数")]),t._v(" "),e("td",[t._v("(direction: 'left'|'right', value: string): void")])]),t._v(" "),e("tr",[e("td",[t._v("selectChange")]),t._v(" "),e("td",[t._v("选中项发生改变时的回调函数")]),t._v(" "),e("td",[t._v("(sourceSelectedKeys, targetSelectedKeys): void")])])])]),t._v(" "),e("h2",{attrs:{id:"注意"}},[t._v("注意 "),e("a",{staticClass:"anchor",attrs:{href:"#注意"}},[t._v("#")])]),t._v(" "),e("p",[t._v("按照 Vue 最新的规范，所有的组件数组最好绑定 key。在 Transfer 中，"),e("code",{pre:!0},[t._v("dataSource")]),t._v("里的数据值需要指定 "),e("code",{pre:!0},[t._v("key")]),t._v(" 值。对于 "),e("code",{pre:!0},[t._v("dataSource")]),t._v(" 默认将每列数据的 "),e("code",{pre:!0},[t._v("key")]),t._v(" 属性作为唯一的标识。")]),t._v(" "),e("p",[t._v("如果你的数据没有这个属性，务必使用 "),e("code",{pre:!0},[t._v("rowKey")]),t._v(" 来指定数据列的主键。")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[e("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// 比如你的数据主键是 uid")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"xml"}},[e("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("Transfer")]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v(":rowKey")]),t._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"record => record.uid"')]),t._v(" />")]),t._v(";\n")])])])])}],!1,null,null,null);K.options.__file="components/transfer/index.zh-CN.md";var b=K.exports,S=function(){var t=this.$createElement;this._self._c;return this._m(0)};S._withStripped=!0;var w=Object(i.a)({},S,[function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[e("h2",{attrs:{id:"API"}},[t._v("API "),e("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Property")]),t._v(" "),e("th",[t._v("Description")]),t._v(" "),e("th",[t._v("Type")]),t._v(" "),e("th",[t._v("Default")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("dataSource")]),t._v(" "),e("td",[t._v("Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in "),e("code",{pre:!0},[t._v("targetKeys")]),t._v(" prop.")]),t._v(" "),e("td",[t._v("[{key: string.isRequired,title: string.isRequired,description: string,disabled: bool}]")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("disabled")]),t._v(" "),e("td",[t._v("Whether disabled transfer")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("filterOption")]),t._v(" "),e("td",[t._v("A function to determine whether an item should show in search result list")]),t._v(" "),e("td",[t._v("(inputValue, option): boolean")]),t._v(" "),e("td")]),t._v(" "),e("tr",[e("td",[t._v("footer")]),t._v(" "),e("td",[t._v("customize the progress dot by setting a scoped slot")]),t._v(" "),e("td",[t._v('slot="footer" slot-scope="props"')]),t._v(" "),e("td")]),t._v(" "),e("tr",[e("td",[t._v("lazy")]),t._v(" "),e("td",[t._v("property of vc-lazy-load for lazy rendering items. Turn off it by set to "),e("code",{pre:!0},[t._v("false")]),t._v(".")]),t._v(" "),e("td",[t._v("object|boolean")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("{ height: 32, offset: 32 }")])])]),t._v(" "),e("tr",[e("td",[t._v("listStyle")]),t._v(" "),e("td",[t._v("A custom CSS style used for rendering the transfer columns.")]),t._v(" "),e("td",[t._v("object")]),t._v(" "),e("td")]),t._v(" "),e("tr",[e("td",[t._v("locale")]),t._v(" "),e("td",[t._v("i18n text including filter, empty text, item unit, etc")]),t._v(" "),e("td",[t._v("object")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("{ itemUnit: 'item', itemsUnit: 'items', notFoundContent: 'The list is empty', searchPlaceholder: 'Search here' }")])])]),t._v(" "),e("tr",[e("td",[t._v("operations")]),t._v(" "),e("td",[t._v("A set of operations that are sorted from top to bottom.")]),t._v(" "),e("td",[t._v("string[]")]),t._v(" "),e("td",[t._v("['>', '<']")])]),t._v(" "),e("tr",[e("td",[t._v("render")]),t._v(" "),e("td",[t._v("The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a element which is generated from that record. Also, it can return a plain object with "),e("code",{pre:!0},[t._v("value")]),t._v(" and "),e("code",{pre:!0},[t._v("label")]),t._v(", "),e("code",{pre:!0},[t._v("label")]),t._v(" is a element and "),e("code",{pre:!0},[t._v("value")]),t._v(" is for title")]),t._v(" "),e("td",[t._v("Function(record)")]),t._v(" "),e("td")]),t._v(" "),e("tr",[e("td",[t._v("selectedKeys")]),t._v(" "),e("td",[t._v("A set of keys of selected items.")]),t._v(" "),e("td",[t._v("string[]")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("showSearch")]),t._v(" "),e("td",[t._v("If included, a search box is shown on each column.")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("targetKeys")]),t._v(" "),e("td",[t._v("A set of keys of elements that are listed on the right column.")]),t._v(" "),e("td",[t._v("string[]")]),t._v(" "),e("td",[t._v("[]")])]),t._v(" "),e("tr",[e("td",[t._v("titles")]),t._v(" "),e("td",[t._v("A set of titles that are sorted from left to right.")]),t._v(" "),e("td",[t._v("string[]")]),t._v(" "),e("td",[t._v("-")])])])]),t._v(" "),e("h3",{attrs:{id:"events"}},[t._v("events "),e("a",{staticClass:"anchor",attrs:{href:"#events"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Events Name")]),t._v(" "),e("th",[t._v("Description")]),t._v(" "),e("th",[t._v("Arguments")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("change")]),t._v(" "),e("td",[t._v("A callback function that is executed when the transfer between columns is complete.")]),t._v(" "),e("td",[t._v("(targetKeys, direction, moveKeys): void")])]),t._v(" "),e("tr",[e("td",[t._v("scroll")]),t._v(" "),e("td",[t._v("A callback function which is executed when scroll options list")]),t._v(" "),e("td",[t._v("(direction, event): void")])]),t._v(" "),e("tr",[e("td",[t._v("search")]),t._v(" "),e("td",[t._v("A callback function which is executed when search field are changed")]),t._v(" "),e("td",[t._v("(direction: 'left'|'right', value: string): void")])]),t._v(" "),e("tr",[e("td",[t._v("selectChange")]),t._v(" "),e("td",[t._v("A callback function which is executed when selected items are changed.")]),t._v(" "),e("td",[t._v("(sourceSelectedKeys, targetSelectedKeys): void")])])])]),t._v(" "),e("h2",{attrs:{id:"Warning"}},[t._v("Warning "),e("a",{staticClass:"anchor",attrs:{href:"#Warning"}},[t._v("#")])]),t._v(" "),e("p",[t._v("According the standard of Vue, the key should always be supplied directly to the elements in the array. In Transfer, the keys should be set on the elements included in "),e("code",{pre:!0},[t._v("dataSource")]),t._v(" array. By default, "),e("code",{pre:!0},[t._v("key")]),t._v(" property is used as an unique identifier.")]),t._v(" "),e("p",[t._v("If there's no "),e("code",{pre:!0},[t._v("key")]),t._v(" in your data, you should use "),e("code",{pre:!0},[t._v("rowKey")]),t._v(" to specify the key that will be used for uniquely identify each element.")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[e("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// eg. your primary key is `uid`")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"xml"}},[e("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("Transfer")]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v(":rowKey")]),t._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"record => record.uid"')]),t._v(" />")]),t._v(";\n")])])])])}],!1,null,null,null);w.options.__file="components/transfer/index.en-US.md";var D=w.exports,x="# 穿梭框\n 双栏穿梭选择框。\n ## 何时使用\n\n- 需要在多个可选项中进行多选时。\n- 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。\n\n穿梭选择框用直观的方式在两栏中移动元素，完成选择行为。\n\n选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。\n其中，左边一栏为 `source`，右边一栏为 `target`，API 的设计也反映了这两个概念。\n ## 代码演示",T="# Transfer\n Double column transfer choice box.\n\n## When To Use\n\n- It is a select control essentially which can be use for selecting multiple items.\n- Transfer can display more information for items and take up more space.\n\nTransfer the elements between two columns in an intuitive and efficient way.\n\nOne or more elements can be selected from either column, one click on the proper `direction` button, and the transfer is done. The left column is considered the `source` and the right column is considered the `target`. As you can see in the API description, these names are reflected in.\n\n ## Examples\n ",M={category:"Components",subtitle:"穿梭框",type:"Data Entry",title:"Transfer",cols:"1",render:function(){var t=arguments[0];return t("div",[t("md",{attrs:{cn:x,us:T}}),t(c),t(h),t(u),t(f),t("api",[t("template",{slot:"cn"},[t(b)]),t(D)])])}},$=Object(i.a)(M,void 0,void 0,!1,null,null,null);$.options.__file="components/transfer/demo/index.vue";s.default=$.exports}}]); |