vue多选下拉框回显

Question

在做一个弹窗的时候遇到了一个问题，当以及分类的下拉框等于固定的几个值的时候就会显示二级下拉框，二级下拉框是多选的，保存的时候是存的value

数据回显的时候页数这样返回的，但是页面不显示，目前数据回显是这样的

能察觉到不对，应该是要根据返回的value来查找相对应的name ,但是具体操作就不知道该咋写，请问是思路有误吗？
下面贴上代码片段

```html

  <el-row style="width: 100%">
          <el-col style="width: 50%">
            <el-form-item
              prop="typeKey0"
              label="一级分类"
              :rules="[
                {
                  required: true,
                  trigger: ['blur', 'change'],
                  message: '一级分类不能为空'
                }
              ]"
            >
              <el-select
                clearable
                v-model="propertyForm.typeKey0"
                style="width: 320px"
                @change="prodChange"
              >
                <el-option
                  v-for="item in options.typeKey0"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        
          <el-col
            style="width: 50%"
            v-if="
              this.propertyForm.typeKey0 == '130' ||
                this.propertyForm.typeKey0 == '131' ||
                this.propertyForm.typeKey0 == '132' ||
                this.propertyForm.typeKey0 == '133' ||
                this.propertyForm.typeKey0 == '135'
            "
          >
            <el-form-item
              prop="selects"
              label="二级分类"
              :rules="[
                {
                  required: true,
                  trigger: ['blur', 'change'],
                  message: '二级分类不能为空'
                }
              ]"
            >
              <xn-select
                clearable
                v-model="propertyForm.selects"
                style="width: 320px"
                multiple
              >
                <xn-option
                  v-for="item in options.selectsOptions"
                  :key="item.catalogValue"
                  :label="item.catalogName"
                  :value="item.catalogValue"
                >
                </xn-option>
              </xn-select>
            </el-form-item>
          </el-col>

```

Answer 1

【以下回答由 GPT 生成】

使用Vue中的计算属性和watch属性来实现多选下拉框的数据回显。

首先，在data中定义一个用于保存选中值的变量selectedValues和一个用于保存二级分类选项的变量options.typeKey1。

data() {
  return {
    selectedValues: [], // 保存选中的值
    options: {
      typeKey0: [{value: '130', name: '分类1'}, {value: '131', name:'分类2'}, ...],
      typeKey1: [] // 保存二级分类选项的值
    },
    propertyForm: {
      typeKey0: '', // 一级分类选中的值
      selects: [] // 保存二级分类选中的值
    }
  }
},

然后，在computed计算属性中，根据selectedValues和options.typeKey1的值来获取相应的name。

computed: {
  selectedNames() {
    const names = []
    this.propertyForm.selects.forEach(value => {
      const selectedOption = this.options.typeKey1.find(option => option.value === value)
      if (selectedOption) {
        names.push(selectedOption.name)
      }
    })
    return names
  }
},

在template模板中，将多选下拉框的选中值绑定到v-model="propertyForm.selects"，并用selectedNames显示选中的name。

<el-col style="width: 50%" v-if="['130', '131', '132', '133', '135'].includes(this.propertyForm.typeKey0)">
  <el-form-item prop="selects" label="二级分类"
    :rules="[{
      required: true,
      trigger: ['blur', 'change'],
      message: '二级分类不能为空'
    }]">
    <el-select multiple v-model="propertyForm.selects" style="width: 320px">
      <el-option v-for="item in options.typeKey1" :key="item.value" :label="item.name" :value="item.value"></el-option>
    </el-select>
    <div v-if="selectedNames.length > 0">
      已选中：{{ selectedNames.join(', ') }}
    </div>
  </el-form-item>
</el-col>

通过以上操作，即可实现多选下拉框的数据回显。

注意：如果选项过多，可以使用远程搜索的方式加载选项。在远程搜索的回调函数中，将返回的选项赋值给options.typeKey1。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^