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

公共组件的table.vue

 plugins/index.js

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

用的vue组件，oneTable.vue

 table
          :tableData="tableData"
          :columns="columns"
          :tooltipName="tooltipName"
        >

场景因为是点击不同的块，请求不同的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'
    }
  ]