Maison > Article > interface Web > La balise d'encapsulation de table vue+element-ui utilise la balise slot slot
La balise d'encapsulation de table vue+element-ui utilise la balise slot slot
- hzcavant
- 2020-06-17 10:16:547750parcourir
Nous savons que de nombreux systèmes nécessitent l'ajout de diverses balises aux tableaux pour marquer certains attributs. L'ajout de balises dans element-ui est très simple. Le plus important est d'utiliser la fonctionnalité slot de vue. Comprenez d’abord ce qu’est une machine à sous.
Slot
Enregistrez l'explication officielle compliquée et le code. La signification de slot est simplement de laisser un espace réservé quelque part dans le sous-composant, lorsque le composant parent l'utilise. ce composant enfant, vous pouvez personnaliser l'apparence de l'espace réservé, qui peut être un titre, un bouton, voire un tableau ou un formulaire.
Pourquoi avons-nous besoin de créneaux horaires ? La raison pour laquelle nous avons extrait les composants est qu'il y a trop de code réutilisable. Lors de l'utilisation de composants réutilisables, le copier-coller est considérablement réduit. Imaginez qu'il y ait deux composants. La plupart d'entre eux sont identiques, à l'exception d'une partie, il n'est pas nécessaire de répéter d'autres parties pour cet endroit. Lorsque nous avons le slot, nous pouvons extraire les parties communes des deux composants, puis remplacer la partie différente par un slot. Lors d'un appel ultérieur, nous ne pouvons écrire que le code de cette partie. Ceci est conforme à notre réflexion sur la création de composants et permet d'économiser beaucoup de travail.
element-table obtient les informations sur la ligne
Dans, utilisez slot-scope pour obtenir les informations sur la ligne actuelle
<template slot-scope="scope" ></template>
-
scope.$indexObtenir l'index -
scope.rowRécupérer la ligne (objet) actuelle
Utiliser l'emplacement
Dans les données du tableau, ajouter tag:true, lors de la boucle <el-table-column>, et rencontrant un attribut défini avec tag, il entrera dans cet emplacement, et appellera le composant parent de ce composant pour personnaliser le contenu à présenter dans la colonne d'étiquette
Dans le composant table
<p class="table-content">
<el-table
:data="list"
class="mt-10"
fit
stripe
empty-text="暂无数据"
:highlight-current-row="true"
>
<el-table-column
v-for="(item, index) in table_title"
:key="index"
:prop="item.prop"
:label="item.label"
:width="item.width?item.width:null"
:min-width="item.minwidth?item.minwidth:null"
:sortable="item.sortable?item.sortable:false"
:align="item.columnAlign"
:header-align="item.titleAlign"
>
<template slot-scope="scope">
<template v-if="item.tag">
<slot name="tags" :scope="scope.row"></slot>
</template>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
</el-table>
</p>
comment boucler le contenu et le titre de <el-table> est comme indiqué dans le code ci-dessus
Dans le composant parent qui fait référence au composant table
<table-page
:list="listData"
:table_title="table_title">
<template v-slot:tags="scope">
<el-tag
v-if="scope.scope.tag == 1"
size="small"
type="primary"
>tag1
</el-tag>
<el-tag
v-else-if="scope.scope.tag == 2"
size="small"
type="warning"
>tag2
</el-tag>
<el-tag
v-else-if="scope.scope.tag == 3"
size="small"
type="success"
>tag3
</el-tag>
</template>
</table-page>
utilisation de la table Les données
table_title
[
{
prop: 'id',
label: '编号',
width: '100',
titleAlign: 'center',
columnAlign: 'center',
sortable:true
},
{
prop: 'date',
label: '日期',
width: '150',
titleAlign: 'center',
columnAlign: 'center',
sortable:true
},
{
prop: 'name',
label: '姓名',
width: '120',
titleAlign: 'center',
columnAlign: 'center',
sortable:true
},
{
prop: 'province',
label: '省份',
minwidth: '120',
titleAlign: 'center',
columnAlign: 'center',
sortable:true,
isEdit: true
},
{
prop: 'city',
label: '市区',
minwidth: '120',
titleAlign: 'center',
columnAlign: 'center',
sortable:true
},
{
prop: 'address',
label: '地址',
minwidth: '300',
titleAlign: 'center',
columnAlign: 'center',
sortable:true
},
{
prop: 'auditflag',
label: '状态',
minwidth: '80px',
tag: true,
titleAlign: 'center',
columnAlign: 'center',
sortable:true
},
];
listData
[
{
id: 1,
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
tag: "1"
}, {
id: 2,
date: '2016-05-04',
name: '王小',
province: '北京',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333,
tag: "2"
}, {
id: 3,
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333,
tag: "3"
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333,
tag: "1"
}, {
id: 5,
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333,
tag: "2"
}, {
id: 6,
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333,
tag: "3"
}, {
id: 7,
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333,
tag: "1"
}, {
id: 8,
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333,
tag: "2"
}, {
id: 9,
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333,
tag: "3"
}, {
id: 10,
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333,
tag: "1"
}
],复制代码
effet de présentation
est la dernière colonne Ça y est !
Tutoriel recommandé : "Tutoriel JS"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!