Vue —— 排他思想

思路

在收集数据 spuImageList:[], 中加一个控制变量 isDefault ，利用 v-if 、v-else 进行排他

<template><el-form><el-form-item label="图 片 列 表"><el-table style="width: 100%" border :data="spuImageList" @selection-change="handleSelectionChange"><el-table-column type="selection" prop="prop"  width="width" align="center" > </el-table-column><el-table-column prop="imgUrl" label="图 片" width="width" align="center"><template slot-scope="{row,$index}"><img :src="row.imgUrl" alt="" style="width: 80px;height: 80px"></template></el-table-column><el-table-column prop="imgName" label="名 称" width="width" align="center"> </el-table-column><el-table-column prop="prop" label="操 作" width="width" align="center"><template slot-scope="{row,$index}"><el-button v-if="row.isDefault==0" type="primary" @click="changeDefault(row)" >设置默认</el-button><el-button v-else type="success">默认</el-button></template></el-table-column></el-table></el-form-item></el-form>
</template><script>......data(){return{//存储图片的数据spuImageList:[],}},......//获取图片数，由于以后保存提交给服务器的数据要包含 isDefault 字段，所以在这进行一波操作let spuImageListResult = await this.$API.sku.reqSpuImageList(spu.id);if(spuImageListResult.code==200){let list = spuImageListResult.data;list.forEach(item=>{item.isDefault = 0;})this.spuImageList = list;}//设置为默认图片changeDefault(row){//遍历spuImageList，将选中元素的 isDefault 改为1，注意，默认只有一个this.spuImageList.forEach(item=>{item.isDefault = 0;if(item.id===row.id){item.isDefault = 1;}})},</script>

Vue —— 排他思想相关推荐

jQuery 里面的排他思想
jQuery 里面的排他思想 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
vue概述、vue文件特点、vue核心思想、双向数据流、单文件、启动一个vue项目、声明式渲染
vue介绍: Vue:当前较火的MVVM框架,轻量.简介.高效.组件化.数据驱动,模块和渲染函数的弹性选择,简单的语法及项目创建,渲染速度极快,基于Virtual Dom,利用虚拟DOM实现快速渲染: ...
什么是排他思想算法？（源码解析）
排他思想算法 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
编程思维---排他思想
排他思想:就是排除掉其他的(包括自己),然后再给自己设置想要实现的效果.总而言之,排他思想的实现步骤就是所有元素全部清除再设置当前元素. 大白话---简单总结:干掉兄弟,复活自己使用场景:1.Tab ...
android 排他button,javascript排他思想
排他思想: 干掉所有人,设置我自己,先将所有人全设置为"",然后再设置当前的值 1.含义: 关于排他思想,我的理解就是先排除掉其他的(包括自己) ,最后再给自己(this)加想要的 ...
DOM系列之排他思想
文章の目录 1.什么是排他思想 2.示例写在最后 1.什么是排他思想如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法所有元素全部清除样式(干掉其他人) 给当前元素设 ...
JavaScript排他思想
什么是排他思想? 排他思想是为一组同类型元素中的某一个元素设置样式时,采用的一种特定顺序.首先将所有元素的样式设置为一般样式(包括特定的某个元素),再为特定元素设置特定样式. 排他思想的优势排他思想 ...
JavaScript之排他思想详述
在前面的博客中,小熊更新了相关操作元素的方法,但是如果有同一组元素,我们想要某一个元素实现某种样式,这时需要怎么办呢? 这里就要用到循环的排他思想. 排他思想的算法就是: 排除掉其他的(包括自己),然 ...
JavaScript 排他思想
排他思想排他思想案例分析排他思想如果有同一组数元素我们想要某一个元素实现某种样式这时候需要用到循环的排他思想算法 1 所有元素全部清楚样式 2 给当前的元素设置样式 3 注意顺序先清楚 ...

Vue —— 排他思想

思路

Vue —— 排他思想相关推荐

最新文章

热门文章