上一篇次要具体介绍了BeeGridTable 的Filter性能，接下来好好盘盘他的Custom Define性能
一、涵盖的自定义性能点有如下
- 1、自定义表格头，有Template、Render2种形式
- 2、自定义列，有Template、Render2种形式
- 3、自定义筛选，有Template形式
二、举例应用
$\color{MediumTurquoise}{2.1 自定义表格头Template写法}$
1.示例
2.上述例子中表头的$\color{Darkorange}{刷新}$和$\color{Darkorange}{新增}$ 按钮这样摆放，基本上可节俭掉业务界面操作区所占用的空间，让界面更简洁、更直观。
$\color{DodgerBlue}{Vue -Template}$
<BeeGridTable border height="560" :showSummary="false" :columns="columns" :data="data" > <template slot-scope="{ column }" slot="hop"> <Button type="primary" size="small" style="margin-right: 5px" >刷新</Button > <Button type="warning" size="small" @click="addPatient(column)" >新增</Button > </template> ... </BeeGridTable> $\color{DodgerBlue}{Vue -Js}$
data() { return { columns: [ ... { title: "操作", slot: "op", headSlot: "hop", key: "op", width: 150, }, ], data: [], ... }; }, - 下面定义了$\color{Darkorange}{template}$代码片段，其槽名称为$\color{Darkorange}{hop}$，对应column列属性$\color{Darkorange}{headSlot}$的$\color{Darkorange}{hop}$
$\color{MediumTurquoise}{2.2 自定义表格头Render写法}$
1、成果同上，区别次要在$\color{Darkorange}{template}$和$\color{Darkorange}{column}$定义上
$\color{DodgerBlue}{Vue -Template}$
<BeeGridTable border height="560" :showSummary="false" :columns="columns" :data="data" > ... </BeeGridTable> $\color{DodgerBlue}{Vue -Js}$
data() { return { columns: [ ... { title: "操作", slot: "op", renderHeader: (h, params) => { return h("div", [ h( "Button", { props: { type: "primary", size: "small", }, style: { marginRight: "5px", }, on: { click: () => { console.log(params); }, }, }, "刷新" ), h( "Button", { props: { type: "warning", size: "small", }, style: { marginRight: "5px", }, on: { click: () => { this.addUser(); }, }, }, "新增" ), ]); }, key: "op", width: 150, }, ], data: [], ... }; },2、相较之下，render写法真是不得不让人吐槽，一个简略的性能硬是写的像拉面一样长。集体认为在惯例业务渲染需要下用$\color{Darkorange}{template}$挺好，如果呈现须要用js管制渲染的时候，思考用$\color{Darkorange}{render}$吧！
$\color{MediumTurquoise}{2.3 自定义列Template写法}$
1、示例
2、上述例子中的性别、分组、察看状态、以及最初一列都是自定义列。从成果上看，有$\color{Darkorange}{Icon}$、$\color{Darkorange}{Select}$、$\color{Darkorange}{Button}$组件。
$\color{DodgerBlue}{Vue -Template}$
<BeeGridTable border height="560" :showSummary="false" :columns="columns" :data="data" > <template slot-scope="{ column }" slot="hop"> <Button type="primary" size="small" style="margin-right: 5px" >刷新</Button > <Button type="warning" size="small" @click="addPatient(column)" >新增</Button > </template> <template slot-scope="{ row, index }" slot="op"> <Button type="warning" size="small" style="margin-right: 5px" >编辑</Button > <Button type="error" size="small" @click="handleDelete(row, index)" >删除</Button > </template> <template slot-scope="{ row }" slot="sex"> <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> <template slot-scope="{ row }" slot="state"> <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> <template slot-scope="{ row }" slot="group"> <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> </BeeGridTable>$\color{DodgerBlue}{Vue -Js}$
data() { return { columns: [ ... { title: "性别", slot: "sex", key: "sex", width: 150, resizable: true }, ... { title: "分组", slot: "group", key: "groupName", resizable: true, }, { title: "察看状态", slot: "state", key: "state", width: 200, }, { title: "操作", slot: "op", //自定义列 headSlot: "hop", //自定义列头 key: "op", width: 150, }, ], data: [], ... }; },3、下面定义了$\color{Darkorange}{template}$代码片段，其槽名称为$\color{Darkorange}{sex}$、$\color{Darkorange}{group}$、$\color{Darkorange}{op}$，对应column列属性$\color{Darkorange}{slot}$的$\color{Darkorange}{sex}$、$\color{Darkorange}{group}$、$\color{Darkorange}{op}$。并且BeeGridTable很贴心的给出了以后slot可能会用到的行数据$\color{SkyBlue}{...slot-scope="{ row }"...}$
$\color{MediumTurquoise}{2.4 自定义列Render写法}$
1、成果同上，区别次要在$\color{Darkorange}{template}$和$\color{Darkorange}{column}$定义上
$\color{DodgerBlue}{Vue -Template}$
<BeeGridTable border height="560" :showSummary="false" :columns="columns" :data="data" > ... <template slot-scope="{ column }" slot="hop"> <Button type="primary" size="small" style="margin-right: 5px" >刷新</Button > <Button type="warning" size="small" @click="addPatient(column)" >新增</Button > </template> ... </BeeGridTable>$\color{DodgerBlue}{Vue -Js}$
data() { return { columns: [ ... { title: "操作", //headSlot优先 headSlot: "hop", render: (h, params) => { return h("div", [ h( "Button", { props: { type: "warning", size: "small", }, style: { marginRight: "5px", }, on: { click: () => { console.log("edit"); }, }, }, "编辑" ), h( "Button", { props: { type: "error", size: "small", }, style: { marginRight: "5px", }, on: { click: () => { console.log("delete"); }, }, }, "删除" ), ]); }, key: "op", width: 150, }, ], data: [], ... }; }, 2、同样，相较之下，render写法真是不得不让人吐槽，一个简略的性能硬是写的像拉面一样长。集体认为在惯例业务渲染需要下用$\color{Darkorange}{template}$挺好，如果呈现须要用js管制渲染的时候，思考用$\color{Darkorange}{render}$吧！
$\color{MediumTurquoise}{2.5 自定义筛选Template写法}$
1、例子
2、示例中能够看到，BeeGridTable自身蕴含有$\color{Darkorange}{蕴含}$、$\color{Darkorange}{不蕴含}$、$\color{Darkorange}{以...开始}$、$\color{Darkorange}{完结于}$、$\color{Darkorange}{重置}$5个根本搜寻选项。绝大多数时候，感觉很够用了。然而如果业务上的需要往往很简单，比方简略点的通过$\color{Darkorange}{CheckBox}$或者$\color{Darkorange}{Radio}$抉择过滤、或者通过$\color{Darkorange}{Select}$下拉框进行过滤。这时候，自定义筛选就派上大用场了。正因为思考到这些问题，$\color{OrangeRed}{BeeGridTable也就没有给出自定义筛选的Render性能}$。
3、实现代码如下，具体对于筛选的剖析，能够参考上篇文章
$\color{DodgerBlue}{Vue -Template}$
<BeeGridTable border height="560" :showSummary="false" :columns="columnsCustom" :data="data" > <template slot-scope="{ column }" slot="hop"> <Button type="primary" size="small" style="margin-right: 5px" >刷新</Button > <Button type="warning" size="small" @click="addPatient(column)" >新增</Button > </template> <template slot-scope="{ row, index }" slot="op"> <Button type="warning" size="small" style="margin-right: 5px" >编辑</Button > <Button type="error" size="small" @click="handleDelete(row, index)" >删除</Button > </template> <template slot-scope="{ row }" slot="sex"> <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> <template slot-scope="{ column, doSortAndFilter }" slot="fsex"> <RadioGroup v-model="column.selectedSexCode" @on-change="sexSelected(column, doSortAndFilter)" > <Radio label="-1"> <i class="bee-sys-icon md-people"></i> <span>所有</span> </Radio> <Radio label="0"> <i class="bee-sys-icon md-man"></i> <span>男</span> </Radio> <Radio label="1"> <i style="color: red" class="bee-sys-icon md-woman"></i> <span>女</span> </Radio> </RadioGroup> </template> <template slot-scope="{ row }" slot="state"> <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> <template slot-scope="{ row }" slot="group"> <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> <template slot-scope="{ column, doSortAndFilter }" slot="hgroup"> <Select transfer clearable v-model="column.selectedGroup" @on-change="filterGroupSelectChange(column, doSortAndFilter)" style="width: 100px" > <Option v-for="item in groupList" :value="item.code" :key="item.name" >{{ item.name }}</Option > </Select> </template> </BeeGridTable> $\color{DodgerBlue}{Vue -Js}$
columnsCustom: [ { title: "编号", key: "code", width: 150, resizable: true, }, { title: "姓名", key: "name", width: 150, }, { title: "性别", slot: "sex", key: "sex", width: 100, selectedSexCode: -1, headFilterSlot: "fsex", }, { title: "年龄", key: "age", width: 150, resizable: true }, { title: "分组", slot: "group", headFilterSlot: "hgroup", key: "groupName", selectedGroup: null, filterMethod(column, field, value, row) { if (value === undefined || value === null) { return true; } return value === row.groupCode; }, resizable: true, }, { title: "察看状态", slot: "state", key: "state", width: 200, }, { title: "操作", slot: "op", hideFilter: true, key: "op", width: 150, }, ], ... methods: { sexSelected(column, doSortAndFilter) { column.filterValue = column.selectedSexCode === "-1" ? null : column.selectedSexCode; doSortAndFilter(); }, filterGroupSelectChange(column, doSortAndFilter) { column.filterValue = column.selectedGroup; doSortAndFilter(); }, }, 三、最初
欢送大家留言探讨或者进群探讨，独特学习提高！如果你喜爱本文章请关注下方公众号二维码，会更新更多相干话题哦！