BeeGridTable
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: [],
};
},
今天先开个头，后面继续分享厉害的部分。同时可以关注下面公众号，方便查看，喜欢的点个赞哦。
