In the previousMainly introduced in detailBeeGridTable 的FilterFunction, then a good plate plate hisCustom Definefunction
First, the custom function points covered are as follows
- 1. Customize the table header, including Template and Render2 ways
- 2, Customize the column, there are Template, Render2 ways
- 3, Custom filter, there is a Template mode
Two, the use of examples
$\color{mediumTurquoise}{2.1 custom table header Template}$
Example 1.
2. The $\color{Darkorange}{refresh}$and $\color{Darkorange}{add}$buttons in the header of the above example can basically save the space taken up by the operation area of the business interface and make the interface simpler and more intuitive.
$\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" > refresh </Button > <Button type=" small" @click="addPatient(column)" > new </Button > </template>... </BeeGridTable>$\color{DodgerBlue}{Vue -Js}$
Data () {return {columns: [... {title: "operation", slot: "op", headSlot: "hop", the key: "op", width: 150},], data: [],... }; },- $\color{Darkorange}{template}$snippet with slot name $\color{Darkorange}{hop}$, $\color{Darkorange}{headSlot}$$\color{Darkorange}{hop}$corresponding column property $\color{Darkorange}{headSlot}$
$\color{MediumTurquoise}{2.2 custom table header Render}$
$\color{Darkorange}{template}$and $\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: "operation ", slot: "op", renderHeader: (h, params) => { return h("div", [ h( "Button", { props: { type: "primary", size: "small", }, style: { marginRight: "5 px",}, on: {click: () = > {the console. The log (params);},},}, "refresh"), h (" Button ", {props: {type: "warning", size: "Small",}, style: {marginRight: "5 px",}, on: {click: () = > {enclosing addUser ();},},}, "new"),]);}, the key: "op", width: 150, }, ], data: [], ... }; },In contrast, render writing is really have to let a person ridicule, a simple function is simply written as long as ramen noodles. $\color{Darkorange}{Template}$is good for normal business rendering. If you need to use JS to control rendering, consider using $\color{Darkorange}{render}$!
$\color{mediumTurquoise}{2.3 custom column Template}$
1, the sample
2. In the example above, gender, grouping, observation status, and the last column are all custom columns. $\color{Darkorange}{Icon}$, $\color{Darkorange}{Select}$, $\color{Darkorange}{Button}$component.
$\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" > refresh </Button > <Button type="warning" size="small" @click="addPatient(column)" > new </Button > </template> <template slot-scope="{ row, index }" slot="op"> <Button type="warning" size="small" style="margin-right: 5px" > edit </Button > <Button type="error" size="small" @click="handleDelete(row, Index)" > delete </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: "sex", slot: "sex", key: "sex", width: 150, resizable: true},... {title: "Group ", slot: "group", key: "groupName", resizable: true,}, {title:" observe state", slot: "state", key: "state", width: 200,}, {title: "operation", slot: "op", / / custom headSlot: "hop", / / a custom column head key: "op", width: 150,},], data: [],... }; },$\color{Darkorange}{template}$code snippet $\color{Darkorange}{sex}$, $\color{Darkorange}{group}$, $\color{Darkorange}{op}$, $\color{Darkorange}{op}$, $\color{Darkorange}{slot}$\color{Darkorange}{sex}$, $\color{Darkorange}{group}$, $\color{Darkorange}{op}$. $\color{SkyBlue}{… $\color{SkyBlue}{… slot-scope=”{ row }”… } $
$\color{MediumTurquoise}{2.4 custom column Render}$
$\color{Darkorange}{template}$and $\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" > refresh </Button > <Button type=" small" @click="addPatient(column)" > new </Button > </template>... </BeeGridTable>$\color{DodgerBlue}{Vue -Js}$
Data () {return {columns: [... {title: "operation ", //headSlot first headSlot: "hop", render: (h, params) => { return h("div", [ h( "Button", { props: { type: "warning", size: "small", }, style: { marginRight: "5 px",}, on: {click: () = > {the console. The log (" edit ");},},}, "editor"), h (" Button ", {props: {type: "error", size: "Small",}, style: {marginRight: "5 px",}, on: {click: () = > {the console. The log (" delete ");},},}, "delete"),]);}, the key: "op", width: 150, }, ], data: [], ... }; },2, the same, in contrast, render writing is really have to make a person laugh, a simple function is simply written as long as ramen noodles. $\color{Darkorange}{Template}$is good for normal business rendering. If you need to use JS to control rendering, consider using $\color{Darkorange}{render}$!
$\color{mediumTurquoise}{2.5 custom filter Template write}$
Example 1,
$\color{Darkorange}{contains}$, $\color{Darkorange}{does not contain}$, $\color{Darkorange}{in… Start}$, $\color{Darkorange}{end}$, $\color{Darkorange}{reset}$5 basic search options. Most of the time, it just feels good enough. But if the business requirements are often complex, $\color{Darkorange}{CheckBox}$or $\color{Darkorange}{Radio}$or $\color{Darkorange}{Select}$. This is where custom filters come in handy. With these concerns in mind, $\color{OrangeRed}{BeeGridTable does not give the custom filter Render function}$.
3. The implementation code is as follows. For specific analysis of screening, you can refer to the previous article
$\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" > refresh </Button > <Button type="warning" size="small" @click="addPatient(column)" > new </Button > </template> <template slot-scope="{ row, index }" slot="op"> <Button type="warning" size="small" style="margin-right: 5px" > edit </Button > <Button type="error" size="small" @click="handleDelete(row, Index)" > delete </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"> <span style="color: RGB (0, 0, 0); font-family: Arial, sans-serif; font-family: Arial, sans-serif; font-family: Arial, sans-serif; Red "class="bee-sys-icon md-woman" </span> </span> </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}$
ColumnSustom: [{title: "number ", key: "code", width: 150, resizable: true,}, {title: "name", key: "name", width: }, {title: "sex", slot: "sex", key: "sex", width: 100, selectedSexCode: -1, headFilterSlot: "fsex",}, {title: "sex", slot: "fsex", slot: "fsex",} Sizable: "age", key: "age", width: 150, resizable: true}, {title: "group", 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: }, {title: "status ", slot: "state", key: "state", width: 200,}, {title:" operation ", 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(); }},Three, the last
You are welcome to leave a comment orInto the group ofDiscuss, learn and progress together! If you like this article, please pay attention to the QR code of the public number below, and more related topics will be updated!
