前端三级联动拼接，并且再次选择清除上次的内容

事例

• 下拉框
  –

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="头像上传">
        <el-upload
          action="http://localhost:8000/oss/toUp"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img
            v-if="form.imageUrl"
            width="100%"
            :src="form.imageUrl"
            alt="陈刚"
          />
        </el-dialog>
      </el-form-item>
      <el-form-item label="用户">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item label="省-市">
        <el-select
          v-model="form.pid"
          placeholder="请选择省"
          @change="queryCity"
        >
          <el-option
            v-for="item in proviceList"
            :key="item.value"
            :label="item.cityName"
            :value="item.id"
          ></el-option>
        </el-select>
        ---
        <el-select
          v-model="form.cid"
          placeholder="请选择市"
          @change="queryAddress"
        >
          <el-option
            v-for="item in cityList"
            :key="item.value"
            :label="item.cityName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      form: {
        imageUrl: "",
        username: "",
        password: "",
        pid: "",
        cid: "",
        address: "",
      },
      proviceList: [],
      cityList: [],
      andWith: "",
      getName: "",
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.form.imageUrl = file.url;
      this.dialogVisible = true;
    },
    onSubmit() {
      alert(this.imageUrl);
    },
    handleAvatarSuccess(res, file) {
      this.form.imageUrl = res.data;
      console.log(this.form.imageUrl);
    },
    // 下拉
    queryPrivice() {
      this.$axios
        .get("http://localhost:8000/city/findCity/" + 1)
        .then((res) => {
          console.log(res.data.data);
          this.proviceList = res.data.data;
        });
    },
    queryCity(item) {
      let obj = {};
      obj = this.proviceList.find((val) => {
        return val.id === item;
      });
      let getName = "";
      getName = obj.cityName;
      console.log(getName);
      this.form.address = getName;
      this.andWith = getName.length;
      this.$axios
        .get("http://localhost:8000/city/findCity/" + item)
        .then((res) => {
          this.cityList = res.data.data;
          this.form.cid = "";
        });
    },
    queryAddress(item) {
      let obj = {};
      obj = this.cityList.find((val) => {
        return val.id === item;
      });
      this.getName = "";
      this.getName = obj.cityName;
      console.log("get:" + this.getName);
      if (this.form.address.length > this.andWith) {
        this.form.address = this.form.address.substring(0,this.andWith);
      }
      this.form.address += this.getName;
    },
  },
  created() {
    this.queryPrivice();
  },
};
</script>

<style>
</style>

介绍
109-117行
这里就是第一次下拉的数据，赋进需要的字段中
117行的this.andWith = getName.length;是重点
因为要在下一个change事件做判断
133-136行
这里是进行长度判断，只要是字段场地大于第一次下拉数据的长度，就进行截取
然后再进行+=追加