vue封装elementui的table,进行动态列,数据的公共组件
公共组件的table.vue
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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' } ]