上一篇次要具体介绍了 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();},
},
三、最初
欢送大家留言探讨或者进群探讨,独特学习提高!如果你喜爱本文章请关注下方公众号二维码,会更新更多相干话题哦!