vue对比功能，实现竖向table，可多列数据对比

一、实现效果

二、具体代码

        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-option
              v-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-option
              v-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-option
              v-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>