vue el-table 表头垂直封装（二次封装el-table）

根据业务需求，故此做了表格的封装，基于el-table的基础做的改造，希望能帮助到大家，具体效果如下图：

效果一

效果二

小提示- 根据不同的业务需求可以灵活搭配’(column )生成多列表格，数据横向渲染（具体样式自行配置）；

垂直表格组件封装
代码如下：

	
	<template>
	  <div class="verticalTable">
	    <el-table :data="tableData" :show-header="false">
	      <el-table-column v-for="i in columns"
	                       :key="i" :prop="i + ''"
	                       :class-name="i % 2 ? 'value-cell' : 'label-cell'"
	                       :min-width="i % 2 ? 150 / column / 3 + '%' : 100 / column / 3 + '%'"/>
	    </el-table>
	  </div>
	</template>
    <script>
	   name: "VerticalTable",
	    props:{
	      /* 显示几列数据 */
	      column: {
	        type: Number,
	        default: 2
	      },
	      pre: {
	        type: Object,
	        default: null
	      },
	      fields: {
	        type: Object ,
	        default: {}
	      },
	      data: {
	        type: Object,
	        default() {
	          return {}
	        }
	      }
	    },
	    computed:{
	   		columns() {
	      		return [...Array(this.column * 2).keys()];
	      	},
	      	tableData(){
	      		return this.renderTable(this.testData, this.column)
	      	}
	    },
	    methods:{
	    	renderTable(obj,column){
	    		const dataSource=[];
	    		const contentList=[];
	    		Object.entries(object).forEach(k => {
		          if (this.fields[k[0]]) {
		            dataSource.push(k)
		          }
        		})
		        for (let i = 0; i < dataSource.length; i += column) {
		          const row = {}
		          for (let j = 0; j < column && i + j < dataSource.length; j++) {
		            const [key, value] = dataSource[i + j]
		            row[j*2] = this.fields[key]
		            row[j*2+1] =value;
		          }
		          content.push(row)
		        }
		        console.log(content);
		        return content;
	    	}
	    }
    </script>
    <style>
    .verticalTable {
	    border-collapse: collapse;
	    table-layout: fixed;
	    width: 100%;
	    ::v-deep .label-cell, ::v-deep.value-cell {
	        border: 0.5px solid #ebeef5;
	        text-align: center;
	        padding: 10px;
	       img {
	        width: 15px;
	        height: 15px;
	      }
	      ::v-deep .fileName{
	        cursor: pointer;
	        color:blue;
	        text-decoration:underline;
	      }
	    }
	    ::v-deep .label-cell {
	      background: #f5f7fa;
	      width: 15%;
	    }
  }
    </style>

vue页面调用组件：

	//页面调用
	<template>
		<vertical-table :fields="tableField" :column="3" :data="tableData" />
	</template>
	data(){
		return {
			tableField:{
		  		value1:'title_1',
				value2:'title_2',
				value3:'title_3',
				value4:'title_4',
				value5:'title_5',
			},
			tableData:Object.fromEntries(Object.entries(this.tableField).map(i=>[Object.values(i)[0],''])),
		}
	},
	methods:{
		async queryList(){
			const  res = await this.axios.post(url,params)
			Object.assign(this.tableData ,res)
		}
	}
	 

感谢各位读者的阅读，本文章有任何错误都可以在评论区发表你们的意见，我会对文章进行改正的。如果本文章对你有帮助请动一动你们敏捷的小手点一点赞，你的每一次鼓励都是作者创作的动力哦！😘