相似elementui的列定義寫法的Table--BeeGridTable

Home

• 一個基於Vuejs2.x的table表格組件
• 擁有豐富的功能和好用的API

語法糖篇

$\color{MediumTurquoise}{一、列定義語法糖}$

<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 是一個能夠用來定義列信息的組件

$\color{MediumTurquoise}{二、列頭定義語法糖}$

<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按鈕

$\color{MediumTurquoise}{三、列篩選區定義語法糖}$

<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差很少，並且功能確十分強大。