el-collapse-item循环设置里面内容动态获取数据

Question

想要弹窗打开时根据返回不同个数的el-collapse-item也就是StepSelectOptions数组个数，展开不同的多选框或者单选框，选框类型由每行的下拉框进行判断展示，目前的问题是 @click="Save">确 定的时候选框的值没有动态获取，选中的时候也没有动态分离，需要改 两个v-model=""部分和Save赋值部分，源代码有错所以参考即可，可能需要很大改动

<el-dialog title="配置场景" :visible.sync="scenedialog" v-loading="dialogLoading" width="60%">
      <span>{{sceneTitle}}</span>
      <!-- accordion -->
      <el-collapse v-model="activeNames" @change="handleCollapseChange">
        <el-collapse-item v-for="(item, index) in StepSelectOptions" :key="item.id" :title="item.name"
          :name="index.toString()">
          <!-- 复选框列表 -->
          <el-select v-model="isGameID[index]" placeholder="请选择" @change="selectOptionsChangeGame(index)">
            <el-option v-for="item in GameSelectOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <br />
          <template v-if="isGameID[index] === '1'">
            <el-checkbox v-for="subItem in checkboxItems"
              v-model="selectedIds[subItem.id]" :key="subItem.id" :label="subItem.title">
              {{ subItem.title }}
            </el-checkbox>
          </template>
         <template v-if="isGameID[index] === '2'">
            <el-radio v-for="(subItem, subIndex) in checkboxItemsGame"
              v-model="selectedIdsGame[index]" :key="subItem.id" :label="subItem.name">
              {{ subItem.name }}
            </el-radio>
          </template>
        </el-collapse-item>
      </el-collapse>
      <span slot="footer" class="dialog-footer">
        <el-button @click="levelClose">取 消</el-button>
        <el-button type="primary" @click="Save">确 定</el-button>
      </span>
    </el-dialog>
//场景
        scenedialog: false,
        dialogLoading: false,
        scenedialogForm: {},
        sceneTitle: '',
        StepSelectOptions: [],
        checkboxItems: [],
        checkboxItemsGame: [],
        activeNames: [], // 活动名称，用于控制折叠面板的展开和关闭
        // 存储选中的id
        selectedIds: [],// 存储每个 el-collapse-item 的复选框选中状态
        selectedIdsGame: [],// 存储每个 el-collapse-item 的单选框选中状态
        isGameID: [], // 每个折叠面板的下拉选择框的值
        collectedData: [], // 存储每个折叠面板数据的对象数组
        GameSelectOptions: [{
            value: '1',
            label: '场景',
          },
          {
            value: '2',
            label: '游戏',
          },
        ]

handleCollapseChange(activeNames) {
        // activeNames 是一个数组，包含当前激活的 collapse-item 的 name
        // 如果您的 collapse 使用了 accordion 模式，这里只有一个元素
        this.activeIndex = activeNames[0];
        // this.activeIndex = activeNames;
      },
      //场景
      Save() {
        // 收集选中的checkbox项的ID
        let index = this.activeIndex
        console.log(index,this.checkboxItemsGame)
        console.log(this.selectedIdsGame[index])//name
        this.selectedIds =
          this.checkboxItems.filter((item, index) => this.selectedIds[index])
          .map(item => item.id);
        let aa = this.StepSelectOptions[this.activeNames];
        this.selectedIdsGame =
           this.checkboxItemsGame
            .filter(item => this.selectedIdsGame.some(selectedName => item.name === selectedName))
            .map(item => item.id);

        console.log(this.selectedIds, this.selectedIdsGame)//id
        this.StepSelectOptions.forEach((step, index) => {
          // 假设每个 StepSelectOptions 的 item 都有一个 id 和 name
          let stepItem = this.StepSelectOptions[index];
          let resourceType = this.isGameID[index];
          let selectedSceneIds;
          if (resourceType === '1') {
            // 如果资源类型为 '1'，使用 this.selectedIds 收集选中的 scene_ids
            // selectedSceneIds = this.selectedIds[index].join(',');
            selectedSceneIds = this.selectedIds[index];
          } else if (resourceType === '2') {
            selectedSceneIds = this.selectedIdsGame[index];
          }

          // 创建对象
          let dataObj = {
            step_name: stepItem.name,
            resource_type: resourceType,
            scene_ids: selectedSceneIds 
          };

          // 将对象添加到 collectedData 数组
          this.collectedData.push(dataObj);
        });
        console.log('this.collectedData', this.collectedData)
      },

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

【您想要解决的问题】：您提问的目的是解决在使用Element UI的el-collapse-item组件时，当弹窗打开时，如何根据返回的StepSelectOptions数组的不同个数动态展示不同的多选框或单选框，并且确保在点击确定按钮时能够正确获取并保存每个el-collapse-item中选中的选项。

【问题出现原因】：问题出现的原因是在Save方法中，selectedIds和selectedIdsGame数组没有正确地根据el-collapse-item中的选中状态动态更新。此外，v-model绑定可能也需要调整，以确保能够正确地跟踪每个el-collapse-item中的选中状态。

【问题解决方案】：为了解决这个问题，我们需要确保v-model正确地绑定到每个el-collapse-item的选中状态，并且在Save方法中正确地收集和保存选中的数据。

【提供代码】：以下是修改后的代码，它包括了对v-model的调整和Save方法的改进：

<template>
  <!-- ...其他代码... -->
  <el-collapse-item v-for="(item, index) in StepSelectOptions" :key="item.id" :title="item.name"
    :name="index.toString()">
    <!-- 复选框列表 -->
    <el-select v-model="isGameID[index]" placeholder="请选择" @change="selectOptionsChangeGame(index)">
      <el-option v-for="item in GameSelectOptions" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <br />
    <template v-if="isGameID[index] === '1'">
      <el-checkbox v-for="subItem in checkboxItems"
        :key="subItem.id" :label="subItem.title"
        v-model="selectedIds[index]">
        {{ subItem.title }}
      </el-checkbox>
    </template>
    <template v-if="isGameID[index] === '2'">
      <el-radio v-for="(subItem, subIndex) in checkboxItemsGame"
        :key="subItem.id" :label="subItem.name"
        v-model="selectedIdsGame[index]">
        {{ subItem.name }}
      </el-radio>
    </template>
  </el-collapse-item>
  <!-- ...其他代码... -->
</template>

<script>
export default {
  // ...其他数据和方法...
  data() {
    return {
      // ...其他数据...
      selectedIds: this.StepSelectOptions.map(() => []), // 初始化为每个StepSelectOptions一个空数组
      selectedIdsGame: this.StepSelectOptions.map(() => null), // 初始化为每个StepSelectOptions一个null
    };
  },
  methods: {
    // ...其他方法...
    Save() {
      this.collectedData = this.StepSelectOptions.map((step, index) => {
        let resourceType = this.isGameID[index];
        let selectedSceneIds = resourceType === '1' ? this.selectedIds[index] : this.selectedIdsGame[index];
        return {
          step_name: step.name,
          resource_type: resourceType,
          scene_ids: selectedSceneIds,
        };
      });
      console.log('this.collectedData', this.collectedData);
    },
    // ...其他方法...
  },
};
</script>

【代码运行方式】：这段代码需要在Vue.js环境中运行，确保你已经安装了Element UI库，并且StepSelectOptions、checkboxItems和checkboxItemsGame数组已经被正确填充。

【代码预期运行结果】：

• 当弹窗打开时，会根据StepSelectOptions数组的个数动态展示相应的多选框或单选框。
• 用户选择完毕后，点击确定按钮，Save方法会收集每个el-collapse-item中的选中状态，并将其保存到collectedData数组中。

【推荐相关链接】：

• Element UI 官方文档：https://element.eleme.io/#/en-US/component/collapse
• Vue.js 官方文档：https://vuejs.org/v2/guide/
• Vue.js 动态组件和v-for指令：https://vuejs.org/v2/guide/list.html