Table des matières
1. Traitement général des données
L'élément de données el-table appelle la méthode pour traiter la valeur
Ajouter dynamiquement des points de différentes couleurs aux éléments de données el-table
les éléments de données el-table créent une balise el dynamique
2. Autre traitement de type slot
les éléments de données el-table sont ajoutés à la zone de saisie
bouton de téléchargement d'élément de données el-table
L'élément de données el-table est trop long pour intercepter et afficher tout le texte en suspension
élément de données el-table saut de lien el-link
Élément de données el-table Liste déroulante el-select, interface de requête après sélection
élément de données el-table rendu de l'emplacement el-switch
3. Recommandations pertinentes de haute qualité dans le passé
avant-propos
- les données ordinaires d'el-table doivent souvent être traitées puis affichées
- Il s'agit d'un résumé du traitement du code ou de l'empaquetage des composants pour certains scénarios courants
- Facile à vérifier lorsque vous l'utilisez à nouveau
1. Traitement général des données
L'élément de données el-table appelle la méthode pour traiter la valeur
Lorsque vous utilisez le composant el-table, vous pouvez traiter la valeur de l'élément de données de el-table en appelant une méthode. Vous pouvez appeler la méthode définie dans les méthodes du modèle de el-table pour traiter la valeur de l'élément de données.
Voici un exemple de code :
<template>
<el-table :data="tableData">
<el-table-column label="ID" prop="id">
<template slot-scope="scope">
{
{ formatId(scope.row.id) }}
</template>
</el-table-column>
<el-table-column label="Name" prop="name"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
],
};
},
methods: {
formatId(id) {
// 在这里可以对id进行处理
return '#' + id;
},
},
};
</script>
Dans le code ci-dessus, nous définissons un composant el-table et lions les données via l'attribut :data . Dans le modèle de el-table-column, nous utilisons slot-scope pour obtenir chaque ligne de données (scope.row) de el-table. Appelez ensuite la méthode formatId dans le modèle pour traiter l'identifiant et renvoyer la valeur de l'identifiant traité.
Dans la méthode formatId, vous pouvez effectuer n'importe quel traitement sur l'id en fonction de vos besoins, puis renvoyer la valeur traitée. Par exemple, dans l'exemple ci-dessus, nous avons ajouté un signe dièse devant l'id comme valeur formatée.
De cette façon, lorsque la table el est rendue, la méthode formatId sera appelée automatiquement pour traiter la valeur id et afficher la valeur formatée.
Ajouter dynamiquement des points de différentes couleurs aux éléments de données el-table
<el-table-column prop="status" label="数据状态" header-align="center" width="200">
<template slot-scope="scope">
<div style="display: flex; justify-content: center; align-items: center;">
<span slot="reference" style=" margin-right: 8px;">
<i class="dotClass" :style="getColor(scope.row.status)"></i>
</span>
{
{ paramFormat(scope.row.status) }}
</div>
</template>
</el-table-column>
getColor(data) {
if (data == "one") {
return "#67C23A";
} else if (data == "two") {
return "#F56C6C";
}
...
},
.dotClass {
width: 12px;
height: 12px;
border-radius: 50%;
display: block;
}
les éléments de données el-table créent une balise el dynamique
Pour utiliser la balise el dynamique dans les éléments de données de el-table, vous pouvez l'implémenter en personnalisant le modèle de colonne.
Tout d'abord, assurez-vous que la bibliothèque Element UI et Vue sont intégrées :
<template>
<el-table :data="tableData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="标签" prop="tags">
<template slot-scope="scope">
<el-tag v-for="tag in scope.row.tags" :key="tag" :type="tag.type">{
{ tag.name }}</el-tag>
</template>
</el-table-column>
</el-table>
</template>
Dans l'exemple ci-dessus, nous avons utilisé el-table-column pour définir les colonnes et slot-scope pour accéder aux données de chaque ligne. Nous utilisons ensuite la directive v-for dans le modèle de colonne pour parcourir le tableau de balises de chaque personne et créer une balise el dynamique pour chaque balise.
Il convient de noter que l'attribut type utilise ici : type="tag.type", afin que nous puissions définir différents styles en fonction du type de chaque balise.
Ensuite, définissez les données de table et les données d'étiquette :
data() {
return {
tableData: [
{
name: '张三',
tags: [{ name: '标签1', type: 'success' }, { name: '标签2', type: 'warning' }]
},
{
name: '李四',
tags: [{ name: '标签3', type: 'info' }, { name: '标签4', type: 'danger' }]
}
]
};
}
Dans l'exemple ci-dessus, nous avons des données de deux personnes, et chaque personne a un tableau de balises, qui contient les informations de balise de chaque personne.
De cette façon, nous pouvons utiliser des el-tags dynamiques dans les éléments de données de el-table, et les tags de chaque personne afficheront différents styles selon différents types.
Exemple de code de composant
Les colonnes doivent être configurées : ajouter une fonction de rendu à un élément de colonnes (valeur de passage : valeur actuelle, ligne entière de données, numéro de ligne)
<template>
<div class="t-table" style="width:100%;">
<t-table :table="table" :columns="table.columns" />
</div>
</template>
<script>
export default {
data() {
return {
table: {
data: [
{
id: '1',
date: '2019-09-25',
name: '张三',
status: '2',
address: '广东省广州市天河区'
},
{
id: '2',
date: '2019-09-26',
name: '张三1',
status: '1',
address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
},
{
id: '3',
date: '2019-09-27',
name: '张三2',
status: '3',
address: '广东省广州市天河区3'
}
],
columns: [
{ prop: 'name', label: '姓名', minWidth: '100' },
{
prop: 'status',
label: 'render渲染1',
minWidth: '180',
render: (text, row, index) => {
// console.log(777, text, row, index)
let type = ''
let val = ''
switch (text) {
case '1':
type = ''
val = '待处理'
break
case '2':
type = 'warning'
val = '进行中'
break
case '3':
type = 'success'
val = '已完成'
break
}
return (
<el-tag type={type}>
{val}
</el-tag>
)
}
},
{
prop: 'status',
label: 'render渲染2',
minWidth: '180',
render: (text, record) => {
return (
<el-switch
active-value={'1'}
inactive-value={'2'}
v-model={record.enableStatus}
onChange={() => this.handleStatusChange(record)}
>
{text}
</el-switch>
)
},
},
{ prop: 'address', label: '地址', minWidth: '220' },
{ prop: 'date', label: '日期', minWidth: '180' },
{ prop: 'address', label: '地址', minWidth: '220' }
],
},
}
},
methods: {
// 状态修改
handleStatusChange(row) {
let text = row.status === '1' ? '启用' : '废止'
this.$confirm(`确认要${text}这条数据吗？`, '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message.success(`点击确定`)
}).catch(() => {
console.log('取消')
row.status = row.status === '1' ? '2' : '1'
})
},
// 新增
add(val) {
console.log('新增', val)
},
// 编辑
edit(val) {
console.log('编辑', val)
},
// 删除
handleDelete(val) {
console.log('删除', val)
}
}
}
</script>2. Autre traitement de type slot
les éléments de données el-table sont ajoutés à la zone de saisie
Pour ajouter une zone de saisie à l'élément de données de el-table-table, cela peut être réalisé en personnalisant le modèle de colonne.
Tout d'abord, assurez-vous que la bibliothèque Element UI et Vue sont intégrées :
<template>
<el-table :data="tableData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="标签">
<template slot-scope="scope">
<el-input v-model="scope.row.input" placeholder="请输入标签"></el-input>
</template>
</el-table-column>
</el-table>
</template>
Dans l'exemple ci-dessus, nous avons utilisé el-table-column pour définir les colonnes et slot-scope pour accéder aux données de chaque ligne. Ensuite, utilisez el-input dans le modèle de colonne pour créer une zone de saisie et utilisez la directive v-model pour lier de manière bidirectionnelle chaque propriété d'entrée individuelle.
Il convient de noter que nous utilisons scope.row.input pour lier la valeur de chaque zone de saisie afin de garantir que chaque zone de saisie a une valeur indépendante.
Définissez ensuite les données de la table :
data() {
return {
tableData: [
{
name: '张三',
input: ''
},
{
name: '李四',
input: ''
}
]
};
}
Dans l'exemple ci-dessus, nous avons des données pour deux personnes, et chaque personne a une propriété d'entrée qui contient la valeur de la zone de saisie.
De cette manière, nous pouvons ajouter une zone de saisie à l'élément de données de la table el, et chaque personne dispose d'une zone de saisie indépendante, qui peut être saisie au besoin.
bouton de téléchargement d'élément de données el-table
La fonction d'ajout du bouton de téléchargement de fichier peut être réalisée en personnalisant l'emplacement de la colonne.
Tout d'abord, ajoutez un emplacement de colonne personnalisé à la table el pour afficher le bouton de téléchargement de fichier. slot-scopeLes informations sur les éléments de données de la ligne actuelle peuvent être obtenues via l'attribut :
<el-table v-bind:data="tableData">
<el-table-column>
<template slot-scope="scope">
<!-- 显示上传文件按钮 -->
</template>
</el-table-column>
<!-- 其他列定义 -->
</el-table>
Ajoutez un composant el-upload dans l'emplacement de colonne personnalisé pour implémenter la fonction de téléchargement de fichier. Dans l'événement de clic du bouton de téléchargement, les informations sur l'élément de données de la ligne actuelle peuvent être obtenues via scope.row, et la logique de téléchargement correspondante peut être exécutée :
<el-table v-bind:data="tableData">
<el-table-column>
<template slot-scope="scope">
<!-- 显示上传文件按钮, :auto-upload="false"不然会上传两次 -->
<el-upload
action
v-if="true"
:show-file-list="false"
:auto-upload="false"
:on-change="(file, fileList) => uploadBiu(scope.row, file, fileList)"
>
<el-button size="small" type="text" icon="el-icon-upload">
上传文件
</el-button>
</el-upload>
</template>
</el-table-column>
<!-- 其他列定义 -->
</el-table>
Définissez chaque fonction de rappel du fichier téléchargé dans les méthodes du composant Vue pour le traitement des données associées et les commentaires :
methods: {
uploadBiu(file) {
// 上传处理逻辑
},
}
Lorsque l'utilisateur clique sur le bouton de téléchargement de fichier, le composant el-upload déclenche l'événement correspondant et transmet les informations du fichier à la fonction de rappel. Vous pouvez effectuer le traitement correspondant dans la fonction de rappel, comme l'envoi d'une demande de téléchargement du fichier, la mise à jour données du tableau, etc.
Comme pour les multiples boutons, il suffit de passer le paramètre slot v-for ou d'ajouter directement
L'élément de données el-table est trop long pour intercepter et afficher tout le texte en suspension
Lorsque vous utilisez un tableau pour afficher des informations de liste dans vue, si les informations sont trop longues, elles seront laide et disgracieuses, et la copie de la boîte flottante n'est pas très conviviale
<el-table-column prop="measures" label="companyName">
<template slot-scope="scope">
<el-popover
placement="top"
width="300"
trigger="hover"
:disabled="scope.row.companyName&& scope.row.companyName.length <= 20"
>
<div>{
{ scope.row.measures }}</div>
<span slot="reference" v-if="scope.row.companyName&& scope.row.companyName.length <= 20">{
{scope.row.companyName}}</span>
<span slot="reference" v-if="scope.row.companyName&& scope.row.companyName.length > 20">{
{scope.row.companyName.substr(0, 20) + "..."}}</span>
</el-popover>
</template>
</el-table-column>Puisque le résultat sera jugé, length() et subdtr() seront traités, et les données ne seront pas obtenues à temps, ce qui conduira à une erreur, il est donc nécessaire d'ajouter un v-if pour demander les données d'interface à obtenir avant traitement
élément de données el-table saut de lien el-link
Pour utiliser el-link dans la table el de VueVue afin d'implémenter des sauts de lien pour les éléments de données, vous pouvez utiliser des slots délimités et des écouteurs d'événement.
Tout d'abord, vous devez utiliser des emplacements délimités dans el-table-column pour définir le contenu d'affichage et cliquer sur les événements d'el-link. Comme suit:
<el-table-column label="Link">
<template slot-scope="scope">
<el-link type="primary" @click="handleLinkClick(scope.row)">{
{ scope.row.linkText }}</el-link>
</template>
</el-table-column>
Dans cet exemple, nous plaçons le lien el dans l'emplacement de portée de el-table-column et utilisons scope.row pour accéder aux propriétés de chaque élément de données. Nous définissons également l'écouteur d'événement @click pour gérer l'événement click du lien et transmettre l'élément de données actuel en tant que paramètre à la méthode handleLinkClick.
Ensuite, vous pouvez définir la méthode handleLinkClick dans les méthodes du composant Vue pour gérer le saut de clic du lien. Comme suit:
methods: {
handleLinkClick(row) {
// 在这里执行跳转到目标链接的逻辑
window.location.href = row.link;
}
}
Dans la méthode handleLinkClick, vous pouvez utiliser window.location.href pour accéder à la page. Vous pouvez déterminer le lien cible en fonction des attributs de l'élément de données, puis accéder à la page correspondante.
De cette façon, vous pouvez utiliser el-link dans la table el de Vue pour réaliser le saut de lien des éléments de données. Lorsque l'utilisateur clique sur le lien, la méthode handleLinkClick est déclenchée et la page spécifiée par le lien cible est renvoyée.
Élément de données el-table Liste déroulante el-select, interface de requête après sélection
Utilisez el-select dans la table el de Vue pour implémenter la liste déroulante de l'élément de données et demander l'interface après la sélection, ce qui peut être réalisé en utilisant des emplacements délimités et des écouteurs d'événement.
Tout d'abord, vous devez utiliser des emplacements délimités dans el-table-column pour définir le contenu d'affichage et les options de el-select. Comme suit:
<el-table-column label="Select">
<template slot-scope="scope">
<el-select v-model="scope.row.selectedValue" @change="handleSelectChange(scope.row)">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
</template>
</el-table-column>
Dans cet exemple, nous plaçons el-select dans l'emplacement délimité de el-table-column et utilisons scope.row pour accéder aux propriétés de chaque élément de données. Nous utilisons v-model pour lier la valeur sélectionnée et utilisons @change event listener pour gérer l'événement sélectionné de la liste déroulante.
Ensuite, définissez le tableau d'options dans les données du composant Vue pour configurer les options de el-select. Comme suit:
data() {
return {
options: [
{ value: 'value1', label: 'Option 1' },
{ value: 'value2', label: 'Option 2' },
{ value: 'value3', label: 'Option 3' },
]
}
}
Dans cet exemple, nous définissons trois options, chacune avec un attribut value et label.
Ensuite, vous pouvez définir la méthode handleSelectChange dans les méthodes du composant Vue pour gérer l'événement de sélection de la liste déroulante, et demander l'interface après la sélection. Comme suit:
methods: {
handleSelectChange(row) {
// 在这里发送请求接口的逻辑
console.log('Selected value:', row.selectedValue);
// 发送请求接口的示例代码
...
}
}
Dans la méthode handleSelectChange, vous pouvez accéder à la valeur sélectionnée (row.selectedValue) et utiliser la logique correspondante pour envoyer l'interface de requête. Vous pouvez utiliser une bibliothèque telle qu'Axios pour envoyer des requêtes asynchrones et les traiter dans les données renvoyées par l'interface.
De cette façon, vous pouvez utiliser el-select dans la table el de Vue pour implémenter la liste déroulante de l'élément de données et demander l'interface après la sélection. Lorsque l'utilisateur sélectionne l'option de la liste déroulante, la méthode handleSelectChange sera déclenchée et l'interface de demande sera envoyée en fonction des besoins.
élément de données el-table rendu de l'emplacement el-switch
<template>
<div class="t-table" style="width:100%;">
<t-table :table="table" :columns="table.columns">
<template #enableStatus="{param}">
<el-switch
v-model="param.row.enableStatus"
:active-value="1"
:inactive-value="2"
@change="handleStatusChange(param.row)"
></el-switch>
</template>
</t-table>
</div>
</template>
<script>
export default {
data() {
return {
table: {
data: [
{
id: '1',
date: '2019-09-25',
name: '张三',
status: '2',
enableStatus: 1,
address: '广东省广州市天河区'
},
{
id: '2',
date: '2019-09-26',
name: '张三1',
status: '1',
enableStatus: 2,
address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
},
{
id: '3',
date: '2019-09-27',
name: '张三2',
status: '3',
enableStatus: 1,
address: '广东省广州市天河区3'
}
],
columns: [
{ prop: 'name', label: '姓名', minWidth: '100' },
{
prop: 'status',
label: 'render渲染',
minWidth: '180',
render: (text, row, index) => {
// console.log(777, text, row, index)
let type = ''
let val = ''
switch (text) {
case '1':
type = ''
val = '待处理'
break
case '2':
type = 'warning'
val = '进行中'
break
case '3':
type = 'success'
val = '已完成'
break
}
return (
<el-tag type={type}>
{val}
</el-tag>
)
}
},
{
prop: 'enableStatus',
label: '插槽渲染',
minWidth: '180',
slotName: 'enableStatus'
},
{ prop: 'address', label: '地址', minWidth: '220' },
{ prop: 'date', label: '日期', minWidth: '180' },
{ prop: 'address', label: '地址', minWidth: '220' }
],
},
}
},
methods: {
// 状态修改
handleStatusChange(row) {
let text = row.status === 1 ? '启用' : '废止'
this.$confirm(`确认要${text}这条数据吗？`, '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message.success(`点击确定`)
}).catch(() => {
console.log('取消')
row.status = row.status === 1 ? 2 : 1
})
},
// 新增
add(val) {
console.log('新增', val)
},
// 编辑
edit(val) {
console.log('编辑', val)
},
// 删除
handleDelete(val) {
console.log('删除', val)
}
}
}
</script>3. Recommandations pertinentes de haute qualité dans le passé
S'il vous plaît, aimez-le s'il est utile et développez une bonne habitude!
N'hésitez pas à laisser un message pour vos questions, échanges et encouragements !
Bienvenue à ajouter ! ! !