【原】成功element ui省市县三级联动及默认值设置

先安装：npm install element-china-area-data -S

<template>

  <div class="app-container">

    <el-form ref="form" :model="form" :rules="rules2" label-width="120px">

      <el-form-item label="用户名" prop="username">

        <el-cascader

          size="large"

          :options="options"

          v-model="selectedOptions"

          @change="handleChange"

        ></el-cascader>

        <el-input v-model="form.username" />

      </el-form-item>

      <el-form-item style="text-align:center">

        <el-button type="primary" @click="add();">确定添加</el-button>

        <el-button type="primary" @click="ini();">获取省</el-button>

      </el-form-item>

    </el-form>

  </div>

</template>

<script>

import { add } from "@/api/test";

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

import jsCookie from "js-cookie";

export default {

  data() {

    return {

      form: {

        addtime: new Date().toUTCString(),

        num1: 0,

      },

      area: "", //省市县

      options: regionData,

      selectedOptions: [],

      rules2: {},

    };

  },

  mounted() {

    this.ini();

  },

  methods: {

    ini() {

      this.selectedOptions=["130000","130300","130303"];

    },

    add() {},

    handleChange(value) {

      var arrays = [];

      console.log(value);

      value.forEach((element) => {

        arrays.push('"' + element + '"');

      });

      this.area = "[" + arrays.join(",") + "]";

      this.form.username = this.area;

    },

  },

};

</script>

<style scoped>

.line {

  text-align: center;

}

</style>