jqGrid Vue版本是一款基于Vue.js框架開發的表格插件,可以方便地實現表格的展示和數據的篩選、排序和分頁等功能。
?下面是一個簡單的示例展示如何在Vue項目中使用jqGrid Vue:
// 引入jqGrid Vue組件
import jqGrid from 'jqgrid-vue';
// 定義表格數據
const data = [
{ id: 1, name: 'Tom', age: 21 },
{ id: 2, name: 'Jerry', age: 18 },
{ id: 3, name: 'Mickey', age: 25 },
];
// 注冊組件
export default {
components: { jqGrid },
data() {
return {
// 表格配置項
options: {
// 表頭
colNames: ['ID', '名字', '年齡'],
// 表頭對應的字段名
colModel: [
{ name: 'id', index: 'id', width: 60 },
{ name: 'name', index: 'name', width: 100 },
{ name: 'age', index: 'age', width: 80, sortable: false },
],
// 數據
data,
// 分頁配置項
pager: '#jqGridPager',
rowNum: 10,
rowList: [10, 20, 30],
},
};
},
};
?以上代碼中,首先引入了jqGrid Vue組件,然后定義了表格數據和options配置項。其中colNames和colModel是必需的配置項,分別指定了表頭和表頭對應的字段名,data指定了表格展示的數據。pager、rowNum和rowList是分頁配置項,分別指定了分頁控件的id、每頁展示的行數和可供用戶選擇切換每頁展示行數的下拉框內容。
上一篇css3文字和圖片
下一篇css+選定奇數元素