使用elementui的table组件实现一个类似于汽车之家的对比功能
不用特殊处理数据，只需使用平时常用的对象数组即可。
效果：
当前页代码：

<template>
  <div class="content">
    <h2>使用elementUi 的table来实现类似于汽车之家的对比功能，数据格式与平常使用一致</h2>
    <div class="yes-sir">
      <contrastComp :contrast="contrast" :column="column" />
    </div>
  </div>
</template>

<script>

import contrastComp from '@/components/contrast'

const contrast = Object.freeze([
  {
    img: require('../assets/1.jpg'),
    label: '汉兰达 2013款  2.7L 两驱5座紫金版',
    marketTime: '2013.06',
    width_height_length: '4795*1910*1760'
  },
  {
    img: require('../assets/2.jpg'),
    label: '汉兰达 2013款 2.7L 两驱7座紫金版',
    marketTime: '2013.06',
    width_height_length: '4795*1910*1760'
  },
  {
    img: require('../assets/3.jpg'),
    label: '汉兰达 2013款 2.7L 两驱7座探索版',
    marketTime: '2013.07',
    width_height_length: '4795*1910*1760'
  },
  {
    img: require('../assets/4.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>

该页定义了两个数据，第一个contrast数组，就是我们平时常用的对象数组格式
第二个定义了最左侧一列所要展示的名字。

下面是组件页

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

如代码所示，使用正常的数据，正常的table组件。在getChangeData函数中我们对正常数据进行了一系列处理，具体在代码中均有注释。

这样我们使用正常的数据，正常的组件，即可实现一个简单的对比功能。

传送门 有项目的代码，可以下载尝试。