🌐 AI搜索 & 代理 主页
Skip to content

Commit 21f7812

Browse files
tmorehousetmorehouse
authored
Update README.md
1 parent 2af809c commit 21f7812

File tree

1 file changed

+23
-23
lines changed

1 file changed

+23
-23
lines changed

‎src/components/table/README.md‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -494,8 +494,8 @@ values: `sm`, `md`, `lg`, or `xl`.
494494
<div>
495495
<b-table responsive :items="items">
496496
<!-- We are using utility class `text-nowrap` to help illustrate horizontal scrolling -->
497-
<div slot="HEAD[]" class="text-nowrap" slot-scope="scope">{{ scope.label }}</div>
498-
<div slot="[]" class="text-nowrap" slot-scope="scope">{{ scope.value }}</div>
497+
<div slot="head[]" class="text-nowrap" slot-scope="scope">{{ scope.label }}</div>
498+
<div slot="cell[]" class="text-nowrap" slot-scope="scope">{{ scope.value }}</div>
499499
</b-table>
500500
</div>
501501
</template>
@@ -798,9 +798,9 @@ function.
798798
Scoped field slots give you greater control over how the record data appears. If you want to add an
799799
extra field which does not exist in the records, just add it to the `fields` array, And then
800800
reference the field(s) in the scoped slot(s). Scoped field slots use the following naming syntax:
801-
`'[' + field key + ']'`.
801+
`'cell[' + field key + ']'`.
802802

803-
You can use the default _fall-back_ scoped slot `'[]'` to format any cells that do not have an
803+
You can use the default _fall-back_ scoped slot `'cell[]'` to format any cells that do not have an
804804
explicit scoped slot provided.
805805

806806
**Example: Custom data rendering with scoped slots**
@@ -810,22 +810,22 @@ explicit scoped slot provided.
810810
<div>
811811
<b-table small :fields="fields" :items="items">
812812
<!-- A virtual column -->
813-
<template slot="[index]" slot-scope="data">
813+
<template slot="cell[index]" slot-scope="data">
814814
{{ data.index + 1 }}
815815
</template>
816816

817817
<!-- A custom formatted column -->
818-
<template slot="[name]" slot-scope="data">
818+
<template slot="cell[name]" slot-scope="data">
819819
<b>{{ data.value.last }}</b>, {{ data.value.first }}
820820
</template>
821821

822822
<!-- A virtual composite column -->
823-
<template slot="[nameage]" slot-scope="data">
823+
<template slot="cell[nameage]" slot-scope="data">
824824
{{ data.item.name.first }} is {{ data.item.age }} years old
825825
</template>
826826

827827
<!-- Optional default data cell scoped slot -->
828-
<template slot="[]" slot-scope="data">
828+
<template slot="cell[]" slot-scope="data">
829829
<i>{{ data.value }}</i>
830830
</template>
831831
</b-table>
@@ -891,7 +891,7 @@ scoped field slot.
891891
<template>
892892
<div>
893893
<b-table :items="items">
894-
<span slot="[html]" slot-scope="data" v-html="data.value"></span>
894+
<span slot="cell[html]" slot-scope="data" v-html="data.value"></span>
895895
</b-table>
896896
</div>
897897
</template>
@@ -940,7 +940,7 @@ formatted value as a string (HTML strings are not supported)
940940
<template>
941941
<div>
942942
<b-table :fields="fields" :items="items">
943-
<template slot="[name]" slot-scope="data">
943+
<template slot="cell[name]" slot-scope="data">
944944
<!-- `data.value` is the value after formatted by the Formatter -->
945945
<a :href="`#${data.value.replace(/[^a-z]+/i,'-').toLowerCase()}`">{{ data.value }}</a>
946946
</template>
@@ -1003,34 +1003,34 @@ It is also possible to provide custom rendering for the tables `thead` and `tfoo
10031003
default the table footer is not rendered unless `foot-clone` is set to `true`.
10041004

10051005
Scoped slots for the header and footer cells uses a special naming convention of
1006-
`'HEAD[<fieldkey>]'` and `'FOOT[<fieldkey>]'` respectively. if a `'FOOT[...]'` slot for a field is
1007-
not provided, but a `'HEAD[...]'` slot is provided, then the footer will use the `'HEAD[...]'` slot
1006+
`'head[<fieldkey>]'` and `'foot[<fieldkey>]'` respectively. if a `'foot[...]'` slot for a field is
1007+
not provided, but a `'head[...]'` slot is provided, then the footer will use the `'head[...]'` slot
10081008
content.
10091009

1010-
You can use a default _fall-back_ scoped slot `'HEAD[]'` or `'FOOT[]'` to format any header or
1010+
You can use a default _fall-back_ scoped slot `'head[]'` or `'foot[]'` to format any header or
10111011
footer cells that do not have an explicit scoped slot provided.
10121012

10131013
```html
10141014
<template>
10151015
<div>
10161016
<b-table :fields="fields" :items="items" foot-clone>
10171017
<!-- A custom formatted data column cell -->
1018-
<template slot="[name]" slot-scope="data">
1018+
<template slot="cell[name]" slot-scope="data">
10191019
{{ data.value.first }} {{ data.value.last }}
10201020
</template>
10211021

10221022
<!-- A custom formatted header cell for field 'name' -->
1023-
<template slot="HEAD[name]" slot-scope="data">
1023+
<template slot="head[name]" slot-scope="data">
10241024
<span class="text-info">{{ data.label }}</b>
10251025
</template>
10261026

10271027
<!-- A custom formatted footer cell for field 'name' -->
1028-
<template slot="FOOT[name]" slot-scope="data">
1028+
<template slot="foot[name]" slot-scope="data">
10291029
<span class="text-danger">{{ data.label }}</span>
10301030
</template>
10311031

10321032
<!-- Default fall-back custom formatted footer cell -->
1033-
<template slot="FOOT[]" slot-scope="data">
1033+
<template slot="foot[]" slot-scope="data">
10341034
<i>{{ data.label }}</i>
10351035
</template>
10361036
</b-table>
@@ -1251,8 +1251,8 @@ set.
12511251
<b-form-checkbox v-model="stickyHeader" class="mb-2">Sticky header</b-form-checkbox>
12521252
<b-table :sticky-header="stickyHeader" responsive :items="items" :fields="fields">
12531253
<!-- We are using utility class `text-nowrap` to help illustrate horizontal scrolling -->
1254-
<div slot="HEAD[id]" class="text-nowrap" slot-scope="scope">Row ID</div>
1255-
<div slot="HEAD[]" class="text-nowrap" slot-scope="scope">
1254+
<div slot="head[id]" class="text-nowrap" slot-scope="scope">Row ID</div>
1255+
<div slot="head[]" class="text-nowrap" slot-scope="scope">
12561256
Heading {{ scope.label }}
12571257
</div>
12581258
</b-table>
@@ -1352,7 +1352,7 @@ initially showing.
13521352
<template>
13531353
<div>
13541354
<b-table :items="items" :fields="fields" striped responsive="sm">
1355-
<template slot="[show_details]" slot-scope="row">
1355+
<template slot="cell[show_details]" slot-scope="row">
13561356
<b-button size="sm" @click="row.toggleDetails" class="mr-2">
13571357
{{ row.detailsShowing ? 'Hide' : 'Show'}} Details
13581358
</b-button>
@@ -1459,7 +1459,7 @@ Programmatic selection notes:
14591459
responsive="sm"
14601460
>
14611461
<!-- Example scoped slot for select state illustrative purposes -->
1462-
<template slot="[selected]" slot-scope="{ rowSelected }">
1462+
<template slot="cell[selected]" slot-scope="{ rowSelected }">
14631463
<template v-if="rowSelected">
14641464
<span aria-hidden="true">&check;</span>
14651465
<span class="sr-only">Selected</span>
@@ -2786,11 +2786,11 @@ your app handles the various inconsistencies with events.
27862786
:sort-direction="sortDirection"
27872787
@filtered="onFiltered"
27882788
>
2789-
<template slot="[name]" slot-scope="row">
2789+
<template slot="cell[name]" slot-scope="row">
27902790
{{ row.value.first }} {{ row.value.last }}
27912791
</template>
27922792

2793-
<template slot="[actions]" slot-scope="row">
2793+
<template slot="cell[actions]" slot-scope="row">
27942794
<b-button size="sm" @click="info(row.item, row.index, $event.target)" class="mr-1">
27952795
Info modal
27962796
</b-button>

0 commit comments

Comments
 (0)