公共元件的table.vue

<template>
  <div>
    <el-table
      :data="tableData"
      :row-class-name="tableRowClassName"
      style="width: 100%"
      tooltip-effect="dark"
    >
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.prop
 
"
        :label="item.label"
        :width="item.width"
      >
        <template slot-scope="scope">
          <div v-if="item.prop == tooltipName">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row[tooltipName]"
              placement
 
="top"
            >
              <div class="slh" @mouseenter="hvChange($event)">
                {{ getStr(scope.row[tooltipName]) }}
              </div>
            </el-tooltip>
          </div>
          <div v-else>
            <el-tooltip
              class
 
="item"
              effect="dark"
              :content="scope.row[item.prop]"
              placement="top"
              :disabled="disabled"
            >
              <div class="slh" @mouseenter="hvChange($event)">
                {{ scope.row[item.prop] }}
              </div>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: [],
    },
    columns: {
      type: Array,
      default: [],
    },
    tooltipName: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      disabled: false,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    hvChange(event) {
      try {
        let ev = event.target;
        let evWhite = parseInt(ev.scrollWidth); //文字實際寬度
        let contentWhite = parseInt(ev.clientWidth); // 文字可視寬度
        if (evWhite > contentWhite) {
          this.disabled = false; //顯示
        } else {
          this.disabled = true; //不顯示
        }
      } catch (error) {}
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "double";
      } else {
        return "single";
      }
    },
    getStr(str) {
      var index = str.lastIndexOf("/");
      str = str.substring(index + 1, str.length);
      return str;
    },
  },
};
</script>
<style lang="less" scoped>
.slh {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  // word-break: break-all;
}
//td這行的hover
/deep/ .el-table tbody tr:hover > td {
  background-color: #fff;
  color: #615f5f;
}
// 單個td的hover
// /deep/ .el-table tbody tr td:hover {
//   background-color: #fff;
//   color: #615f5f;
// }
</style>
<style lang="less">
//設定這是因為切換tooltip的disabled，會引起抖動
body {
  overflow: hidden;
}
</style>