elementUi 的折叠table 根据条件展示前面的三角符号

//展示的table
<template>
<el-table v-loading="loading" :data="dxList" @selection-change="handleSelectionChange" row-key="id" ref="dataTable">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column type="expand">
				<template slot-scope="props">
					<el-form label-position="left" inline class="demo-table-expand"  v-if="props.row.remark && props.row.remark.trim() !== ''">
						<el-form-item label="备注">
							<span>{{ props.row.remark }}</span>
						</el-form-item>
					</el-form>
				</template>
			</el-table-column>
			<el-table-column label="代系名称" align="center" prop="name" />
		</el-table>
</template>

//js

export default {
	name: "reagentTypeIndex",
	updated() {
	//初始化
		this.hideExpandIconForEmptyRemarks();
	},
	methods: {
		// 隐藏没有备注的行的展开图标
		hideExpandIconForEmptyRemarks() {
			this.$nextTick(() => {
				if (this.dxList && this.dxList.length > 0) {
					const rows = this.$refs.dataTable.$el.querySelectorAll('.el-table__row');
					this.dxList.forEach((item, index) => {
						if (!item.remark || item.remark.trim() === '') {
							// 找到对应行的展开图标并隐藏
							if (rows[index]) {
								const expandIcon = rows[index].querySelector('.el-table__expand-icon');
								if (expandIcon) {
									expandIcon.style.display = 'none';
								}
							}
						}
					});
				}
			});
		},
		/** 查询列表 后端请求的接口 */
		getList() {
			this.loading = true;
			listDaixi(this.queryParams).then(response => {//写你自己的接口方法
				this.dxList = response.rows;
				this.total = response.total;
				this.loading = false;
				//更新
				this.$nextTick(() => {
					this.hideExpandIconForEmptyRemarks();
				});
			});
		},
	}
	}