一、实现效果

二、具体代码

        1、页面代码

<template><div class="app-container"><el-row><!--列表选择--><el-col :span="6" :xs="24"><div class="tac"><div style="display: inline-block; margin-bottom: 28px;margin-top: 8px">请选择奶粉A：</div><el-select v-model="queryParams.milikAId" clearable filterable placeholder="请选择"style="margin-right: 10px"><el-optionv-for="item in milkList":key="item.milk_powder_id":label="item.milk_powder":value="item.milk_powder_id"></el-option></el-select></div></el-col><el-col :span="6" :xs="24"><div class="tac"><div style="display: inline-block; margin-bottom: 28px;margin-top: 8px">请选择奶粉B：</div><el-select v-model="queryParams.milikBId" clearable filterable placeholder="请选择"style="margin-right: 10px"><el-optionv-for="item in milkList":key="item.milk_powder_id":label="item.milk_powder":value="item.milk_powder_id"></el-option></el-select></div></el-col><el-col :span="6" :xs="24"><div class="tac select-group"><div style="display: inline-block; margin-bottom: 28px; margin-top: 8px;">请选择国标：</div><el-select v-model="queryParams.nationalStandardId" clearable filterable placeholder="请选择"style="margin-left: 10px;"><el-optionv-for="item in milkStandardList":key="item.nationalStandardId":label="item.nationalStandard":value="item.nationalStandardId"></el-option></el-select></div></el-col><el-col :span="6" :xs="24" style="display: inline-block"><el-button type="success" plain @click="getTriggerCompare">确定-开始对比</el-button></el-col><div><contrastComp :contrast="contrast" :column="column"/></div></el-col></el-row></div>
</template>
<script>import contrastComp from '@/components/contrast'const contrast = Object.freeze([{img: 'https://img30.360buyimg.com/popshop/jfs/t1/243281/34/3214/2565/65a618c5F88f336b0/39e3e12f7ad20609.jpg',label: '汉兰达 2013款  2.7L 两驱5座紫金版',marketTime: '2013.06',width_height_length: '4795*1910*1760'},{img: 'https://img30.360buyimg.com/popshop/jfs/t1/243281/34/3214/2565/65a618c5F88f336b0/39e3e12f7ad20609.jpg',label: '汉兰达 2013款 2.7L 两驱7座紫金版',marketTime: '2013.06',width_height_length: '4795*1910*1760'},{img: 'https://img30.360buyimg.com/popshop/jfs/t1/243281/34/3214/2565/65a618c5F88f336b0/39e3e12f7ad20609.jpg',label: '汉兰达 2013款 2.7L 两驱7座探索版',marketTime: '2013.07',width_height_length: '4795*1910*1760'},{img: 'https://img30.360buyimg.com/popshop/jfs/t1/243281/34/3214/2565/65a618c5F88f336b0/39e3e12f7ad20609.jpg',label: '汉兰达 2012款 2.7L 两驱5座精英版',marketTime: '2012.06',width_height_length: '4795*1910*1730'}
])const column = Object.freeze([{label: '图片',prop: 'img'},{label: '名称',prop: 'label'},{label: '上市时间',prop: 'marketTime'},{label: '长*宽*高(mm)',prop: 'width_height_length'}
])export default {name: 'Index',components: {contrastComp},data() {return {contrast, // 对比数据，与平时使用相同column// 左侧名称和顺序}}
}
</script><style scoped>
.content {width: 100%;
}.yes-sir {width: 1000px;margin: 30px auto;border: solid 1px #eee;
}
</style>

 

        2、竖列组件代码

<template>
<div class="content">
<el-table
:data="targetArr"
:show-header="false"
stripe
border
style="width: 100%"
>
<el-table-column
prop="00"
align="center"
/>
<el-table-column
v-for="item in clumnArr"
:key="item"
:prop="String(item)"
align="center"
>
<template slot-scope="scope">
<div v-if="scope.row['00'] === '图片'">
<img :src="scope.row[scope.column.property]" alt="">
</div><span v-else>{{ scope.row[scope.column.property] }}</span>
</template>
</el-table-column>
</el-table>
</div>
</template><script>
export default {
name: 'Contrast',
props: ['contrast', 'column'],
data () {
return {
targetArr: [],
clumnArr: []
}
},
created () {
this.getChangeData()
},
methods: {
getChangeData () {
const clumnArr = [...new Array(this.contrast.length).keys()] // 改变数据，根据数据的长度生成数组，作为table的column的prop
const targetArr = [] // 数据数组
/**
* 下面则是将原数组转为合适数据
*/
const tableData = []
let objKey = []// 第一步将原数组中对象的key变为左侧需要展示的文字
this.contrast.forEach(ele => {
const obj = {}
this.column.forEach(item => {
obj[item.label] = ele[item.prop]
})
Object.keys(obj).forEach((item) => {
objKey.push(item)
})
tableData.push(obj)
})// 将所有的key值放到数组中
objKey = [...new Set(objKey)]// 根据左侧值遍历数组
for (let i = 0; i < objKey.length; i++) {
const obj = {}
for (let m = 0; m < tableData.length; m++) {
obj[m] = tableData[m][objKey[i]]
}
targetArr.push(obj)
}// 新增一个00作为左侧第一列的prop
targetArr.forEach((ele, index) => {
ele['00'] = objKey[index]
})this.targetArr = targetArr
this.clumnArr = clumnArr
}
}}
</script><style scoped>
.content{
width: 100%;
position: relative;
}</style>