中国の地方カスケードセレクタで要素-UI

インストール

公式のチュートリアルから、次のチュートリアルを参照：https://www.npmjs.com/package/element-china-area-data

データ都市をインストールするには、次のステートメントを実行します。

npm install element-china-area-data -S

インポート

例えば、VUEファイルで作成されたVueの-CLIプロジェクト、scritラベル内のデータをインポートします：

import { regionData, CodeToText } from "element-china-area-data";

使用

次のコードに示すように：

<template>
  <div id="app">
    <div>
      <el-cascader
        size="large"
        :options="options"
        v-model="selectedOptions"
        @change="handleChange"
      >
      </el-cascader>
    </div>
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";

export default {
  name: "app",
  data() {
    return {
      options: regionData,
      selectedOptions: []
    };
  },

  methods: {
    handleChange() {
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      alert(loc);
    }
  }
};
</script>

効果

下図のように：