vue下的bootstrap table + jquery treegrid, treegrid无法渲染的问题

在mian.js导入的包如下：该bootstrap-table-treegrid.js需要去下载，在复制到jquery-treegrid/js/

import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
import 'bootstrap-table/dist/bootstrap-table.min.css'
import 'bootstrap-table/dist/bootstrap-table.min'
import 'bootstrap-table/dist/locale/bootstrap-table-zh-CN.min'
import 'jquery-treegrid/css/jquery.treegrid.css'
import 'jquery-treegrid/js/jquery.treegrid.min'
import 'jquery-treegrid/js/bootstrap-table-treegrid'

package.json如下：

"dependencies": {
    "bootstrap": "^3.3.7",
    "bootstrap-table": "^1.11.1",
    "jquery": "^3.4.1",
    "jquery-treegrid": "^0.3.0"
  }

mounted方法如下：

<template>
  <div>
    <div class="container">
      <table id="treeGrid"></table>
    </div>
  </div>
</template>

<script>

export default {
  name: 'function-config',
  mounted () {
    // this.$http.get(this.dataUrl).then(resp => {
    //   const options = this.$common.parse(resp)
    // treeView.init(this.$jquery, options)
    // })
    // treeGrid.init(this.$jquery, this.$http, this.$common)
    let treeGrid = this.$jquery('#treeGrid')
    this.$http.get('/static/json/system/treeGrid.json').then(resp => {
      const body = this.$common.parse(resp)
      treeGrid.bootstrapTable({
        data: body,
        striped: true,
        sidePagination: 'server',
        idField: 'id',
        columns: [
          { field: 'check',
            checkbox: true,
            formatter: function (value, row, index) {
              if (row.check === true) {
                // 设置选中
                return { checked: true }
              }
            }
          },
          { field: 'name', title: '名称' },
          { field: 'status', title: '状态', sortable: true, align: 'center' },
          { field: 'permissionValue', title: '权限值' }
        ],
        // 在哪一列展开树形
        treeShowField: 'name',
        // 指定父id列
        parentIdField: 'pid',
        // onPostBody  onResetView  onLoadSuccess
        onResetView: function (data) {
          treeGrid.treegrid({
            initialState: 'collapsed',
            // expanderExpandedClass: 'glyphicon glyphicon-minus',
            // expanderCollapsedClass: 'glyphicon glyphicon-plus',
            treeColumn: 1,
            onChange: function () {
              treeGrid.bootstrapTable('resetWidth')
            }
          })
        }
      })
    })
  }
}
</script>

<style scoped>

</style>

json数据：

[
  {
    "id": 1,
    "status": 1,
    "pid":0,
    "name": "用户管理",
    "permissionValue": "open:user:manage"
  },
  {
    "id": 2,
    "pid":0,
    "status": 1,
    "name": "系统管理",
    "permissionValue": "open:system:manage"
  },
  {
    "id": 3,
    "pid": 1,
    "status": 1,
    "name": "新增用户",
    "permissionValue": "open:user:add"
  },
  {
    "id": 4,
    "pid": 1,
    "status": 1,
    "name": "修改用户",
    "permissionValue": "open:user:edit"
  },
  {
    "id": 5,
    "pid": 1,
    "status": 0,
    "name": "删除用户",
    "permissionValue": "open:user:del"
  },
  {
    "id": 6,
    "pid": 2,
    "status": 1,
    "name": "系统配置管理",
    "permissionValue": "open:systemconfig:manage"
  },
  {
    "id": 7,
    "pid": 6,
    "status": 1,
    "name": "新增配置",
    "permissionValue": "open:systemconfig:add"
  },
  {
    "id": 8,
    "pid": 6,
    "status": 1,
    "name": "修改配置",
    "permissionValue": "open:systemconfig:edit"
  },
  {
    "id": 9,
    "pid": 6,
    "status": 0,
    "name": "删除配置",
    "permissionValue": "open:systemconfig:del"
  },
  {
    "id": 10,
    "pid": 2,
    "status": 1,
    "name": "系统日志管理",
    "permissionValue": "open:log:manage"
  },
  {
    "id": 11,
    "pid": 10,
    "status": 1,
    "name": "新增日志",
    "permissionValue": "open:log:add"
  },
  {
    "id": 12,
    "pid": 10,
    "status": 1,
    "name": "修改日志",
    "permissionValue": "open:log:edit"
  },
  {
    "id": 13,
    "pid": 10,
    "status": 0,
    "name": "删除日志",
    "permissionValue": "open:log:del"
  }
]

看下图，树型表格始终无法成功渲染，只有bootstrap table的效果，很是郁闷。

结果debug查看，对比在html下的例子，发现了bootstrap-table.min.js版本低了，要v1.12.1，于是替换了bootstrap-table.min.js的内容，重新执行npm run dev。结果如下：

主要js文件地址下载：

<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>

<script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>