Ant Design Vue에서 지방 및 도시 셔틀 박스를 구현하는 방법에 대해 이야기하겠습니다.

이 기사에서는 Ant Design Vue를 사용하여 지방 및 도시 셔틀 박스를 구현하는 방법을 보여 드리겠습니다.

트리 셔틀 상자

공식 트리 셔틀 상자는 다음과 같습니다. 왼쪽이 트리 구조이고 오른쪽이 목록입니다.

기본적으로 데이터 소스에는 두 가지 세트가 있습니다. tree는 트리 데이터 소스를 사용하고, transfer는 다차원 트리 데이터 소스를 변환하는 데 사용합니다. 1차원적인 목록 데이터입니다. tree 使用的是树状数据源，transfer 使用的是列表数据源，将多维的树状数据源转为一维的，就是列表数据了。

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

城市穿梭框

改造穿梭框的原因：

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

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

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

主要实现功能点：

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

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

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

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

改造的本质：基于transfer

구체적인 사용법은 검색창을 통해 셔틀박스 공식 문서(https://antdv.com/comComponents/transfer-cn/)를 확인하실 수 있습니다

도시 셔틀 상자

셔틀 박스 개조 이유:

targetKeys는 도시 데이터만 필요하고 지방 데이터는 필요하지 않습니다.

• 소스 셔틀 박스에서 하위 노드와 상위 노드는 연관된 선택 관계가 없으며 결국, 지방자치단체 차원에서 연결해야 하는

• 대상 셔틀박스도 트리 구조를 지원해야 합니다.

주요 기능 포인트:

트리 구조 데이터 처리: 키워드 필터링, 선택된 데이터 비활성화 상태
상위 노드와 노드 선택 간의 연관성 실현
셔틀 상자의 오른쪽에는 지방 데이터가 아닌 도시 데이터만 표시됩니다.

선택한 도시 데이터: 지방으로 반환 정보, 인터페이스 요구 사항 충족, 즉 트리 구조 반환

Transformation 본질: transfer의 2차 변환을 기반으로 주로 데이터 처리에 관한 것입니다. 구성 요소는 기본적으로 변경되지 않았습니다

• Component 매개변수 및 이벤트

맞춤 매개변수: 외부에 노출되는 매개변수와 매개변수의 역할, 속성 등을 고려합니다. 커스텀 이벤트: 노출된 콜백 이벤트 고려

// 自定义参数
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) 🎜🎜🎜🎜검색 검색 이벤트(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;
},

🎜🎜clear 이벤트🎜🎜 🎜레 열 때 스크롤바 위치, 검색창 키워드 등 구성요소 상태를 복원해야 합니다. 🎜

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 tutorial🎜"]🎜

위 내용은 Ant Design Vue에서 지방 및 도시 셔틀 박스를 구현하는 방법에 대해 이야기하겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!