基于elementui table组件竖向表格

清疚 2023-01-17 04:56 454阅读 0赞

<template>
    	<el-table 
    	:data="tableData" 
    	style="width: 100%" 
    	:show-header="false" 
    	border 
    	:row-style="rowStyle">
    		<el-table-column prop="date">
    		</el-table-column>
    		<el-table-column prop="name">
    		</el-table-column>
    	</el-table>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				dataForm: { 
    					a: 'xxx',
    					b: 'xxx'
    				}
    			}
    		},
    		computed: { 
    			//因为数据用到了dataform中的数据，所以写在了computed中
    			tableData() { 
    				return [{ 
    						date: "数据主题",
    						name: this.dataForm.a
    					},
    					{ 
    						date: "数据来源",
    						name: this.dataForm.b
    					}
    				]
    			},
    		},
    		methods: { 
    			// 自定义列背景色
    			rowStyle({ 
    				row,
    				rowIndex,
    			}) { 
    				if (rowIndex == 0) { 
    					return "background:#f3f6fc;";
    				} else { 
    					return "background:#ffffff;";
    				}
    			}
    		},
    	}
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，454人围观）

还没有评论，来说两句吧...

相关阅读

相关 elementUI-el-table组件使用总结

一、背景 vue2项目中用到el-table这个组件，但基础的功能不够用，所以需要自定义二、表头自定义比如要让表头展现出下面的形式： ![f09934df5

我不是女神ヾ/ 2024年03月23日 15:54/ 0 赞/ 72 阅读

相关如何基于elementui table实现自己的表格组件

前两篇博客已经讲过如何实现，这里我把功能抽成了一个组件，这样如果有多个需要该功能的表格就可以复用了：首先先是组件的代码： <template> <

水深无声/ 2023年06月11日 06:23/ 0 赞/ 23 阅读

相关 ElementUI table表格列动态渲染

一、概述一般写table时，列都是固定。现有业务需求，列是不固定的。根据api返回的数据，进行动态渲染。官方table示例，链接如下： [https://elem

向右看齐/ 2023年01月17日 08:25/ 0 赞/ 484 阅读

相关基于elementui table组件竖向表格

<template> <el-table :data="tableData" style="width: 100%" :s

清疚/ 2023年01月17日 04:56/ 0 赞/ 455 阅读

相关 vue ElementUI table 组件动态表头

页面展示从接口获取的数据到 table 里面，包括表头和表数据 html代码 <el-table :data="compareList" border size=

旧城等待，/ 2023年01月05日 12:53/ 0 赞/ 236 阅读

相关 VUE-Element组件（七）Table表格

[Element - The world's most popular Vue UI framework][Element - The world_s most popular

谁践踏了优雅/ 2022年12月15日 03:39/ 0 赞/ 381 阅读

相关 ElementUI 实现Table组件实现拖拽效果

一、概述 Sortable.js Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQu

傷城~/ 2022年10月14日 05:54/ 0 赞/ 348 阅读

相关基于elementUI库中table组件二次封装

> 组件链接： [github.com/ZYuMing/el-…][github.com_ZYuMing_el-] 解决问题在支持el-table组件已有功能的基础上

迷南。/ 2022年10月01日 07:53/ 0 赞/ 282 阅读

相关 elementUI Table组件实现拖拽效果

背景使用`Element UI Table`\+`Vue`实现表格的拖拽。在`GitHub`上搜索了下发现[Sortable][]这款插件挺不错的，`Star14000

矫情吗；*/ 2022年04月22日 06:50/ 0 赞/ 581 阅读

相关 elementui提取table表格封装组件，elementui提取table表格单列展示按钮的展示效果

后台管理系统中用到了非常多的表格，一般为了方便都会讲表格进行提取，形成公共组件。提取表格时会遇到返回的json数据中要对单个字段进行处理，如时间戳转换，状态转换等以

川长思鸟来/ 2021年12月16日 12:07/ 0 赞/ 1049 阅读