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差不多，而且性能确非常弱小。