Vue —— 10、下拉框列表收集两个以上数据

原创已于 2022-05-02 21:06:26 修改

· 771 阅读

0 ·

版权

文章标签：

#vue.js

于 2022-05-02 15:24:37 首次发布

java系列专栏收录该内容

47 篇文章

订阅专栏

本文详细讲解了如何在Vue.js应用中创建一个下拉框组件，用于收集和展示两个或更多数据项。通过实例代码，探讨了如何绑定数据、处理用户选择并实现动态更新，为前端开发者提供了一种高效构建此类交互元素的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-form>
	  <!--把 option中 :value="`${attr.id}:${attrValue.id}`" 的数据收集到  ==> attrInfoList中每个对象里面-->
      <el-form-item label="平 台 属 性">
        <el-form :inline="true" ref="form" label-width="80px" :data="attrInfoList">
          <el-form-item :label="attr.attrName" v-for="(attr,index) in attrInfoList" :key="attr.id">
            <el-select placeholder="请选择" value="" style="width: 150px" v-model="attr.attrIdAndValueId">
              <el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}`" v-for="(attrValue,index) in attr.attrValueList" :key="attr.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

</el-form>



<script>
	......
method:{
	// 保存 按钮
    async saveSku(){
      const {attrInfoList,skuInfo,spuSaleAttrList,imageList} = this;
      //整理参数 ==> 可以用 forEach，也可以用下面这种
      skuInfo.skuAttrValueList = attrInfoList.reduce((prev,item)=>{
        if(item.attrIdAndValueId){
          const [attrId,valueId] = item.attrIdAndValueId.split(':');
          prev.push({attrId,valueId});
        }
        return prev;
      },[]);
      // 整理销售属性
      skuInfo.skuSaleAttrValueList = spuSaleAttrList.reduce((prev,item)=>{
        if(item.saleAttrIdAndSaleAttrValueId){
          const [saleAttrId,saleAttrValueId] = item.saleAttrIdAndSaleAttrValueId.split(':');
          prev.push({saleAttrId,saleAttrValueId});
        }
        return prev;
      },[]);
      // 整理图片列表
      skuInfo.skuImageList = imageList.map(item=>{
        return{
          imaName: item.imgName,
          imgUrl: item.imgUrl,
          isDefault: item.isDefault,
          spuImgId: item.id,
        }
      })

      //发请求
      let result = await this.$API.sku.reqAddSku(skuInfo);
      if(result.code == 200){
        this.$message.success('添加 SKU 成功')
        this.$emit('goSpu')
      }
    },
}
</script>