实现自定义通用表格组件

最新推荐文章于 2024-05-06 18:04:38 发布

SanOrintea

最新推荐文章于 2024-05-06 18:04:38 发布

阅读量270

点赞数

分类专栏： vue 文章标签： css css3 html

本文链接：https://blog.csdn.net/SanOrintea/article/details/121773520

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

本文介绍了一种优化Vue组件的方法，通过在数据构造时将样式名作为属性，减少V-if判断，从而简化组件代码。例如，将状态信息转化为icon样式属性，如`icon-shibai`、`icon-wancheng`等，并结合CSS定义不同状态的颜色和图标，实现动态显示。这种方法提高了代码的简洁性和可维护性。

摘要由CSDN通过智能技术生成

今天写了个表格组件，一开始各种V-if判断，是文字还是icon之类的。然后想到一个好办法，组件代码瞬间减少了一堆。
传入数据的时候，是数组对象模式。关键在于构造数据的时候把数据想要的样式名记为属性名。
直接上组件代码，app上的，用view代替div，看思路：

	<view class="font-size-12">
		<view class="title">
			<view v-for="(item, key) in title" :class="key">{{item}}</view>
		</view>
		<view class="table-row" v-for="item in data">
			<view v-for="(cell, key) in item" :class="key">{{cell}}</view>
		</view>
	</view>

比如以下数据：
{state:0, startTime:‘2021-11-30 12:00:00’, number:‘15kWh’, wasteTime:‘12:15’},
{state:1, startTime:‘2021-11-30 12:00:00’, number:‘15kWh’, wasteTime:‘00:30’},
{state:2, startTime:‘2021-11-30 12:00:00’, number:’–’, wasteTime:’–’},
{state:1, startTime:‘2021-11-30 12:00:00’, number:‘15kWh’, wasteTime:‘02:13’},
转化成
{icon-shibai:‘’, startTime:‘2021-11-30 12:00:00’, number:‘15kWh’, wasteTime:‘12:15’},
{icon-wancheng:‘’, startTime:‘2021-11-30 12:00:00’, number:‘15kWh’, wasteTime:‘00:30’},
{icon-jinhangzhong:‘’, startTime:‘2021-11-30 12:00:00’, number:’–’, wasteTime:’–’},
{icon-jinhangzhong:‘’, startTime:‘2021-11-30 12:00:00’, number:‘15kWh’, wasteTime:‘02:13’},
这样直接做表格的时候，把属性名存为动态class，就行了，再把有些特殊的写进对应样式，比如iconfont的样式，直接写到icon-xxxx中：举例：

	.icon-shibai{
		color: #ff513a !important;
	}
	.icon-wancheng{
		color: #00F6FF !important;
	}
	.icon-jinhangzhong{
		color: #1D97FF !important;
	}
	.icon-shibai,
	.icon-wancheng,
	.icon-jinhangzhong{
		width: 32rpx;
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
	}