Ant Design Vue中如何實現(xiàn)省市穿梭框

本篇內(nèi)容主要講解“Ant Design Vue中如何實現(xiàn)省市穿梭框”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“Ant Design Vue中如何實現(xiàn)省市穿梭框”吧!

樹形穿梭框

官方樹穿梭框如下，左右是樹結(jié)構(gòu)，右邊是列表。

本質(zhì)上是有兩套數(shù)據(jù)源，tree 使用的是樹狀數(shù)據(jù)源，transfer 使用的是列表數(shù)據(jù)源，將多維的樹狀數(shù)據(jù)源轉(zhuǎn)為一維的，就是列表數(shù)據(jù)了。

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

城市穿梭框

改造穿梭框的原因：

• targetKeys只需要城市數(shù)據(jù)，不需要省份數(shù)據(jù)

• 源穿梭框中，子節(jié)點和父節(jié)點沒有關(guān)聯(lián)選中關(guān)系，需要處理，畢竟省市級是需要聯(lián)動的

• 目標(biāo)穿梭框，也要支持樹狀結(jié)構(gòu)

主要實現(xiàn)功能點：

• 樹形結(jié)構(gòu)數(shù)據(jù)處理：關(guān)鍵詞過濾；已選數(shù)據(jù)禁用狀態(tài)；

• 實現(xiàn)父節(jié)點和節(jié)點的關(guān)聯(lián)選中

• 穿梭框右側(cè)僅展示城市數(shù)據(jù)，不顯示省份數(shù)據(jù)

• 選中城市數(shù)據(jù)：帶省級信息返回，滿足接口要求，即返回樹狀結(jié)構(gòu)

改造的本質(zhì)：基于transfer的二次改造，主要是對數(shù)據(jù)的處理，組件基本沒啥改變

組件參數(shù)和事件

自定義參數(shù)：考慮對外暴露的參數(shù)，參數(shù)的作用，屬性等 自定義事件：考慮暴露出去的回調(diào)事件

// 自定義參數(shù)
export default {
  props: {
    dataSource: {
      // 數(shù)據(jù)源
      type: Array,
      default: () => [],
    },
    targetKey: {
      // 右側(cè)框數(shù)據(jù)的 key 集合
      type: Array,
      default: () => [],
    },
  },
};

// handleChange回調(diào)函數(shù)：treeData-左側(cè)樹結(jié)構(gòu)數(shù)據(jù)，toArray-右側(cè)樹結(jié)構(gòu)數(shù)據(jù)，targetKeys-選中城市key集合
this.$emit("handleChange", this.treeData, toArray, this.targetKeys);

穿梭框處理

<template>
  <!-- 穿梭框組件，數(shù)據(jù)源為列表形式 -->
  <a-transfer
    class="mcd-transfer"
    ref="singleTreeTransfer"
    show-search
    :locale="localeConfig"
    :titles="['所有城市', '已選城市']"
    :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 },
      }"
    >
      <!-- 左邊源數(shù)據(jù)框：樹形控件 -->
      <a-tree
        v-if="direction === 'left'"
        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>

數(shù)據(jù)源處理

• 穿梭框數(shù)據(jù)處理（transferDataSource）：多維數(shù)據(jù)轉(zhuǎn)為一維數(shù)據(jù)

• 樹數(shù)據(jù)處理（treeData）：數(shù)據(jù)源過濾處理，數(shù)據(jù)禁止操作處理

// 數(shù)據(jù)源示例
const dataSource = [
  {
    pid: "0",
    key: "1000",
    label: "黑龍江省",
    title: "黑龍江省",
    children: [
      {
        pid: "1000",
        key: "1028",
        label: "大興安嶺地區(qū)",
        title: "大興安嶺地區(qū)",
      },
    ],
  },
];

// ant-transfer穿梭框數(shù)據(jù)源
transferDataSource() {
  // 穿梭框數(shù)據(jù)源
  let transferDataSource = [];
  // 穿梭框數(shù)據(jù)轉(zhuǎn)換，多維轉(zhuǎn)為一維
  function flatten(list = []) {
    list.forEach((item) => {
      transferDataSource.push(item);
      // 子數(shù)據(jù)處理
      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樹數(shù)據(jù)源
treeData() {
  // 樹形控件數(shù)據(jù)源
  const validate = (node, map) => {
    // 數(shù)據(jù)過濾處理 includes
    return node.title.includes(this.keyword);
  };
  const result = filterTree(
    this.dataSource,
    this.targetKeys,
    validate,
    this.keyword
  );
  return result;
}

// 樹形結(jié)構(gòu)數(shù)據(jù)過濾
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 事件，回調(diào)數(shù)據(jù)（handleTransferChange）

• search 搜索事件（handleTransferSearch）

// 穿梭框：change事件
handleTransferChange(targetKeys, direction, moveKeys) {
  // 過濾：避免頭部操作欄“全選”將省級key選中至右邊
  this.targetKeys = targetKeys.filter((o) => !this.pidKeys.includes(o));
  // 選中城市數(shù)據(jù)：帶省級信息返回，滿足接口要求
  const validate = (node, map) => {
    return map.includes(node.key) && node.title.includes(this.keyword);
  };
  let toArray = filterTree(this.dataSource, this.targetKeys, validate);
  // handleChange回調(diào)函數(shù)：treeData-左側(cè)樹結(jié)構(gòu)數(shù)據(jù)，toArray-右側(cè)樹結(jié)構(gòu)數(shù)據(jù)，targetKeys-選中城市key集合
  this.$emit("handleChange", this.treeData, toArray, this.targetKeys);
},

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

樹事件

• change 事件，處理父節(jié)點和子節(jié)點的聯(lián)動關(guān)系（handleTreeChecked）

• expand 事件：樹的展開和收縮（handleTreeExpanded）

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

清除事件

重新打開時，需要還原組件狀態(tài)，例如滾動條位置，搜索框關(guān)鍵字等

handleReset() {
  this.keyword = "";
  this.$nextTick(() => {
    // 搜索框關(guān)鍵字清除
    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;
    }
    // 展開數(shù)據(jù)還原
    this.expandedKeys = [];
  });
}

到此，相信大家對“Ant Design Vue中如何實現(xiàn)省市穿梭框”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！