Element-ui 动态Table表格

最近在做相关需求，感觉太多的重复代码，网上也很多这种动态的，写的很好，所以我借鉴了很多大佬的动态table表格，结合需求，完成了我自己需要的table。

一、创建相关文件

1.config文件夹相关配置文件
2.一个用来配置的’pageTable.vue’文件

二、pageTable文件里面的内容

<template><div class="container"><el-table :data="tableData" border style="width: 100%"><!-- 这里是否要添加前面的序号123456--><el-table-column label="序号" type="index" width="50" fixed="left"></el-table-column><div v-for="(col, index) in cols":key="index"><!-- 这里判断是什么类型 --><template v-if="col.type == 'input'"><el-table-column
            :prop="col.prop":label="col.label":width="col.width"
            align="center"
            show-overflow-tooltip
          ></el-table-column></template><!-- 这里用了字典 --><template v-else-if="col.type == 'select'"><el-table-column
            :prop="col.prop":label="col.label":width="col.width"
            align="center"
            show-overflow-tooltip
          ><template slot-scope="scope"><template v-for="(item, index) in dictObj[col.dict]"><span :key="index" v-if="scope.row[col.prop] == item.code">{{ item.name }}</span></template></template></el-table-column></template><template v-else-if="col.type == 'datePicker'"><el-table-column
            :prop="col.prop":label="col.label":width="col.width"
            align="center"
            show-overflow-tooltip
          ><template slot-scope="scope"><span v-if="scope.row[col.prop]">{{ scope.row[col.prop].split(" ")[0]}}</span></template></el-table-column></template></div><!-- 这里可以根据需看有没有需要操作按钮的 --><el-table-column
      fixed="right"
      label="操作"
      width="100"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button></template></el-table-column></el-table></div></template><script>import{ mapState }from"vuex";exportdefault{name:"pageTable",props:{// 接收展示数据tableData:{type: Array,default(){return[];},},// 接收配置项的数据cols:{type: Array,default(){return[];},},},data(){return{};},computed:{// 我这里是要用到字段，所以引入了vuex...mapState({dictObj:(state)=> state.dictionaryValueManagement.dictObj,}),},methods:{handleClick(row){
        console.log(row);}},};</script>

三、配置项config相关

其实table 表格里面的align也可以动态，我这里偷懒了，直接在pageTable写死居中了

exportconst bkjlConfig ={cols:[{width:'150',// 宽度type:'select',// 类型prop:'manageposttype',// prop接收数据label:'分期',// label名dict:'manageposttype'//  匹配是哪一个字典},{width:'200',type:'input',prop:'issuingauthority',label:'机构',},{width:'150',type:'select',prop:'manageposttype',label:'岗位类别',dict:'manageposttype'},{width:'200',type:'select',prop:'careertreecode',label:'岗位名称',dict:'careertreecode'},{width:'150',type:'datePicker',prop:'manageposttype',label:'报名时间',},{width:'150',type:'select',prop:'validStatus',label:'审核状态',dict:'validStatus'},{width:'',type:'input',prop:'appliConditions',label:'详细信息',},]}

四、在需要的地方使用

<!-- 我就不显示那么多了 --><div class="pageContainerCon"><el-collapse v-model="activeNames" @change="handleChange"><el-collapse-item title="从业证书" name="1"><PageTable :tableData="tableData1":cols="cyzsConfig.cols"></PageTable></el-collapse-item><el-collapse-item title="报考记录" name="2"><PageTable :tableData="tableData7":cols="bkjlConfig.cols"></PageTable></el-collapse-item><el-collapse-item title="业务办理记录" name="3"><PageTable
            :tableData="tableData1":cols="ywbljlConfig.cols"></PageTable></el-collapse-item><el-collapse-item title="证书变更记录" name="4"><PageTable
            :tableData="tableData1":cols="zsbgjlConfig.cols"></PageTable></el-collapse-item></el-collapse></div><script>import PageTable from"./pageTable.vue";import{ cyzsConfig }from"../config/cyzsConfig.js";import{ bkjlConfig }from"../config/bkjlConfig.js";import{ jxjyjlConfig }from"../config/jxjyjlConfig.js";import{ mapState }from"vuex";exportdefault{name:"Detail",components:{
    PageTable,},props:{ryid:{type: String,default(){return"";},},},data(){return{formData:{},xlForm:{},activeNames:["1","2","3","4","5","6","7","8"],url:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",tableData:[],tableData1:[],tableData5:[],tableData7:[],cyzsConfig: cyzsConfig,bkjlConfig: bkjlConfig,jxjyjlConfig: jxjyjlConfig,};},computed:{...mapState({dictObj:(state)=> state.dictionaryValueManagement.dictObj,}),},methods:{handleChange(val){
      console.log(val);},},};</script>

大概就是这么用吧，可能后续有继续优化更新。