Ant Design Vue で州と都市のシャトル ボックスを実装する方法について話しましょう

青灯夜游
リリース: 2021-12-23 19:15:58
転載
4178 人が閲覧しました

この記事では、Ant Design Vue を使用して地方および市のシャトル ボックスを実装する方法について説明します。お役に立てば幸いです。

Ant Design Vue で州と都市のシャトル ボックスを実装する方法について話しましょう

ツリー シャトル ボックス

公式のツリー シャトル ボックスは次のとおりです。左側にツリー構造、右側にリストがあります。

本質的に、データ ソースには 2 つのセットがあります。tree はツリー データ ソースを使用し、transfer はリスト データ ソースを使用して多次元ツリー データを変換します。ソースはリスト データである 1 次元に変換されます。

具体的な使用方法については、検索ボックス付きシャトル ボックスの公式ドキュメント (https://antdv.com/components/transfer-cn/)

Ant Design Vue で州と都市のシャトル ボックスを実装する方法について話しましょう## を確認してください。

# 市のシャトル ボックス

#シャトル ボックスを変換する理由:

  • targetKeys

    必要なのは市区町村のデータのみであり、州のデータは必要ありません

  • ソース シャトル ボックスでは、子ノードと親ノードには関連する選択関係がないため、処理する必要があります。結局、州レベルと市レベルをリンクする必要があります。
  • ターゲット シャトル ボックスもサポートされている必要があります。ツリー構造
  • 主な実装機能ポイント:

    ツリー構造データ処理: キーワード フィルタリング; 選択されたデータの無効な状態;
  • 親ノードとノード選択の間の関連付けを実現する
  • シャトル ボックス、都市データのみが表示され、県データは表示されません
  • 選択された都市データ: 県情報とともに返され、インターフェイス要件を満たします。つまり、ツリー構造を返します

Ant Design Vue で州と都市のシャトル ボックスを実装する方法について話しましょう変換の本質:

transfer

の 2 番目の変換は主にデータ処理に関するものであり、コンポーネントは基本的に何も行っていません。 コンポーネントのパラメータとイベント

カスタム パラメータ: 外部に公開されるパラメータを考慮してください。パラメータ、属性などの役割。 カスタム イベント: 公開されたコールバック イベントを検討してください

// 自定义参数
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);
ログイン後にコピー

シャトル ボックス処理

<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>
ログイン後にコピー

データ ソース処理

    シャトル ボックス データ処理 ( transferDataSource):多次元データを1次元データに変換
  • ツリーデータ処理(treeData):データソースのフィルタリング処理、データ禁止操作処理
  • // 数据源示例
    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;
    };
    ログイン後にコピー
シャトルボックスイベント処理

    changeイベント、コールバックデータ(handleTransferChange)
  • search検索イベント( 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;
      }
    },
    ログイン後にコピー
Tree イベント

    change イベント、親ノードと子ノードの間のリンク関係を処理します (handleTreeChecked) )
  • expand イベント: ツリーの拡張と縮小 (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;
    },
    ログイン後にコピー
イベントのクリア

Re 開くときに、スクロール バーの位置、検索ボックスのキーワードなどのコンポーネントの状態を復元する必要があります。

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 = [];
  });
}
ログイン後にコピー

[関連する推奨事項: "

vue.js チュートリアル

"]

以上がAnt Design Vue で州と都市のシャトル ボックスを実装する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート