【ElementUI】ElementUI 使用 Cascader 級聯選擇器實作省市區選擇

文章目錄

• ​​ElementUI 使用 Cascader 級聯選擇器實作省市區選擇​​

ElementUI 使用 Cascader 級聯選擇器實作省市區選擇

• ​​Cascader 級聯選擇器​​

<el-form-item label="省/市/區" prop="province">
              <el-cascader
                  placeholder="請選擇"
                  :options="options"
                  v-model="location"
                  :props="{label: 'name', value: 'name'}"
                  @change="handleAddressChange"
              ></el-cascader>
            </el-form-item>      

import options from './address.json'

data() {
    return: {
        // 省市區選擇
          options: options,
          location: [],
    }
},
methods: {
    /** 選擇省市區 */
    handleAddressChange(e) {
      this.form.province = e[0];
      this.form.city = e[1];
      this.form.district = e[2];
    },
}