ant design vue中嵌套表格以及表格内部编辑的用法

实现效果：

因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件，无法实现根据展开节点获取其内部数据的需求，因此直接使用a-table组件

表格外层可以翻页，查询携带页码参数

<a-table
      size="default"
      rowKey="dict_id" //根据自己数据内部关键针设定
      ref="table"
      @expandedRowsChange="expandedRowsChange"
      @expand="expand" // 展开表格节点操作
      @change="change" // 外层表格中排序，翻页，修改页面数量等操作
      :expandedRowKeys="expandedRowKeys" // 操作展开的节点
      :pagination="pagination" // 页码参数
      :columns="columns" // 表头
      :dataSource="loadData" // 数据
    >
      <a-table
        size="default"
        style="margin-bottom:0;"
        rowKey="key"
        slot="expandedRowRender" // 以内层方式展现
        :columns="innerColumns"
        :dataSource="data"
        :pagination="false"
        :loading="innerloading"
        @change="innerhandleChange"
      >
        <template v-for="(col, i) in ['item_text', 'item_value', 'item_checked', 'item_remark', 'item_sort', 'item_status']" :slot="col" slot-scope="text, record">
          <a-input
            :key="col"
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            :placeholder="innerColumns[i].title"
            @change="e => handleChange(e.target.value, record.key, col)"
          />
          <template v-else>{
  { text }}</template>
        </template> // 内部表格可编辑模板
        <template slot="operation" slot-scope="text, record">
          <template v-if="record.editable">
            <span v-if="record.isNew">
              <a @click="saveRow(record)">添加</a>
              <a-divider type="vertical" />
              <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
                <a>删除</a>
              </a-popconfirm>
            </span>
            <span v-else>
              <a @click="saveRow(record)">保存</a>
              <!-- <a-divider type="vertical" />
              <a @click="cancel(record.key)">取消</a> -->