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.
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.
Dans, utilisez slot-scope pour obtenir les informations sur la ligne actuelle
<template slot-scope="scope" ></template>
scope.$index Obtenir l'index scope.row Récupérer la ligne (objet) actuelle 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
<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
<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>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"
}
],复制代码
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!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
