SOURCE

new Vue({
  el: '#app',
  components: {},
  props: [],
  data() {
    return {
      ThArr: ["date", "name", "address"],
      tableData: [
        	{
            "innerCode": "001",
            "date" : {
              "value": "--",
              "isSequenceIconShow": false,
              "isSequenceSelected": false
            },
            "name" : {
              "value": "--",
              "isSequenceIconShow": false,
              "isSequenceSelected": false
            },
            "address" : {
              "value": "--",
              "isSequenceIconShow": false,
              "isSequenceSelected": false
            },
          },
      	  {
        		"innerCode": "002",
            "date" : {
              "value": "--",
              "isSequenceIconShow": false,
              "isSequenceSelected": false
            },
            "name" : {
              "value": "--",
              "isSequenceIconShow": false,
              "isSequenceSelected": false
            },
            "address" : {
              "value": "--",
              "isSequenceIconShow": false,
              "isSequenceSelected": false
            },
          },
        	{
        		"innerCode": "003",
            "date" : {
              "value": "--",
              "isSequenceIconShow": false,
              "isSequenceSelected": false
            },
            "name" : {
              "value": "--",
              "isSequenceIconShow": false,
              "isSequenceSelected": false
            },
            "address" : {
              "value": "--",
              "isSequenceIconShow": false,
              "isSequenceSelected": false
            },
          },
      	],
      currentSqueArr: [],
      currentStockCode: '',
      currentProp: ''
    }
  },
  methods: {
    cellMouseEnter(row, column, cell, event) { // 鼠标进入cell时
      let prop = column.property
      this.$nextTick(() => {
        row[prop].isSequenceIconShow = true
      })
      this.currentStockCode = row.innerCode
      this.currentProp = prop
    },
    cellMouseLeave(row, column, cell, event) { // 鼠标离开cell时
      // 判断当前cell是否已存在于时序图数组中
      let isExisted = this.currentSqueArr.find(item => {
        return item.prop === this.currentProp && item.stock === this.currentStockCode
      })
      if (!isExisted) { // 不存在
        this.hideCurSqueIcon(row, column)
      }
    },
    hideCurSqueIcon(row, column) {  // 隐藏当前cell的时序图icon
      let prop = column.property
      this.$nextTick(() => {
        row[prop].isSequenceIconShow = false
        row[prop].isSequenceSelected = false
      })
    },
    activeSquesIcon() { // 设置当前cell的时序图icon的激活状态
      let curIndex = this.tableData.findIndex(item => item.innerCode === this.currentStockCode)
      let curStockObj = this.tableData[curIndex]
      this.$nextTick(() => {
        curStockObj[this.currentProp].isSequenceSelected = true
      })
    },
    async hideAllSquesIcon() {  // 隐藏所有时序图icon
      console.log('隐藏所有时序图icon')
      // 将之前点击的证券代码的时序图icon全部隐藏并取消激活
      if (this.currentSqueArr.length <= 2) {
        let index = this.tableData.findIndex(item => item.innerCode === this.currentSqueArr[0].stock)
        let row = this.tableData[index]
        let prop = this.currentSqueArr[0].prop
        await this.$nextTick(() => {
          row[prop].isSequenceSelected = false
          row[prop].isSequenceIconShow = false
        })
        console.log('时序图长度小于等于2')
      }
      else {
        if (this.currentSqueArr[0].stock === this.currentSqueArr[1].stock) {  // 取消一行
          let index = this.tableData.findIndex(item => item.innerCode === this.currentSqueArr[0].stock)
          let row = this.tableData[index]
          await this.$nextTick(() => {
            this.currentSqueArr.forEach(item => {
              row[item.prop].isSequenceSelected = false
              row[item.prop].isSequenceIconShow = false
            })
          })
          console.log('取消之前一行的icon选中状态')
        }
        else if (this.currentSqueArr[0].prop === this.currentSqueArr[1].prop) {  // 取消一列
          await this.$nextTick(() => {
            this.tableData.forEach(item => {
              item[this.currentSqueArr[0].prop].isSequenceSelected = false
              item[this.currentSqueArr[0].prop].isSequenceIconShow = false
            })
          })
          console.log('取消之前一列的icon选中状态')
        }
      }
    },
    async clickSequenceIcon() {  // 点击cell的时序图
      let currentCell = { // 当前标的对象
        prop: this.currentProp,
        stock: this.currentStockCode
      }
      // 判断当前cell是否已存在于时序图数组中
      let isExistedIndex = this.currentSqueArr.findIndex(item => {
        return item.prop === this.currentProp && item.stock === this.currentStockCode
      })
      // ⭐进行点击判断
      if (this.currentSqueArr.length === 0) { // 第一次点击
        console.log('第一次点击的元素，直接添加进数组')
        this.currentSqueArr.push(currentCell)
        this.activeSquesIcon()
      } 
      else if (isExistedIndex !== -1) {  // 已存在
        await this.deleteCurSqueItem(this.currentProp, this.currentStockCode, isExistedIndex)
      } 
      else if (this.currentSqueArr.length >= 6) { // 超出6个标的时
        alert('最多展示6个标的的时序图')
      } 
      else {  // 第N次点击
        this.currentSqueArr.push(currentCell) // 先添加当前元素进数组
        if (this.currentSqueArr[0].prop === this.currentSqueArr[1].prop) {  // 同列才可添加
          if (this.currentProp === this.currentSqueArr[0].prop) {
            this.activeSquesIcon()
          } else {
            await this.hideAllSquesIcon()
            this.currentSqueArr = []
            this.currentSqueArr.push(currentCell)
            this.activeSquesIcon()
          }
        } 
        else if (this.currentSqueArr[0].stock === this.currentSqueArr[1].stock) {  // 同行才可添加
          if (this.currentStockCode === this.currentSqueArr[0].stock) {
            this.activeSquesIcon()
          } else {
            await this.hideAllSquesIcon()
            this.currentSqueArr = []
            this.currentSqueArr.push(currentCell)
            this.activeSquesIcon()
          }
        } 
        else {  // 既不同行也不同列
          await this.hideAllSquesIcon()
          console.error('既不同行也不同列：删除时序图数组')
          this.currentSqueArr = []
         this.currentSqueArr.push(currentCell)
          this.activeSquesIcon()
        }
      }
      console.log('当前的时序图数组为：')
      console.log( this.currentSqueArr)
    },
  }
})

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.js"></script>

<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
<div id="app">
  <el-table
    :data="tableData"
    @cell-mouse-enter="cellMouseEnter"
    @cell-mouse-leave="cellMouseLeave"
    style="width: 100%">
    <el-table-column
      v-for="(item,index) in ThArr"
      :prop="item"
      :label="item"
      width="180">
      <template slot-scope="scope"><!-- 自定义单元格内容 -->
      <i class="iconfont icon-charts_line" @click="clickSequenceIcon" v-show="scope.row[item].isSequenceIconShow" :class="{isSelected: scope.row[item].isSequenceSelected}"></i>
        <span class="ellipsis-line">{{ scope.row[item].value }}</span>
      </template>
    </el-table-column>
  </el-table>
</div>

.pointer{
  cursor: pointer;
}
.red-font{
  color: #f00;
}
.icon-charts_line {
  cursor: pointer;
}
.isSelected {
  color: red;
}