Artikelverzeichnis
Vorwort
Während der Vue-Projektentwicklung, insbesondere der Backend-Management-Entwicklung, werden häufig Tabellen und Formulare in ElementUI verwendet. Manchmal müssen wir der Tabelle Kontrollkästchen hinzufügen, um eine vollständige Auswahl und eine einzelne Auswahl der aktuellen Zeile zu erreichen. Was soll ich zu diesem Zeitpunkt tun, wenn dort? Gibt es Bedingungen, um einzuschränken, ob das Kontrollkästchen deaktiviert ist? Dies muss erweitert werden, da die Verarbeitung aller Auswahlen im Header und einzelner Auswahlen in den Tabellenzeilen unterschiedlich ist.
1. Deaktivieren Sie das Kontrollkästchen im Hauptteil
1.1 Übersicht
Im offiziellen Dokument Table-column gibt es eine auswählbare Rückruffunktion, mit der ein Wert zurückgegeben wird, um zu bestimmen, ob die CheckBox dieser Zeile überprüft werden kann. Sie gilt nur für Spalten mit Typ = Auswahl. Die Funktion hat zwei Parameter Funktion(Zeile, Index):
- Zeile aktuelle zeilenbezogene Informationsparameter
- index aktueller Zeilenindexwert
1.2 Legen Sie die Spalte des Kontrollkästchens fest
Code wie folgt anzeigen:
<el-table-column
type="selection"
width="60"
slign="center"
:selectable="enableSelect">
</el-table-column>
Definieren Sie diese Funktion und fügen Sie relevante Bedingungen hinzu. Sie ist
nicht bedienbar, wenn die aktuelle Ansichtsdetailseite oder die aktuelle Zeile der Bearbeitungsseite deaktiviert ist.
Der Rückgabewert ist falsch. Sie ist nicht bedienbar. Der Standardwert ist wahr. Sie ist bedienbar.
enableSelect(row,index){
if(this.type == 'detail'){
return false
} else if(row.status === 0) {
return false
} else {
return true
}
}
2. Bearbeiten Sie das Kontrollkästchen zum Deaktivieren im Kopf
2.1 Übersicht
Wenn Sie das Kontrollkästchen im Tabellenkopf deaktivieren möchten, können Sie einen Stil hinzufügen, um es auszublenden. Dies erfordert das Hinzufügen eines Attributs header-cell-class-name zu el-table. Der Attributwert kann eine Rückrufmethode als Stil der Headerzelle sein, oder Sie können ein festes Objekt verwenden, um für alle Headerzellen den gleichen Stil festzulegen .
Function({row, column, rowIndex, columnIndex})/Object
Destrukturierungsparameter der Rückruffunktion:
- Reihe
- Spalte
- rowIndex
- ColumnIndex
2.2 Zugehöriger Democode
Vorlage-Vorlagencode:
<el-table
v-loading="loading"
:data="tableData"
ref="tableRef"
:header-cell-class-name="cellClassName"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="60"
slign="center"
:selectable="enableSelect"/>
<el-table-column
type="index"
label="序号"
align="center"/>
....
<el-table-column label="状态" prop="status" align="center"/>
</el-table>
Definieren Sie eine Funktion, um den Klassennamen anzugeben, der unter bestimmten Bedingungen angezeigt wird
cellClassName() {
if(this.type == 'detail') {
return "cell-disabled"
} else {
return ""
}
}
Stil Stil versteckt (SCSS-Prozessordurchdringung)
::v-deep .cell-disabled .cell {
visibility: hidden;
}