Heim  >  Artikel  >  Web-Frontend  >  Lassen Sie uns darüber sprechen, wie Sie Provinz- und Stadt-Shuttle-Boxen in Ant Design Vue implementieren

Lassen Sie uns darüber sprechen, wie Sie Provinz- und Stadt-Shuttle-Boxen in Ant Design Vue implementieren

青灯夜游
青灯夜游nach vorne
2021-12-23 19:15:584175Durchsuche

Dieser Artikel zeigt Ihnen, wie Sie Ant Design Vue zur Implementierung von Provinz- und Stadt-Shuttle-Boxen verwenden. Ich hoffe, er wird Ihnen hilfreich sein!

Lassen Sie uns darüber sprechen, wie Sie Provinz- und Stadt-Shuttle-Boxen in Ant Design Vue implementieren

Baum-Shuttle-Box

Die offizielle Baum-Shuttle-Box sieht wie folgt aus, mit der Baumstruktur links und der Liste rechts.

Im Wesentlichen gibt es zwei Sätze von Datenquellen: tree verwendet eine Baumdatenquelle und transfer verwendet eine Listendatenquelle, um mehrdimensionale Baumdatenquellen zu konvertieren ist eindimensional, also Listendaten. tree 使用的是树状数据源,transfer 使用的是列表数据源,将多维的树状数据源转为一维的,就是列表数据了。

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

Lassen Sie uns darüber sprechen, wie Sie Provinz- und Stadt-Shuttle-Boxen in Ant Design Vue implementieren

城市穿梭框

改造穿梭框的原因:

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

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

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

主要实现功能点:

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

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

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

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

Lassen Sie uns darüber sprechen, wie Sie Provinz- und Stadt-Shuttle-Boxen in Ant Design Vue implementieren

改造的本质:基于transfer

Informationen zur spezifischen Verwendung finden Sie in der offiziellen Dokumentation der Shuttle-Box mit Suchfeld (https://antdv.com/components/transfer-cn/)

Lassen Sie uns darüber sprechen, wie Sie Provinz- und Stadt-Shuttle-Boxen in Ant Design Vue implementieren

Urban Shuttle Box

Renovierung der Shuttle-Box Grund:

targetKeys benötigt nur Stadtdaten, keine Provinzdaten

  • In der Quell-Shuttle-Box haben der untergeordnete Knoten und der übergeordnete Knoten keine zugeordnete Auswahlbeziehung und Schließlich muss die

  • Ziel-Shuttle-Box, die verknüpft werden muss, auch die Baumstruktur unterstützen.

Hauptfunktionspunkte:

    Baumstruktur-Datenverarbeitung: Schlüsselwort Filterung; Status der ausgewählten Daten deaktiviert;
  • Den Zusammenhang zwischen übergeordnetem Knoten und Knotenauswahl erkennen
  • Auf der rechten Seite des Shuttle-Felds werden nur Stadtdaten angezeigt, keine Provinzdaten Informationen, erfüllen Sie die Schnittstellenanforderungen, dh geben Sie eine Baumstruktur zurück

Lassen Sie uns darüber sprechen, wie Sie Provinz- und Stadt-Shuttle-Boxen in Ant Design Vue implementieren

    Transformation Das Wesentliche: Basierend auf der sekundären Transformation von transfer geht es hauptsächlich um die Datenverarbeitung. Die Komponenten haben sich grundsätzlich nicht geändert
  • Komponente Parameter und Ereignisse

  • Benutzerdefinierte Parameter: Berücksichtigen Sie die nach außen zugänglichen Parameter und die Rolle der Parameter, Attribute usw. Benutzerdefinierte Ereignisse: Berücksichtigen Sie exponierte Rückrufereignisse. treeData): Verarbeitung der Datenquellenfilterung, Verarbeitung verbotener Datenoperationen
  • // 自定义参数
    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);
Shuttle-Box-Ereignisverarbeitung

Änderungsereignis, Rückrufdaten (handleTransferChange)

Suche Suchereignis (handleTransferSearch)

🎜🎜
<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>
🎜 🎜Tree-Ereignis🎜🎜🎜🎜🎜change-Ereignis, behandelt die Verknüpfungsbeziehung zwischen übergeordnetem Knoten und untergeordnetem Knoten (handleTreeChecked) 🎜🎜🎜🎜expand-Ereignis: Baumerweiterung und -kontraktion (handleTreeExpanded) 🎜🎜🎜
// 数据源示例
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;
};
🎜🎜clear-Ereignis 🎜🎜 🎜Re Beim Öffnen müssen Sie den Komponentenstatus wiederherstellen, z. B. die Position der Bildlaufleiste, Schlüsselwörter im Suchfeld usw.🎜
// 穿梭框: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;
  }
},
🎜[Verwandte Empfehlung: „🎜vue.js-Tutorial🎜“]🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie Provinz- und Stadt-Shuttle-Boxen in Ant Design Vue implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen