关于element-ui:类似elementui的列定义写法的TableBeeGridTable

Home

• 一个基于 Vuejs2.x 的 table 表格组件
• 领有丰盛的性能和好用的 API

语法糖篇

$\color{MediumTurquoise}{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 是一个能够用来定义列信息的组件

$\color{MediumTurquoise}{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 按钮

$\color{MediumTurquoise}{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 差不多，而且性能确非常弱小。