Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to realize the provincial and municipal shuttle frame in Ant Design Vue". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to realize the provincial and municipal shuttle frame in Ant Design Vue"!

Tree shuttle frame

The official tree shuttle box is as follows, with the tree structure on the left and the list on the right.

In essence, there are two sets of data sources, tree uses tree data sources, transfer uses list data sources, the multi-dimensional tree data sources into one-dimensional, that is, list data.

Use the shuttle box with search box (https://antdv.com/components/transfer-cn/) where you can view official documents.

City shuttle frame

The reasons for transforming the shuttle frame are:

TargetKeys only needs city data, not province data.

In the source shuttle box, the child node and the parent node are not associated with the selected relationship, which needs to be dealt with. After all, the provincial and municipal level needs to be linked.

The target shuttle frame should also support the tree structure.

The main function points are:

Tree structure data processing: keyword filtering; selected data disabled state

Implement the association selection between the parent node and the node

The right side of the shuttle box shows only city data, not province data.

Selected city data: return with provincial information to meet the interface requirements, that is, return tree structure

The essence of transformation: the second transformation based on transfer is mainly the processing of data, and the components are basically unchanged.

Component parameters and events

Custom parameters: consider exposed parameters, effects of parameters, attributes and other custom events: consider exposed callback events

/ / Custom parameter export default {props: {dataSource: {/ / data source type: Array, default: () = > [],}, targetKey: {/ / key collection of right side frame data type: Array, default: () = > [],} / / handleChange callback function: treeData- left tree structure data, toArray- right tree structure data, targetKeys- selects city key collection this.$emit ("handleChange", this.treeData, toArray, this.targetKeys); shuttle box handles data source processing

Shuttle frame data processing (transferDataSource): converting multidimensional data to one-dimensional data

Tree data processing (treeData): data source filtering processing, data prohibition operation processing

/ data source example const dataSource = [{pid: "0", key: "1000", label: "Heilongjiang Province", title: "Heilongjiang Province", children: [{pid: "1000", key: "1028", label: "Daxing'an Mountains", title: "Daxing'an Mountains",},],} ] / / ant-transfer shuttle box data source transferDataSource () {/ / shuttle box data source let transferDataSource = []; / / shuttle box data conversion, multi-dimensional to one-dimensional function flatten (list = []) {list.forEach ((item) = > {transferDataSource.push (item); / / Sub-data processing if (item.children & & item.children.length) {flatten (item.children);}}) } if (this.dataSource & & this.dataSource.length) {flatten (JSON.parse (JSON.stringify (this.dataSource);} return transferDataSource;} / / ant-tree tree data source treeData () {/ / Tree control data source const validate = (node, map) = > {/ / data filtering includes return node.title.includes (this.keyword);} Const result = filterTree (this.dataSource, this.targetKeys, validate, this.keyword); return result;} / / Tree structure data filtering const filterTree = (tree = [], targetKeys = [], validate = () = > {}) = > {if (! tree.length) {return [];} const result = [] For (let item of tree) {if (item.children & & item.children.length) {let node = {... item, children: [], disabled: targetKeys.includes (item.key), / / disable attribute}; / / Child processing for (let o of item.children) {if (! validate.apply (null, [o, targetKeys]) continue Node.children.push ({... o, disabled: targetKeys.includes (o.key)});} if (node.children.length) {result.push (node);} return result;}; Shuttle box event handling

Change event, callback data (handleTransferChange)

Search search event (handleTransferSearch)

/ / Shuttle box: change event handleTransferChange (targetKeys, direction, moveKeys) {/ / filter: avoid header operation bar "Select all" select provincial key to the right this.targetKeys = targetKeys.filter ((o) = >! this.pidKeys.includes (o)); / / select city data: return with provincial information to meet interface requirements const validate = (node, map) = > {return map.includes (node.key) & node.title.includes (this.keyword) }; let toArray = filterTree (this.dataSource, this.targetKeys, validate); / / handleChange callback function: treeData- left tree structure data, toArray- right tree structure data, targetKeys- selects city key collection this.$emit ("handleChange", this.treeData, toArray, this.targetKeys);}, / / shuttle box: search event handleTransferSearch (dir, value) {if (dir = "left") {this.keyword = value;}}, tree event

Change event, handling the linkage between parent and child nodes (handleTreeChecked)

Expand event: tree expansion and contraction (handleTreeExpanded)

/ / Tree control: change event handleTreeChecked (keys, e, checkedKeys, itemSelect, itemSelectAll) {const {eventKey, checked, dataRef: {children},} = e.node; if (this.pidKeys & & this.pidKeys.includes (eventKey)) {/ / parent node selected: select let childKeys = children? Children.map ((item) = > item.key): []; if (childKeys.length) itemSelectAll (childKeys,! checked);} itemSelect (eventKey,! isChecked (checkedKeys, eventKey)); / / Child node selected}, / / Tree control: expand event handleTreeExpanded (expandedKeys) {this.expandedKeys = expandedKeys;}, clear event

When you reopen it, you need to restore the component state, such as scroll bar position, search box keywords, etc.

HandleReset () {this.keyword = "; this.$nextTick () = > {/ / search box keyword clear const ele = this.$refs.singleTreeTransfer.$el.getElementsByClassName (" anticon-close-circle "); if (ele & & ele.length) {ele [0] & & ele [0] .click (); ele [1] & & ele [1] .click () } / / scroll bar back to the top if (this.$el.querySelector (".mcd-tree") {this.$el.querySelector (".mcd-tree"). ScrollTop = 0;} / / expand the data restore this.expandedKeys = [];}); at this point, I believe you have a deeper understanding of "how to achieve the provincial and municipal shuttle frame in Ant Design Vue". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.