Hallo, hallo, ich bin wieder da. Benutzen Sie bei Ihrer Arbeit Komponenten? ElementUI sollte verwendet werden. Element ist eine Reihe von UI-Komponentenbibliotheken, die vom inländischen Ele.me-Team entwickelt wurden. Es bietet eine Fülle von PC-Komponenten, was die Entwicklungsschwierigkeiten für Benutzer effektiv reduziert.
Wenn wir bei unserer Arbeit auf eine Tabelle stoßen, verwenden wir häufig die el-table-Komponente zum Schreiben der Tabelle, damit der Stil der geschriebenen Tabelle besser ist. Stellen Sie nun die Anforderung: Wenn es in der Tabelle eine Spalte mit der entsprechenden Detailseite gibt, klicken Sie auf das einzelne Element dieser Spalte, um zur entsprechenden Detailseite zu springen. Was soll ich tun? Sollten wir dann zuerst das Routing der Detailseite konfigurieren? Im Allgemeinen wird beim Springen eine bestimmte ID als eindeutige Kennung übergeben, und wir wissen, welche übergeben wird. Dann ähnelt die URL der Detailseite http://xxxxxx?id=1.
Ich werde hier also nicht springen, sondern über eine Methode sprechen, mit der alle Daten in dieser Zeile abgerufen werden können. Hierfür wird unser Scope-Slot -Slot-Scope verwendet.
Füllen Sie zunächst die Daten der Tabelle aus und erstellen Sie eine Tabelle mit fünf Personen, d da jede Ähnlichkeit rein zufällig ist ).
data() {
return {
people: [
{
name: "亮亮",
age: 35,
salary: 800000,
address: "亮亮家园",
},
{
name: "华华",
age: 50,
salary: 1800000,
address: "华华家园",
},
{
name: "东东",
age: 37,
salary: 1600000,
address: "东东家园",
},
{
name: "铭铭",
age: 33,
salary: 900000,
address: "铭铭家园",
},
{
name: "小新",
age: 31,
salary: 700000,
address: "小新家园",
},
],
};
},Schreiben Sie dann den folgenden Code in das div in der Vorlage (angewendet auf die el-table-Komponente).
<el-table :data="people">
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
<!-- 注意：这个地方要传参数进去才能进行操作 函数名称(scope.row) -->
<div @click="alertMessage(scope.row)">{
{ scope.row.name }}</div>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄" width="180"></el-table-column>
<el-table-column
prop="salary"
label="年薪/元"
width="180"
></el-table-column>
<el-table-column
prop="address"
label="地址"
width="180"
></el-table-column>
</el-table>Weil ich auf den Namen des Charakters klicken möchte, um das entsprechende Detailobjekt abzurufen, und dann das Fenster öffnen möchte. Verwenden Sie also Slot-Scope, und dann können wir Scope.row lesen, wodurch ein Objekt abgerufen werden kann, und dann alle detaillierten Informationen dieser Person in diese Zeile aufgenommen werden (einschließlich Name, Alter, Jahresgehalt und Adresse), und dann kann es sein In Methoden konfiguriert Die AlertMessage-Methode in der Abbildung ist wie in der folgenden Abbildung dargestellt.
methods: {
alertMessage(row) {
window.alert(
`我叫${row.name}，今年${row.age}岁，年薪${row.salary}元，住在${row.address}`
);
},
},In diesem Fall können wir diese Seite öffnen, um den folgenden Effekt zu sehen
Klicken Sie dann auf jeden Namen. Es erscheint ein Popup-Fenster wie folgt
......usw
In diesem Fall ist unser Problem gelöst. Wenn Sie analog zur entsprechenden Detailseite springen möchten, müssen Sie klicken, um das ID-Attribut von Scope.row abzurufen, und dieses dann übergeben.$router.push({path:'...',query:{ id:' ...'}}) , um zur entsprechenden Detailseite zu springen.
Hast du es gelernt? Vergessen Sie nicht, den Computer einzuschalten und zu schreiben und zu üben.