Vue jqgrid是一個輕量級的grid表格插件，它提供了強大的行編輯、過濾、排序、分頁等功能，可以輕松地展示復雜的數據。在Vue框架中集成jqgrid非常簡單，只需要在Vue組件中引入jqgrid插件，然后在mounted生命周期鉤子函數中初始化grid即可。

import $ from 'jquery'
import 'jqgrid'
export default {
name: 'mygrid',
data () {
return {
data: [],
colNames: ['id', 'name', 'age', 'gender'],
colModel: [
{ name: 'id', index: 'id', width: 60, sorttype: 'int' },
{ name: 'name', index: 'name', width: 90 },
{ name: 'age', index: 'age', width: 50, align: 'right', sorttype: 'int' },
{ name: 'gender', index: 'gender', width: 50, align: 'right', sorttype: 'string' }
]
}
},
mounted () {
this.initGrid()
},
methods: {
initGrid () {
$('#mygrid').jqGrid({
data: this.data,
datatype: 'local',
colNames: this.colNames,
colModel: this.colModel,
rowNum: 10,
rowList: [10, 20, 30],
pager: '#mypager',
sortname: 'id',
viewrecords: true,
sortorder: 'desc',
caption: 'My Grid'
})
}
}
}

在上面的代碼中，我們定義了一個mygrid組件，包含了一個data數組、colNames數組和colModel數組。data數組用來存儲表格中的數據，colNames數組用來存儲表頭的列名，colModel數組用來定義列的屬性，包括寬度、排序類型等。

在mounted函數中，我們調用了initGrid方法來初始化grid插件。在initGrid方法中，我們使用jQuery的$函數來選取HTML中的一個div元素，然后調用jqGrid函數來初始化grid。在jqGrid函數中，我們傳入了data、datatype、colNames、colModel等參數來定義grid的樣式和功能。

最后，我們在mygrid組件中使用了一個div元素來作為grid的容器，用另外一個div元素來作為分頁工具欄的容器。這兩個元素的id分別為mygrid和mypager。