vue ant table 嵌套

  <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange"
        @expand="expand">

       <span slot="serial" slot-scope="text,record,index">
           {{(ipagination.current-1)*ipagination.pageSize+index+1}}
        </span>
        <a-table
          slot="expandedRowRender"
          slot-scope="record, index, indent, expanded"
          :columns="innerColumns"
          :data-source="record.hourseList"
          :pagination="false"
          rowKey="id"
          size="middle"
          class="j-table-force-nowrap"
          bordered
        >
        </a-table>
      </a-table>

只获取一次数据,子表数据是主表数据中的一个数组,可以直接用来设置为子表的数据源
注意点是 slot-scope=“record, index, indent, expanded”

你可能感兴趣的:(vue-js)