省市区获取到的是数字

Question

我通过下面的代码获取省市区，但是获取的是value，我想获取name，请问是需要改代码哪里呢？
我的前台代码如下：

<el-row>
                  <el-col :span="20">
                    <el-form-item label="省份" prop="province">
                      <el-select v-model="selectedProvince" @change="handleProvinceChange">
                        <el-option
                            v-for="province in provinces"
                            :key="province.value"
                            :label="province.name"
                            :value="province.value"
                        />
 
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
 
                <el-row>
                  <el-col :span="20">
                    <el-form-item label="城市" prop="city">
                      <el-select v-model="selectedCity" @change="handleCityChange" :disabled="!cities.length">
                        <el-option
                            v-for="city in cities"
                            :key="city.value"
                            :label="city.name"
                            :value="city.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
 
                <el-row>
                  <el-col :span="20">
                    <el-form-item label="区县" prop="county">
                      <el-select v-model="selectedCounty" :disabled="!counties.length">
                        <el-option
                            v-for="county in counties"
                            :key="county.value"
                            :label="county.name"
                            :value="county.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
 
 
import provincesData from '@/components/provinces.json';
 
provinces: provincesData,
      selectedProvince: '',
      cities: [],
      selectedCity: '',
      counties: [],
      selectedCounty: '',
 
addForm: {
        outtype: '',
        priority: '',
        itemtype: '',
        itemnumber: '',
        state:'',
        person:'',
        unit:'',
        province:'',
        city:'',
        county:'',
        contact:'',
        phonenumber:'',
        address:'',
      },
 
 
addOut() {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return;
        this.setUserInfo();
        const {data: res} = await this.$http.post("addOut2", this.addForm);
        if (res != "success") {
          return this.$message.error("申请失败~");
        }
        this.$message.success("申请成功~");
        this.addDialogVisible = false;
      });
    },
    setUserInfo() {
      // 填入用户名
      this.addForm.itemtype = this.selectedItems[0].name;
      this.addForm.unit = this.selectedItems[0].unit;
      this.addForm.province = this.selectedProvince;
      this.addForm.city = this.selectedCity;
      this.addForm.county = this.selectedCounty;
    },
    handleProvinceChange(value) {
      // 根据省份的值筛选对应的城市数据
      this.cities = provincesData.find(item => item.value === value).children || [];
      // 清空城市和区县的值
      this.selectedCity = '';
      this.selectedCounty = '';
    },
    handleCityChange(value) {
      // 根据城市的值筛选对应的区县数据
      const selectedProvince = provincesData.find(item => item.value === this.selectedProvince);
      const selectedCity = selectedProvince.children.find(item => item.value === value);
      this.counties = selectedCity.children || [];
      // 清空区县的值
      this.selectedCounty = '';
    },
  },
 

我的部分provinces.json代码如下：

{
    "value": "110000",
    "name": "北京",
    "children": [
      {
        "value": "110100",
        "name": "北京市",
        "children": [
          { "value": "110101", "name": "东城区" },
          { "value": "110102", "name": "西城区" },
          { "value": "110105", "name": "朝阳区" },
          { "value": "110106", "name": "丰台区" },
          { "value": "110107", "name": "石景山区" },
          { "value": "110108", "name": "海淀区" },
          { "value": "110109", "name": "门头沟区" },
          { "value": "110111", "name": "房山区" },
          { "value": "110112", "name": "通州区" },
          { "value": "110113", "name": "顺义区" },
          { "value": "110114", "name": "昌平区" },
          { "value": "110115", "name": "大兴区" },
          { "value": "110116", "name": "怀柔区" },
          { "value": "110117", "name": "平谷区" },
          { "value": "110118", "name": "密云区" },
          { "value": "110119", "name": "延庆区" }
        ]
      }
    ]
  },
  {
    "value": "120000",
    "name": "天津",
    "children": [
      {
        "value": "120100",
        "name": "天津市",
        "children": [
          { "value": "120101", "name": "和平区" },
          { "value": "120102", "name": "河东区" },
          { "value": "120103", "name": "河西区" },
          { "value": "120104", "name": "南开区" },
          { "value": "120105", "name": "河北区" },
          { "value": "120106", "name": "红桥区" },
          { "value": "120110", "name": "东丽区" },
          { "value": "120111", "name": "西青区" },
          { "value": "120112", "name": "津南区" },
          { "value": "120113", "name": "北辰区" },
          { "value": "120114", "name": "武清区" },
          { "value": "120115", "name": "宝坻区" },
          { "value": "120116", "name": "滨海新区" },
          { "value": "120117", "name": "宁河区" },
          { "value": "120118", "name": "静海区" },
          { "value": "120119", "name": "蓟州区" }
        ]
      }
    ]
  },
 

Answer 1

基于Monster 组和GPT的调写：

• 在setUserInfo函数中修改对应的代码，将value替换为对应的name。

具体来说，以下代码：

this.addForm.province = this.selectedProvince;
this.addForm.city = this.selectedCity;
this.addForm.county = this.selectedCounty;

改为：

this.addForm.province = this.provinces.find(province => province.value === this.selectedProvince).name;
this.addForm.city = this.cities.find(city => city.value === this.selectedCity).name;
this.addForm.county = this.counties.find(county => county.value === this.selectedCounty).name;

这样，当用户选择省市区时，setUserInfo函数中的代码就会将对应的省市区的name值赋给addForm对象中的属性，而不是原本的value值。