How to use TreeGrid extension with Vue component?

Description

Hello. I'm using bootstrap-table as a Vue component and it's working great. I'm trying to use the treeview extension and having issues.

This is what I have:

<bootstrap-table
      ref="table"
      :columns="columns"
      :data="data"
      :options="options"
      @on-post-body="initTreeView">

initTreeView: function() {
  let table = this.$refs.table;
  let columns = table.columns;
  if (columns) {
    table.treegrid({
      treeColumn: 1,
      onChange: function() {
        table.resetView;
      }
    })
  }
}

The error I'm getting is: Error in v-on handler: "TypeError: table.treegrid is not a function"

I'm initializing bootstrap table using a custom table.js:

import 'bootstrap-table/dist/bootstrap-table.min.css'
import 'jquery-treegrid/css/jquery.treegrid.css'

import './jquery.js'
import Vue from 'vue'
import 'bootstrap'
import 'jquery-treegrid/js/jquery.treegrid.min.js'
import 'bootstrap-table/dist/bootstrap-table.js'
import 'bootstrap-table/dist/extensions/treegrid/bootstrap-table-treegrid.min.js'
import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm.js'

Vue.component('BootstrapTable', BootstrapTable);

Any ideas how I can get this working?

Example(s)

No response

I changed my init method to:

initTreeView: function() {
  this.$refs.table.$table.treegrid({
    treeColumn: 0
  })
}

This seems a little odd to me. The code is grabbing the Vue reference ('table') and then calling the jQuery ('$table') within it to specify the treeColumn.

It seems to be working. But I'm wondering if this is the correct way to do this?

@stevespringett Use window.$(this.$refs.table.$el).treegrid instead.

<template>
  <div>
    <BootstrapTable
      ref="table"
      :columns="columns"
      :data="data"
      :options="options"
      @on-post-body="onPostBody"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      columns: [
        {
          field: 'ck',
          checkbox: true
        },
        {
          field: 'name',
          title: '名称'
        },
        {
          field: 'status',
          title: '状态',
          sortable: true,
          align: 'center',
          formatter: (value) => {
            if (value === 1) {
              return '<span class="label label-success">正常</span>'
            }
            return '<span class="label label-default">锁定</span>'
          }
        },
        {
          field: 'permissionValue',
          title: '权限值'
        }
      ],
      data: {
        total: 5,
        rows: [
          {
            "id": 1,
            "pid": 0,
            "status": 1,
            "name": "系统管理",
            "permissionValue": "open:system:get"
          },
          {
            "id": 2,
            "pid": 0,
            "status": 1,
            "name": "字典管理",
            "permissionValue": "open:dict:get"
          },
          {
            "id": 20,
            "pid": 1,
            "status": 1,
            "name": "新增系统",
            "permissionValue": "open:system:add"
          },
          {
            "id": 21,
            "pid": 1,
            "status": 1,
            "name": "编辑系统",
            "permissionValue": "open:system:edit"
          },
          {
            "id": 22,
            "pid": 1,
            "status": 1,
            "name": "删除系统",
            "permissionValue": "open:system:delete"
          },
          {
            "id": 33,
            "pid": 2,
            "status": 1,
            "name": "系统环境",
            "permissionValue": "open:env:get"
          },
          {
            "id": 333,
            "pid": 33,
            "status": 1,
            "name": "新增环境",
            "permissionValue": "open:env:add"
          },
          {
            "id": 3333,
            "pid": 33,
            "status": 1,
            "name": "编辑环境",
            "permissionValue": "open:env:edit"
          },
          {
            "id": 233332,
            "pid": 33,
            "status": 0,
            "name": "删除环境",
            "permissionValue": "open:env:delete"
          }
      ]
      },
      options: {
        idField: 'id',
        showColumns: true,
        treeShowField: 'name',
        parentIdField: 'pid'
      }
    }
  },
  methods: {
    onPostBody () {
      var columns = this.$refs.table.getOptions().columns

      if (columns && columns[0][1].visible) {
        window.$(this.$refs.table.$el).treegrid({
          treeColumn: 1,
          onChange: () => {
            this.$refs.table.resetView()
          }
        })
      }
    }
  }
}
</script>