Home

• 一个基于Vuejs2.x的table表格组件
• 拥有丰富的功能和好用的API
  

语法糖篇

$1、列定义语法糖$

 <BeeGridTable
    border
    height="560"
    :showSummary="false"
    fixed="left"
    :data="data"
  >
    <BeeColumn field="code" title="Code"></BeeColumn>
    <BeeColumn field="name" title="Name" resizable></BeeColumn>
    <BeeColumn field="sex" title="Sex" type="number"> </BeeColumn>
  </BeeGridTable>

  
  data() {
    return {
      // columns: [],
      data: [],
      ...
    };
  },
      

• BeeColumn 是一个可以用来定义列信息的组件

$2、列头定义语法糖$

  <BeeGridTable
      border
      height="560"
      :showSummary="false"
      fixed="left"
      :data="data"
    >
      <BeeColumn field="code" title="Code"></BeeColumn>
      <BeeColumn field="name" title="Name" resizable></BeeColumn>

      <BeeColumn field="sex" title="Sex" type="number">
        <template slot-scope="{ row }">
          <i
            style="font-size: x-large"
            class="bee-sys-icon md-man"
            v-if="row.sex === 0"
          ></i>
          <i
            style="font-size: x-large; color: red"
            class="bee-sys-icon md-woman"
            v-else
          ></i>
        </template>
      </BeeColumn>

      <BeeColumnHeader field="sex">
        <template slot-scope="{ column }">
          <Button style="color: red">{{ column.title }}</Button>
        </template>
      </BeeColumnHeader>
    </BeeGridTable>

  
  data() {
    return {
      // columns: [],
      data: [],
      ...
    };
  },
      

• BeeColumn 默认slot，传入参数有当前渲染行 row ，可以自定义数据展示，此处的性别渲染成了 icon 图标
• BeeColumnHeader 可以自定义表头，比如此处的sex字段的表头渲染成了Button按钮

$3、列筛选区定义语法糖$

  <BeeGridTable
      border
      height="560"
      :showSummary="false"
      fixed="left"
      :data="data"
    >
      <BeeColumn field="code" title="Code"></BeeColumn>
      <BeeColumn field="name" title="Name" resizable></BeeColumn>

      <BeeColumn field="sex" title="Sex" type="number">
        <template slot-scope="{ row }">
          <i
            style="font-size: x-large"
            class="bee-sys-icon md-man"
            v-if="row.sex === 0"
          ></i>
          <i
            style="font-size: x-large; color: red"
            class="bee-sys-icon md-woman"
            v-else
          ></i>
        </template>
      </BeeColumn>

      <BeeColumn field="state" title="State">
        <template slot-scope="{ row }">
          <Select v-model="row.state" style="width: 100px">
            <Option
              v-for="item in stateList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </template>
      </BeeColumn>

      <BeeColumn field="group" title="Group">
        <template slot-scope="{ row }">
          <Select v-model="row.groupCode" style="width: 100px">
            <Option
              v-for="item in groupList"
              :value="item.code"
              :key="item.name"
              >{{ item.name }}</Option
            >
          </Select>
        </template>
      </BeeColumn>
      <BeeColumnHeader field="sex">
        <template slot-scope="{ column }">
          <Button style="color: red">{{ column.title }}</Button>
        </template>
      </BeeColumnHeader>
      <BeeColumnFilter
        field="sex"
        :selectedSexCode="selectedSexCode"
        :filterValue="1"
        type="number"
      >
        <template slot-scope="{ column, doSortAndFilter }">
          <RadioGroup
            v-model="column.selectedSexCode"
            @on-change="sexSelected(column, doSortAndFilter)"
          >
            <Radio label="-1">
              <i class="bee-sys-icon md-people"></i>
              <span>All</span>
            </Radio>
            <Radio label="0">
              <i class="bee-sys-icon md-man"></i>
              <span>Boy</span>
            </Radio>
            <Radio label="1">
              <i style="color: red" class="bee-sys-icon md-woman"></i>
              <span>Girl</span>
            </Radio>
          </RadioGroup>
        </template>
      </BeeColumnFilter>
    </BeeGridTable>

 data() {
    return {
      columns: [
        ...
        { title: "Sex", slot: "sex", key: "sex", width: 150, resizable: true },
        ...
        {
          title: "Group",
          slot: "group",
          key: "groupName",
          resizable: true,
        },
        {
          title: "State",
          slot: "state",
          key: "state",
          width: 200,
        },
        {
          title: "Operation",
          slot: "op",   //custom column slot
          headSlot: "hop", //custom column header slot
          key: "op",
          width: 150,
        },
      ],
      data: [],
      groupList: [
        {
          code: 1,
          name: "First"
        },
        {
          code: 2,
          name: "Second"
        },
        {
          code: 3,
          name: "Third"
        }
      ],
      stateList: [
        {
          value: 0,
          label: "Prepare"
        },
        {
          value: 1,
          label: "Start"
        },
        {
          value: 2,
          label: "Burst"
        },
        {
          value: 3,
          label: "End"
        }
      ],
      ...
    };
  },

• BeeColumnFilter 自定义表格的某一列的筛选区的内容，其默认slot会传入参数 column，doSortAndFilter，分别为当前列定义和控制筛选触发的回调函数。

<template slot-scope="{ column, doSortAndFilter }">

总结

从上述可以看出，BeeGridTable的Api设计相当为用户着想了，整个表格的写法和
elmentui的table差不多，而且功能确十分强大。