这里折叠后少了合同名称,风险进展,预判无法达成金额

通过按钮的状态,来控制某一列的显示与隐藏,

  <el-tablev-loading="loading"v-if="tableStatus"border:data="tableData":key="tableKey"id="table"class="table-self is-grey":options="modalShow ? [] : ['config']":header-cell-style="{ background: '#2B72D8', color: '#FFFFFF', textAlign: 'center' }"style="width: 100%"element-loading-text="加载中..."element-loading-spinner="el-icon-loading"fit:height="modalShow ? 360 : `calc(100vh - 250px)`":row-class-name="tableRowClassName"show-summary:summary-method="getSummaries"ref="table"@header-dragend="handleDragend"><el-table-columnv-for="(item, index) in columnList":key="item.prop"show-overflow-tooltip:prop="item.prop":type="item.type":min-width="item.minwidth":width="item.width":fixed="item.fixed":align="item.align":label="item.label"header-align="center"><!-- <template slot="header"><div v-if="item.align === 'left'"class="text-align-center">{{'1111'}}</div></template> --><template slot="header">{{item.label}}<i v-if="item.onCollapse":class="`collapse-icon el-icon-arrow-${item.collapse ? 'right' : 'left'}`" @click="() => item.onCollapse()"/></template><template v-if="item.children"><el-table-columnv-for="ite in item.children":key="ite.prop"show-overflow-tooltip:prop="ite.prop":type="ite.type":min-width="ite.minwidth":width="ite.width":fixed="ite.fixed":align="ite.align":label="ite.label"header-align="center"><template slot="header">  //核心处理逻辑{{ite.label}}<i v-if="ite.onCollapse":class="`collapse-icon el-icon-arrow-${ite.collapse ? 'right' : 'left'}`" @click="() => ite.onCollapse()"/></template><template slot-scope="{ row }"><div class="text-overflow">{{ row[ite.prop] }}</div></template></el-table-column></template><template slot-scope="{ row, $index }"><div v-if="item.prop === 'forecastedReturn'" class="text-overflow">{{ row.forecastedPerformanceMoneySum }}</div><div v-if="item.prop === 'index'" class="text-overflow">{{ $index + 1 }}</div><div v-else class="text-overflow">{{ row[item.prop] }}</div></template></el-table-column></el-table>

//data const columnList = [{ type: 'index', label: '序号', prop: 'index', width: 50, align: 'center', fixed: true },{ label: '地区', prop: 'c5Region', width: 60, align: 'center', fixed: true },{ label: '项目名称', prop: 'projectName',minwidth: 120, align: 'left', fixed: true,collapse: false,onCollapse: () => this.onCollapse('projectName', ['contractName'])  //自定义处理事件},{ label: '合同名称', prop: 'contractName', minwidth: 80, align: 'center', fixed: true, show: true },{ label: '内切/外拓', prop: 'businessTypeName', minwidth: 80, align: 'center', fixed: true },{ label: '截止上月底应收款', prop: 'paybackMoney', minwidth: 80, align: 'right', fixed: true },{label: '应收款账龄',minwidth: 110,align: 'center',children: [// { label: '未到期', prop: 'undueMoney', minwidth: 80, align: 'right' },{ label: '1月以内', prop: 'withinOneMonths', minwidth: 80, align: 'right' },{ label: '1至2个月', prop: 'oneToTwoMonths', minwidth: 80, align: 'right' },{ label: '2至6个月', prop: 'twoToSixMonths', minwidth: 80, align: 'right' },{ label: '6个月以上', prop: 'overSixMonths', minwidth: 80, align: 'right' },],},{label: '应收款回款预判',minwidth: 110,align: 'center',children: [{ label: '金额预判', prop: 'forecastedPaybackMoney', minwidth: 110, align: 'right', more: true },{ label: '风险等级',prop: 'riskTypeName',minwidth: 100,align: 'center',            collapse: false,onCollapse: () => this.onCollapse('riskTypeName', ['riskAndProgress', 'unattainableAmount']) },{ label: '风险及进展', prop: 'riskAndProgress', minwidth: 90, align: 'left', show: true },{ label: '预判无法达成金额', prop: 'unattainableAmount', minwidth: 130, align: 'right', show: true },],},];

// methods onCollapse(collapseProp, props) {this.columns = this.columns.map(item => {item.children = item.children?.map(child => {if(props.includes(child.prop)){  // 如果要隐藏的数组包括当前prop 就将show属性取反return { ...child,show: !child.show,collapse: collapseProp === child.prop ? !child.collapse : child.collapse}}return {  // 不包含的直接返回...child,collapse: collapseProp === child.prop ? !child.collapse : child.collapse}})if(props.includes(item.prop)){ //处理第一层return { ...item,show: !item.show,collapse: collapseProp === item.prop ? !item.collapse : item.collapse};}return {...item,          collapse: collapseProp === item.prop ? !item.collapse : item.collapse}})}