vue封装elementui的table，进行动态列，数据的公共组件

公共组件的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>

 plugins/index.js

import Vue from "vue"
import cTable from "@/components/ishc-table"
Vue.component("c-table", cTable);

用的vue组件，oneTable.vue

 <c-table
          :tableData="tableData"
          :columns="columns"
          :tooltipName="tooltipName"
        ></c-table>

场景因为是点击不同的块，请求不同的Data,然后不同的columns

设计思路

建立一个前端字典表，通过匹配key-values里面的key返回values里面存的columns

/dictionary/index.js

import {needsTestNum,resumeScreenTime,customScreenTime,personArrivalCycle} from './dictList/partOneDict'
import {needsNum,pushResumeNum,resumePassNum,internalPassNum,customPassNum,offerReceiveNum,finalNum,allProcessEfficiency} from './dictList/partTwoDict'
const partOneDict = {
    '人员':personArrivalCycle,
}
const partTwoDict = {
    '求数':needsNum,
    '推数':pushResumeNum,
}
export const dictionary = {...partOneDict,...partTwoDict}
export function dictList(key) {
    for (let keys in dictionary) {
        if(keys == key){
            return dictionary[keys]
        }
    }
}

 /dictionarydictList/partOneDict.js

export const needsTestNum = [
    {
      prop: "orgName",
      label: "组*",
      width:'auto'
    },
    {
      prop: "prjName",
      label: "项*",
      width:'auto'
    },
    {
      prop: "subNeedCode",
      label: "子*",
      width:'auto'
    },
    {
      prop: "workAt",
      label: "地*",
      width:'140px'
    },
    {
      prop: "demandOnTime",
      label: "需*",
      width:'140px'
    },
    {
      prop: "planAt",
      label: "需求*",
      width:'140px'
    },
    {
      prop: "recruitIndexDay",
      label: "需求预*",
      width:'140px'
    }
  ]