1.应用场景：表格同一个位置两个按钮需要切换，通过设置条件只显示一个按钮的时候。
2.代码：
<template>
<el-form-item label="图片列表">
<!-- @selection-change：element插件，当选择项发生变化时会触发该事件 -->
<el-table style="width: 100%" border :data="spuImageList" @selection-change="handleSelectionChange">
<el-table-column type="selection" prop="prop" width="80" />
<el-table-column prop="prop" label="图片" width="width">
<template slot-scope="{row, $index}">
<img :src="row.imgUrl" style="width:100px;height:100px">
</template>
</el-table-column>
<el-table-column prop="imgName" label="名称" width="width" />
<el-table-column prop="prop" label="操作" width="width">
<template slot-scope="{row, $index}">
<!-- row图片信息 -->
<el-button v-if="row.isDefault === 0" type="primary" @click="changeDefault(row)">设置默认</el-button>
<el-button v-else>默认</el-button>
</template>
<script>
export default {
name: 'SkuForm',
data() {
return {
spuImageList: [], // 存储图片信息
// 收集sku数据
imageList: [] // 收集图片的数据字段,注意：收集的数据目前缺少isDefault字段，将来提交给服务器的时候需要整理参数
}
}
methods: {
// table表格复选框按钮的事件
handleSelectionChange(params) {
// 获取到用户选中的图片信息数据，但是当前收集的数据中缺少isDefault字段，isDefault：设置谁是默认
this.imageList = params
},
// 排他操作
changeDefault(row) {
// 图片列表数据的isDefault字段变为0
this.spuImageList.forEach(item => {
item.isDefault = 0
})
// 点击的图片数据变为1
row.isDefault = 1
// 收集默认图片的地址
this.skuInfo.skuDefaultImg = row.imgUrl
}
}
</script>
