VUE3父子组件间传参

最新推荐文章于 2024-09-06 18:11:50 发布

IM_GOOD

最新推荐文章于 2024-09-06 18:11:50 发布

阅读量293

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/im_good/article/details/129755918

版权

在封装elementPlus的table组件时，为满足特定条件下行高亮的需求，通过扩展row-class-name属性并定义一个方法highlightCheck来实现。通过传入父组件的方法，判断行数据是否满足条件，从而动态应用高亮样式。

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

在用公共组件，总会遇到需求不足，自己要新加功能的时候，比如在封装elementPlus的table组件，就遇到了，当时是一个列表当列表行满足某一条件的时候，那一行需要高亮显示，如果只是el-table，这个问题很好解决，但是我们是对el-table进行了二次封装，但是并没有考虑这个需求，所以现在只能对公共组件进行改造了，先看最后效果：

实现过程：

我们封装的子组件：myTable

<el-table
				ref="tableRef"
				:data="tableData"
				:border="border"
				:stripe="stripe"
				:row-key="getRowKeys"
				@selection-change="selectionChange"
				@row-click="rowClick"
				:highlight-current-row="multiple"
				:row-class-name="highlightCheck"
				:tree-props="{ children: childrenName }"
			>

在el-table原有的row-class-name的属性上重新赋一个方法；

在js代码块进行声明

interface TableOptions {
	highlightCheck?: ({ row }: any) => string; //高亮行方法 ==> 非必传（默认为 )
}

在css写好高亮行对应的样式

.danger-row {
	--el-table-tr-bg-color: var(--el-color-danger-light-9);
}

父组件中，把方法传过去：

<my-table
		:stripe="false"
		:highlight-check="highlightCheck"
	>

ps：斑马纹对这个样式会有影响，如果有去掉。

声明highlightCheck方法：

const highlightCheck = ({ row }: { row: Contract<RzContractExtend> }) =>
	new Date(row.endDate).getTime() < new Date("2023-03-24").getTime() ? "danger-row" : "";

欧克，完成。