table列折行

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

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

  <el-table
      v-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-column
        v-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-column
            v-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
        }
      })
    }