vue v-for多个el-select编辑时回显问题

Question

 const hierarchyColList = [{id:'111',label:'哈哈哈'},{id:'222',label:'是是是'},{id:'333',label:'我我我'}]
 const data = [{col:'111,222'},{col:'222'},{col:'222,333'}]
 const hierarchyColumnNum = data.length

hierarchyColList 为下拉框数据，data是后端返回的数据，也就是回显时需要用到的数据，hierarchyColumnNum 是根据data的长度来生成有几个select选择框

目前页面代码（应该有错误）↓

<div v-for="index of hierarchyColumnNum" :key="index">
          <el-form-item :label="index===1?'层级列：':' '">
            <el-select v-model="selectHierarchyCol[index]" multiple clearable placeholder="请选择" style="width: 80%;" @change="changeHierarchyCol">
              <el-option v-for="item in hierarchyColList" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
            <el-button v-if="index == 1" type="primary" icon="el-icon-plus" style="margin-left:2px" @click="oqsHierarchy(0)" />
            <el-button icon="el-icon-minus" style="margin-left:2px" @click="oqsHierarchy(1,index)" />
          </el-form-item>
        </div>

需要的效果↓

即能正常回显，selectHierarchyCol是和这整个selcet绑定的model

现在的问题是我不知道该怎么把后端返回的data重新组装成能回显的效果，也就是生成selectHierarchyCol，甚至我selectHierarchyCol能生成对，但也回显不了，不知道哪里出问题了，应该是页面的代码哪里没写好，球大神们指教

在这里先谢谢各位大神的解答，小弟感激不尽！

Answer 1

不知道这个是不是你的需求
https://codesandbox.io/s/hard...

Answer 2

可能是你重新赋值的关系，给你一个demo，你对照着看下。

<template>
  <!-- 直接循环已选结果就可以 -->
  <div v-for="(item,index) in selectHierarchyCol" :key="index">
    <el-select
      multiple
      placeholder="请选择"
      v-model="selectHierarchyCol[index]"
      @change="handleSelectChange"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.label"
        :value="item.id">
      </el-option>
    </el-select>
    <el-button v-if="index == 0" type="primary" icon="el-icon-plus" style="margin-left:2px" @click="oqsHierarchy(0)" ></el-button>
    <el-button icon="el-icon-minus" style="margin-left:2px" @click="oqsHierarchy(index)" ></el-button>
  </div>
</template>
<script>
const hierarchyColList = [{id:'111',label:'哈哈哈'},{id:'222',label:'是是是'},{id:'333',label:'我我我'}]
const selectedData = [{col:'111,222'},{col:'222'},{col:'222,333'}]
export default {
  data() {
    return {
        options: hierarchyColList,
        selectHierarchyCol: [[]], // 这样的话默认会有一个select
    };
  },
  mounted(){
    // 延迟赋值
    setTimeout(()=>{
      this.selectHierarchyCol = selectedData.map(item => item.col.split(',')) // 处理已经绑定过的值，通过逗号转换成数组
    },2000)
  },
  methods: {
    // 添加删除
    oqsHierarchy(index){
      if(index){
        this.selectHierarchyCol.splice(index,1)
      }else{
        this.selectHierarchyCol.push([])
      }
    },
    // 输出已选的值
    handleSelectChange(selectedVal){
      // 这里会输出已选择的options数组，值是绑定的value
      console.log('当前选择器修改后的值：',selectedVal)
    }
  }
};
</script>

主要是在赋值这块，Ele 的 选择器 需要用数组的形式来绑定已选择的选项

---

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。