xiangan_pc/src/components/hm-crf/crf-data.vue

<template>
  <div class="crf-data-container">
    <div class="exam-info-container clearfix">
      <div class="exam-title">{{ examName }}</div>
      <div class="exam-date-time-list" />
    </div>

    <div class="dialog-container">
      <el-table :data="activeObj.data" :span-method="arraySpanMethod" border style="width: 100%">
        <el-table-column align="center" show-overflow-tooltip width="150px">
          <template slot="header" slot-scope="scope">
            <el-select
              ref="select"
              v-model="activeRecId"
              placeholder="请选择"
              popper-class="c-el-select-popper"
              :popper-append-to-body="false"
              @visible-change="selectVisibleHandle"
            >
              <el-option
                v-for="item in list"
                :key="item.recId"
                :label="item.time"
                :value="item.recId"
                @mouseover.native="preview(item)"
                @mouseout.native="restore()"
              />
            </el-select>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip label="OD">
          <template slot-scope="scope">
            <span>{{ (scope.row.both||scope.row.od)|f_null }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip label="OS">
          <template slot-scope="scope">
            <span>{{ (scope.row.both||scope.row.os)|f_null }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  filters: {
    f_null(val) {
      if ((!val) || val === 'null') { return '' } else { return val }
    }
  },
  props: {
    examName: { type: String, default: '' },
    list: { type: Array, default: () => [] },
    value: { type: Object, default: () => { } }
  },
  data() {
    return {
      activeRecId: '',
      activeObj: {
        type: '',
        time: null,
        recId: '',
        data: []
      },
      values: ''
    }
  },
  watch: {
    activeRecId(val) {
      this.activeObj = this.list.find((item, index, array) => item.recId === val)
      this.$emit('input', this.activeObj)
    },
    list(val) {
      this.init()
    }
  },
  mounted() {
    if (this.list.length > 0) { this.init() }
  },
  methods: {
    init() {
      this.activeRecId = this.list[0].recId
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row.both && column.property !== 'name') {
        // od列1,os列2.(合并od，隐藏os)
        if (columnIndex === 1) {
          return [1, 2]
        } else if (columnIndex === 2) {
          return [0, 0]
        }
      }
    },
    preview(item) {
      this.activeObj = item
    },
    restore() {
      this.activeObj = this.list.find((item, index, array) => item.recId === this.activeRecId)
    },
    selectVisibleHandle(val) {
      if (val && this.list.length > 0) {
        const selectInputDom = this.$refs.select.$el
        // 偏移量
        const width = selectInputDom.offsetWidth
        const selectPoper = selectInputDom.getElementsByClassName('c-el-select-popper')[0]
        const arrowDom = selectInputDom.getElementsByClassName('popper__arrow')[0]
        this.$nextTick(function() {
          const left = parseInt(selectPoper.style.left)

          // 偏右
          // arrowDom.style.left = '10px'
          // selectPoper.style.left = (left + width - 25) + 'px'

          // 偏左
          arrowDom.style.left = (width + 20) + 'px'
          selectPoper.style.left = (left - width - 10) + 'px'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.crf-data-container {
  margin-bottom: 5px;
  .exam-info-container {
    margin-bottom: 5px;

    .exam-title {
      float: left;
      margin-top: 5px;
      font-size: 16px;
      font-weight: 600;
    }
    .exam-date-time-list {
      float: right;
    }
  }
}
</style>
<style lang="scss">
.crf-data-container {
  .el-table {
    z-index: inherit !important;
  }
}

</style>