element table实现点击数据展开 再点关闭效果

1、后台数据格式，（重点）让后台组织一个count

            "batch_no": "2022011811401090",#批次号，调用下个接口需要
            "visit_assignee_uname": "刘勇",#投资顾问
            "created_at": "2022-01-18 11:40:10",#打卡时间
            "position_name": "贵州省毕节市黔西市步行街7号",#打卡位置
            "customer_name": "张炜",#客户姓名
            "phone_number": "13932560006",#客户电话
            "estate_address": "唐山建设路与南新道交叉口",#物业地址
            "status_name": "约考察",#客户状态
            "sourced_at": "2019-04-26 10:22:54",#来源时间
            "channel_name": "自建",#来源渠道
            "call_manager_uname": "侯飞",#回访主管
            "count": 2#重复条数，就是放到括号中的

2、vue template 部分（if判断有数据就显示后面的（2）），点击传参要把需要请求的id、这条数据 、下标  三个参数传下来 用以判断

<el-table-column prop="phone_number" label="客户电话" min-width="150" :show-overflow-tooltip="true">
   <template slot-scope="scope">                           
     {{ scope.row.phone_number}}
     <span v-if="scope.row.count>0" @click="detailData(scope.row.batch_no,scope.row, scope.$index)" style="color:#0878EF;cursor:pointer">({{scope.row.count}})</span>
   </template>
</el-table-column>

3、script 部分

detailData(id, row, index) {
            console.log(row);
            if(row.showSame){       //如果这条数据有几条额外的展开数据就删除 这条数据对应下标的几条（sameLength）
				this.tableData.splice(index+1 , this.tableData[index].sameLength);     
				this.tableData[index].showSame = false  //然后就标记为  false  没有展开数据
			}else{         
				getBatchListByBatchNo({
					batch_no:id
				}).then(res=>{
                    // console.log();
					let sameData = res.data;
					sameData.forEach((item1)=>{    //给每一条展开请求的数据标记tag方便element动态赋予样式
						item1.tag = 1;       //填一个tag 用以给添加单独样式
						this.tableData.splice(index+1,0,item1);  //splice第三个参数添加，从点击的下标+1位置添加请求回的数据
					})
					this.tableData[index].sameLength = sameData.length  //第一次进来添加上了数据则给他标记一个sameLength和他对应的length长度
				})                                                      //以便第二次点击时候删除对应下标长度
				this.tableData[index].showSame = true    //然后就标记为  true  表示有展开数据 以便第二次点击时候删除对应下标的内容
			}       
            
        },

4、蓝条样式的添加，用第三步给添加的item1.tag

①、在el-table  标签上添加 :row-class-name="tableRowClassName"

<el-table :data="tableData" class="jdefalue-table"  :row-class-name="tableRowClassName"  max-height="500">

②、在script中写   return出来的在style中写对应样式

tableRowClassName({row}) {
	// console.log(row);
	if (row.tag == 1) {
		return 'warning-row';
	}			
},

③、style

.el-table .warning-row {
    background: #C9EAFD;
  }