能自定义搜索的Vue表格BeeGridTable组件库

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: [],
    };
  },

今天先开个头，后面继续分享厉害的部分。同时可以关注下面公众号，方便查看，喜欢的点个赞哦。