Vue el-table 默認展開某一行的實例

更新時間：2022年08月09日 14:27:01 作者：Song_Estelle

這篇文章主要介紹了Vue el-table 默認展開某一行的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue el-table 默認展開某一行

需求是在另外一個頁面選擇IP地址直接到這個頁面，并需要默認展開選擇的那一行

代碼如下：

<el-table
? border
? ref="expandTable"
? :data="nodeList">
? <el-table-column type="expand">
? ? <template slot-scope="props">
? ? ? <el-form label-position="left" inline class="demo-table-expand">
? ? ? ? <el-form-item label="節(jié)點IP：">
? ? ? ? ? <span>{{ props.row.ip }}</span>
? ? ? ? </el-form-item>
? ? ? ? <el-form-item label="國家/城市：">
? ? ? ? ? <span>{{ props.row.country }}</span>
? ? ? ? </el-form-item>
? ? ? ? <el-form-item label="購買日期：">
? ? ? ? ? <span>{{ props.row.purchaseDate }}</span>
? ? ? ? </el-form-item>
? ? ? ? <el-form-item label="到期日期：">
? ? ? ? ? <span>{{ props.row.expiryDate }}</span>
? ? ? ? </el-form-item>
? ? ? </el-form>
? ? </template>
? </el-table-column>
? <el-table-column type="selection" width="55" align="center"/>
? <el-table-column label="序號" type="index" width="55" align="center"/>
? <el-table-column label="IP地址" align="center" prop="ip" width="150"/>
? <el-table-column label="國家/城市" align="center" prop="country" width="200"/>
? <el-table-column label="購買日期" align="center" prop="purchaseDate" sortable width="160"/>
? <el-table-column label="到期日期" align="center" prop="expiryDate" sortable width="160"/>
</el-table>

在獲取列表時，調(diào)用展開詳情，這只適用于一個表格

/** 查詢列表 */
getList() {
? this.nodeList = [];
? // 從URL中獲取的對應的主鍵ID
? const rowId = this.$route.query && this.$route.query.rowId;
? listNode(this.queryParams).then(response => {
? ? this.nodeList = response.rows;
? ? this.total = response.total;
? ? // 查找rowId對應的列表的下標值
? ? let index = this.nodeList.findIndex(item => item.id === this.rowId);
? ? if (index >= 0) {
? ? ? this.openDetail(this.nodeList[index]);
? ? }
? });
},
/** 展開詳情 */
openDetail(row) {
? this.$nextTick(() => {
? ? this.$refs.expandTable.toggleRowExpansion(row, true);
? });
},

但是如果表格在for循環(huán)下，或者在多個tab下的話，那么this.$refs.expandTable就是一個數(shù)組，就需要使用下列方式：

openDetail(row) {
? this.$nextTick(() => {
? ? for (let i = 0; i < this.$refs.expandTable.length; i++) {
? ? ? this.$refs.expandTable[i].toggleRowExpansion(row, true);
? ? }
? });
},

el-table 高亮某一行

使用 highlight-current-row 屬性

el-table 加上 highlight-current-row 屬性。

<el-table ref='tTable' :data="dataList" highlight-current-row></el-table>

調(diào)用 setCurrentRow(row, true) 設置當前行高亮，row為dataList里面的數(shù)據(jù)。

selectRow(row) {
? ? ?if (row) {
? ? ? ?this.$refs.tTable.setCurrentRow(row, true);
? ? ?} else {
? ? ? ?this.$refs.tTable.setCurrentRow(); ?// 取消高亮
? ? ?}
}

如果要改變默認的高亮的顏色。這樣就把項目中所有el-table的高亮顏色都改了。

<style lang="scss">
? ? .el-table__body tr.current-row>td {
? ? ? ? background: #453878 !important;
? ? }
</style>

使用 row-class-name

<el-table ref='transcriptTable' :data="sentenceList" height="400" :row-class-name="transcriptTableRowClassName"></table>

? ? transcriptTableRowClassName({row, rowIndex}) {
? ? ? ? if (rowIndex === this.curSentenceRowIndex) {
? ? ? ? ? ? return 'speak-row';
? ? ? ? }
? ? ? ? return '';
? ? },

如果是當前行時，返回不同的樣式。

<style lang="scss">
? ? .el-table .speak-row {
? ? ? ? color: darkorange;
? ? ? ? font-size: 15px;
? ? ? ? font-weight: 500;
? ? ? ? background: #f0f9eb;
? ? }
</style>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: