table 嵌套 slot="expandedRowRender"，@expand，expandedRowKeys 展开行

1

1.1 展开行,控制属性 ，expandedRowKeys，当有表格有 嵌套内容时使用，
注意expandedRowKeys放在父table上
1.2 expandedRowKeys 属性存在的话会使得默 点击展开图标不起作用，因继续起作用要配合
expand 事件一起使用

• expandedRowKeys 展开的行控制属性，对应于行的key值及类型
  这个属性放在父table 上。
  例如下例子，父表格的key 属性是 数字类型
  点击 全部展开按钮，对应的嵌套表格全部展开 ；全部折叠按钮，对应的嵌套表格全部折叠

   <a-button type="primary" style="margin-bottom:10px" @click="allcontroltable">
      全部展开
    </a-button>
    <a-button type="primary" style="margin-bottom:10px" @click="alltablecollaps">
      全部折叠
    </a-button>

    <!-- 表格分页组件S -->
    <a-table
      style="font-size:16px;"
      :columns="columns"
      :dataSource="data"
      ref="table"
      :expandedRowKeys="expandedRowKeys"
       @expand="expandicon"
      :pagination="pagination"   
      @change="(pagination)=>handleTableChange(pagination)">>
      <a-table
        slot="expandedRowRender"
        slot-scope="record"
        :columns="innerColumns"
        :dataSource="innerData"
        :pagination="false"
        style="font-size:10px;"
      >      
      </a-table>
    </a-table>
    <!-- 表格分页组件S -->

methods:{
 // 全部折叠
    alltablecollaps () {
      this.expandedRowKeys = []  
    },
    // 全部展开
    allcontroltable () {
      var that = this
      this.expandedRowKeys = [...Array(that.pagination.pageSize).keys()]
    },
// 折叠展开图标点击事件
expandicon (expanded, record) {    
      if (expanded) {
        this.expandedRowKeys.push(record.key)
      } else {
        var expandedRowKeys = this.expandedRowKeys.filter(RowKey => RowKey !== record.key)
        this.expandedRowKeys = expandedRowKeys
      }
    },
},
data(){
    retrun {
          expandedRowKeys :[],// 若expandedRowKeys=[1,2,3]表示展开的行是第1,2,3行,她主要受制于，key属性，行的keys 值在数组中则展开对应key值的行
          columns: [
        {
          title: '订单编号',
          dataIndex: 'ddbh',
          align: 'center'
        },
        {
          title: '班次',
          dataIndex: 'bc',
          align: 'center'
        },
        {
          title: '计划开工时间',
          dataIndex: 'kssj',
          align: 'center'
        },
        {
          title: '计划完工时间',
          dataIndex: 'jssj',
          align: 'center'
        },
        {
          title: '实际开工时间',
          dataIndex: 'sjkssj',
          align: 'center'
        },
        {
          title: '实际完工时间',
          dataIndex: 'sjjssj',
          align: 'center'
        },
        {
          title: '计划完成量',
          dataIndex: 'jhwcl',
          align: 'center'
        },
        {
          title: '实际完成量',
          dataIndex: 'sjwcl',
          align: 'center'
        },
        {
          title: '日计划状态',
          dataIndex: 'rjhzt',
          align: 'center'
        },
        {
          title: '完成进度',
          dataIndex: 'progress',
          align: 'center',
          key: 'progress',
          scopedSlots: { customRender: 'progress' },
          width: 150
        }
      ],
      innerColumns: [
        {
          title: '订单编号',
          dataIndex: 'ddbh',
          align: 'center'
        },
        {
          title: '班次',
          dataIndex: 'bc',
          align: 'center'
        },
        {
          title: '计划开工时间',
          dataIndex: 'kssj',
          align: 'center'
        },
        {
          title: '计划完工时间',
          dataIndex: 'jssj',
          align: 'center'
        },
        {
          title: '实际开工时间',
          dataIndex: 'sjkssj',
          align: 'center'
        },
        {
          title: '实际完工时间',
          dataIndex: 'sjjssj',
          align: 'center'
        },
        {
          title: '计划完成量',
          dataIndex: 'jhwcl',
          align: 'center'
        },
        {
          title: '实际完成量',
          dataIndex: 'sjwcl',
          align: 'center'
        },
        {
          title: '日计划状态',
          dataIndex: 'rjhzt',
          align: 'center'
        },
        {
          title: '完成进度',
          dataIndex: 'progress',
          align: 'center',
          key: 'progress',
          scopedSlots: { customRender: 'progress' },
          width: 150
        }
      ],
      data: [],
    }
},
 mounted () {
    for (let i = 1; i <= 20; i++) {
      this.data.push({
        key: i,
        ddbh: i,
        bc: i,
        jhwcl: 100,
        sjwcl: 80,
        rjhzt: '月计划',
        kssj: '2019-03-01',
        jssj: '2019-03-02',
        sjkssj: '2019-03-01',
        sjjssj: '2019-03-02',
        progress: 20
      })
      this.innerData.push({
        key: i,
        ddbh: i,
        bc: i,
        jhwcl: 100,
        sjwcl: 80,
        rjhzt: '日计划',
        kssj: '2019-03-01',
        jssj: '2019-03-02',
        sjkssj: '2019-03-01',
        sjjssj: '2019-03-02',
        progress: 20
      })
    }
  }

1.3 子表格 属性 :dataSource="innerData"
本例子说明。
innerData 可在data中任意起名 这里这么写适用于点击1行让其打开子表格，另一行的子表格折叠，整个页面中只显示一个行的子表格。

2

在实际需求中要求打开一父行的子表格，另一父行子表格不做处理，真个页面中能够根据实际需求打开多个子表格 属性 :dataSource="record.childpage" record 是来自父行作用域的。
如下

  <a-table
        style="font-size:16px;"
        :columns="columns"
        :dataSource="data"
        ref="table"
        :expandedRowKeys="expandedRowKeys"
        @expand="expandicon"
        :pagination="pagination"
        @change="(pagination)=>handleTableChange(pagination)">
        <span slot="progress" slot-scope="progress">
          <a-progress :percent="progress" />
        </span>
        <a-table
          slot="expandedRowRender"
          slot-scope="record"
          :columns="innerColumns"
          :dataSource="record.childrendata?record.childrendata:[]"
          :pagination="record.childpagedata"
          style="font-size:10px;"
          class="tablechild"
          @change="childpagechange(record.childpagedata,record.monthplan)">
          <span
            slot="progress"
            slot-scope="progress">
            <a-progress :percent="progress" />
          </span>
        </a-table>
      </a-table>

2.2 本实际业务中要求，子表格数据不跟父表格数据一起返回，且每次点开折叠图标，重新请求接子表格接口。这个时候，用到 expand事件点击展开图标时触发
expand事件 会返回 两个参数，第一个参数，事当前折叠状态 展开还是折叠，用true,false 表示，第二个参数record，是来自点击的行返回的行数据对象。
注意@expand 放在父table上
由于在本实际中，数据是点开折叠图标在请求接口，所以，而子表格的数据用的是来自行返回的数据。 因此需要用到 vue set 来动态的给 expand事件 返回的 第二个参数 record ，动态增加 childpagedata属性

//  record 给一个对象动态添加属性
// childpagedata 为请求接口返回的子表格数据数组
this.$set(record,' childpagedata',childpagedata )