Parlons de la façon d'implémenter des boîtes de navette provinciales et urbaines dans Ant Design Vue

Cet article vous montrera comment utiliser Ant Design Vue pour mettre en œuvre des boîtes de navette provinciales et municipales. J'espère qu'il vous sera utile !

Coffret navette arbre

Le coffret navette arbre officiel est le suivant, avec la structure de l'arbre à gauche et la liste à droite.

Essentiellement, il existe deux ensembles de sources de données. tree utilise une source de données arborescente et transfer utilise une source de données liste pour convertir des sources de données arborescentes multidimensionnelles. est unidimensionnel, qui correspond à des données de liste. tree 使用的是树状数据源，transfer 使用的是列表数据源，将多维的树状数据源转为一维的，就是列表数据了。

具体使用可以查看官方文档之 带搜索框的穿梭框（https://antdv.com/components/transfer-cn/）

城市穿梭框

改造穿梭框的原因：

• targetKeys只需要城市数据，不需要省份数据

• 源穿梭框中，子节点和父节点没有关联选中关系，需要处理，毕竟省市级是需要联动的

• 目标穿梭框，也要支持树状结构

主要实现功能点：

• 树形结构数据处理：关键词过滤；已选数据禁用状态；

• 实现父节点和节点的关联选中

• 穿梭框右侧仅展示城市数据，不显示省份数据

• 选中城市数据：带省级信息返回，满足接口要求，即返回树状结构

改造的本质：基于transfer

Pour un usage spécifique, vous pouvez consulter la documentation officielle du boîtier navette avec le champ de recherche (https://antdv.com/components/transfer-cn/)

Boîte de navette urbaine

Rénovation de la boîte navette Raison :

targetKeys ne nécessite que les données de la ville, pas les données de la province

• Dans la boîte navette source, le nœud enfant et le nœud parent n'ont aucune relation de sélection associée et doivent être traités. Après tout, les niveaux provincial et municipal sont La

• la boîte de navette cible qui doit être liée doit également prendre en charge la structure arborescente

Principaux points fonctionnels :

Traitement des données sur la structure arborescente : mot-clé filtrage ; état des données sélectionnées désactivé ;
Réaliser l'association entre le nœud parent et la sélection du nœud
Le côté droit de la boîte de navette affiche uniquement les données de la ville, pas les données de la province

Données de la ville sélectionnée : retour avec la province informations, répondent aux exigences de l'interface, c'est-à-dire renvoient une arborescence

• 

Transformation L'essence : Basé sur la transformation secondaire du transfert, il s'agit principalement du traitement des données. Les composants n'ont fondamentalement pas changé

• Composant paramètres et événements

Paramètres personnalisés : considérez les paramètres exposés à l'extérieur et le rôle des paramètres, des attributs, etc. Événements personnalisés : prenez en compte les événements de rappel exposés

// 自定义参数
export default {
  props: {
    dataSource: {
      // 数据源
      type: Array,
      default: () => [],
    },
    targetKey: {
      // 右侧框数据的 key 集合
      type: Array,
      default: () => [],
    },
  },
};

// handleChange回调函数：treeData-左侧树结构数据，toArray-右侧树结构数据，targetKeys-选中城市key集合
this.$emit("handleChange", this.treeData, toArray, this.targetKeys);

Traitement du boîtier de navette

<template>
  <!-- 穿梭框组件，数据源为列表形式 -->
  <a-transfer
    class="mcd-transfer"
    ref="singleTreeTransfer"
    show-search
    :locale="localeConfig"
    :titles="[&#39;所有城市&#39;, &#39;已选城市&#39;]"
    :data-source="transferDataSource"
    :target-keys="targetKeys"
    :render="(item) => item.label"
    :show-select-all="true"
    @change="handleTransferChange"
    @search="handleTransferSearch"
  >
    <template
      slot="children"
      slot-scope="{
        props: { direction, selectedKeys },
        on: { itemSelect, itemSelectAll },
      }"
    >
      <!-- 左边源数据框：树形控件 -->
      <a-tree
        v-if="direction === &#39;left&#39;"
        class="mcd-tree"
        blockNode
        checkable
        :checked-keys="[...selectedKeys, ...targetKeys]"
        :expanded-keys="expandedKeys"
        :tree-data="treeData"
        @expand="handleTreeExpanded"
        @check="
          (_, props) => {
            handleTreeChecked(
              _,
              props,
              [...selectedKeys, ...targetKeys],
              itemSelect,
              itemSelectAll
            );
          }
        "
        @select="
          (_, props) => {
            handleTreeChecked(
              _,
              props,
              [...selectedKeys, ...targetKeys],
              itemSelect,
              itemSelectAll
            );
          }
        "
      />
    </template>
  </a-transfer>
</template>

Traitement de la source de données

Traitement des données du boîtier de navette (transferDataSource) : les données multidimensionnelles sont converties en données unidimensionnelles

🎜🎜🎜Traitement des données d'arborescence ( treeData) : Traitement du filtrage des sources de données, traitement des opérations interdites de données 🎜🎜🎜

// 数据源示例
const dataSource = [
  {
    pid: "0",
    key: "1000",
    label: "黑龙江省",
    title: "黑龙江省",
    children: [
      {
        pid: "1000",
        key: "1028",
        label: "大兴安岭地区",
        title: "大兴安岭地区",
      },
    ],
  },
];

// ant-transfer穿梭框数据源
transferDataSource() {
  // 穿梭框数据源
  let transferDataSource = [];
  // 穿梭框数据转换，多维转为一维
  function flatten(list = []) {
    list.forEach((item) => {
      transferDataSource.push(item);
      // 子数据处理
      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树数据源
treeData() {
  // 树形控件数据源
  const validate = (node, map) => {
    // 数据过滤处理 includes
    return node.title.includes(this.keyword);
  };
  const result = filterTree(
    this.dataSource,
    this.targetKeys,
    validate,
    this.keyword
  );
  return result;
}

// 树形结构数据过滤
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), // 禁用属性
      };
      // 子级处理
      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;
};

🎜🎜 traitement des événements de la boîte de navette 🎜🎜🎜🎜🎜événement de changement, données de rappel (handleTransferChange) 🎜🎜🎜🎜événement de recherche de recherche (handleTransferSearch) 🎜🎜🎜

// 穿梭框：change事件
handleTransferChange(targetKeys, direction, moveKeys) {
  // 过滤：避免头部操作栏“全选”将省级key选中至右边
  this.targetKeys = targetKeys.filter((o) => !this.pidKeys.includes(o));
  // 选中城市数据：带省级信息返回，满足接口要求
  const validate = (node, map) => {
    return map.includes(node.key) && node.title.includes(this.keyword);
  };
  let toArray = filterTree(this.dataSource, this.targetKeys, validate);
  // handleChange回调函数：treeData-左侧树结构数据，toArray-右侧树结构数据，targetKeys-选中城市key集合
  this.$emit("handleChange", this.treeData, toArray, this.targetKeys);
},

// 穿梭框：搜索事件
handleTransferSearch(dir, value) {
  if (dir === "left") {
    this.keyword = value;
  }
},

🎜 🎜Événement Tree🎜🎜🎜🎜🎜événement change, gère la relation de liaison entre le nœud parent et le nœud enfant (handleTreeChecked) 🎜🎜🎜🎜événement expand : expansion et contraction de l'arbre (handleTreeExpanded) 🎜🎜🎜

// 树形控件：change事件
handleTreeChecked(keys, e, checkedKeys, itemSelect, itemSelectAll) {
  const {
    eventKey,
    checked,
    dataRef: { children },
  } = e.node;
  if (this.pidKeys && this.pidKeys.includes(eventKey)) {
    // 父节点选中：将所有子节点也选中
    let childKeys = children ? children.map((item) => item.key) : [];
    if (childKeys.length) itemSelectAll(childKeys, !checked);
  }
  itemSelect(eventKey, !isChecked(checkedKeys, eventKey)); // 子节点选中
},
// 树形控件：expand事件
handleTreeExpanded(expandedKeys) {
  this.expandedKeys = expandedKeys;
},

🎜🎜événement clear🎜🎜 🎜Ré Lors de l'ouverture, vous devez restaurer l'état du composant, tel que la position de la barre de défilement, les mots-clés du champ de recherche, etc. 🎜

handleReset() {
  this.keyword = "";
  this.$nextTick(() => {
    // 搜索框关键字清除
    const ele = this.$refs.singleTreeTransfer.$el.getElementsByClassName(
      "anticon-close-circle"
    );
    if (ele && ele.length) {
      ele[0] && ele[0].click();
      ele[1] && ele[1].click();
    }
    // 滚动条回到顶部
    if (this.$el.querySelector(".mcd-tree")) {
      this.$el.querySelector(".mcd-tree").scrollTop = 0;
    }
    // 展开数据还原
    this.expandedKeys = [];
  });
}

🎜 [Recommandation associée : "🎜tutoriel vue.js🎜"]🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!