Mari kita bincangkan tentang cara melaksanakan kotak ulang-alik wilayah dan bandar dalam Ant Design Vue

Artikel ini akan menunjukkan kepada anda cara menggunakan Ant Design Vue untuk melaksanakan kotak ulang-alik wilayah dan bandar, saya harap ia akan membantu semua orang!

Kotak ulang-alik pokok

Kotak ulang-alik pokok rasmi adalah seperti berikut, dengan struktur pokok di sebelah kiri dan senarai di sebelah kanan.

Pada asasnya, terdapat dua set sumber data tree menggunakan sumber data pokok dan transfer menggunakan sumber data senarai Sumber data pokok berbilang dimensi ditukar kepada satu dimensi .

Untuk penggunaan khusus, anda boleh menyemak dokumentasi rasmi kotak ulang-alik dengan kotak carian (https://antdv.com/components/transfer-cn/)

Kotak ulang-alik bandar

Sebab untuk menukar kotak ulang-alik:

• targetKeysHanya data bandar diperlukan, bukan data wilayah

• Dalam kotak ulang-alik sumber, nod anak dan nod induk tidak mempunyai hubungan pemilihan yang berkaitan dan perlu diproses Lagipun, peringkat wilayah dan perbandaran perlu dipautkan

• Kotak ulang-alik sasaran juga mesti menyokong struktur pokok

Mata fungsi utama:

• Pemprosesan data struktur pokok: penapisan kata kunci; keadaan data dilumpuhkan;

• Realisasikan perkaitan antara nod induk dan nod Pilih

• Di sebelah kanan kotak ulang-alik, hanya. data bandar dipaparkan dan data wilayah tidak dipaparkan

• Data bandar terpilih: dikembalikan dengan maklumat wilayah, memenuhi keperluan antara muka, iaitu mengembalikan struktur pokok

Intipati transformasi: berdasarkan

Transformasi kedua terutamanya mengenai pemprosesan data Komponen pada dasarnya tidak berubahtransfer

Parameter dan peristiwa komponen

Parameter tersuai: pertimbangkan parameter yang terdedah secara luaran, fungsi, atributnya, dsb. Acara tersuai: Pertimbangkan acara panggil balik yang terdedah

// 自定义参数
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);

Pemprosesan kotak ulang-alik

<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>

Pemprosesan sumber data

• Pengantar ulang-alik pemprosesan data kotak (transferDataSource): Tukar data berbilang dimensi kepada data satu dimensi

• Pemprosesan data pokok (treeData): Pemprosesan penapisan sumber data, pemprosesan operasi data yang dilarang

// 数据源示例
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;
};

Pemprosesan acara kotak ulang-alik

• tukar acara, data panggil balik (handleTransferChange)

• acara carian carian (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;
  }
},

acara pepohon

• menukar acara, mengendalikan nod induk dan kanak-kanak Hubungan pautan nod (handleTreeChecked)

• kembangkan acara: pengembangan dan pengecutan pokok (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;
},

Padamkan acara

Apabila membuka semula, anda perlu memulihkan keadaan komponen, seperti kedudukan bar skrol, kata kunci kotak carian, dsb.

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 = [];
  });
}

[Cadangan berkaitan: "

vue .js tutorial》】

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara melaksanakan kotak ulang-alik wilayah dan bandar dalam Ant Design Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!