BeeGridTable
独特的优点介绍,大多数Vue Table组件不曾提供
- 可自定义表头
- 可复合表头
- 可自定义列
- 可自定义筛选区
- 支持Template写法
- 支持Render函数写法
功能介绍(挑重点)
- 固定
固定表头
固定左侧列
固定右侧列
- 筛选
默认筛选
隐藏筛选行
隐藏列筛选项
自定义筛选回调
自定义筛选UI
- 自定义
自定义表头–模板
自定义表头–render
自定义列–模板
自定义列–render
…
安装
- npm
npm i beegridtable -S
- yarn
yarn add beegridtable
Vue webpack入口main.js文件
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import BeeGridTable from "beegridtable";
import BeeLocale from "beegridtable/src/locale";
Vue.use(BeeGridTable, {
BeeLocale,
capture: true,
});
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
简单示例
//Vue Template
<BeeGridTable
:columns="columns"
:data="data"
></BeeGridTable>
// JS
data() {
return {
columns: [
{
title: "Name",
key: "name",
align: "center",
resizable: true,
},
{
title: "Age",
key: "age",
align: "center",
sortable: true,
},
{
title: "Street",
key: "street",
align: "center",
resizable: true,
},
{
title: "Gender",
key: "gender",
align: "center",
},
],
data: [],
};
},