vue|Element的el-table条件遍历问题：只过滤了数据，没有过滤相应数据所在行，导致空行现象

1. 产生原因

由于el-table中是el-table-column=>template=>span这个逐级模式，优先遍历完所有column行，然后再在span的中进行条件过滤，这就导致了“空行”现象的产生。

2. 解决方案

第一次尝试的方式把template放column行外，控制遍历次数，但报错了，因为template需要依赖行获取是数据，把template放在外面直接导致了scope.row访问不到数据,从而读取parentId值报错。
最终解决方案是基于css的display:none属性的特性解决的，直接隐藏空行。

         <el-table :data="sonCourse" :cell-class-name="tableRowClassName"  tooltip-effect="dark" stripe border>
            <el-table-column :label="oneIndexName">
             	<template #default="scope">
             		<span v-if="scope.row.parentId==selectedOneId">{{scope.row.name}}</span>
                </template>
           	</el-table-column>
         <el-table-column label="操作">
         ...

在el-table中加了个 cell-class-name属性，意为：为每一行设置class属性，通过设置该行的class属性为dipaly:none来隐藏行。cell-class-name绑定了一个函数tableRowClassName,该函数即通过条件筛选过滤，满足条件的就将该行的class设置为设置了隐藏属性的class。

methods：{
	  ...
		tableRowClassName({row,rowIndex}){
        	if(row.parentId!=this.selectedOneId){
                 return 'warning-row';
             }
                return '';
       },
       ...
}

相应的class的css样式设置如下:

<style>
		.warning-row{
            display: none;
    	}
<style>

修改后成功解决:

3.后言

该文解决方式引用了一下链接的回答
https://blog.csdn.net/Susu0529/article/details/117364620?spm=1001.2014.3001.5501
https://www.imooc.com/wenda/detail/513985