Vueel-table默认展开某一行的实例
目录
Vue el-table 默认展开某一行
el-table 高亮某一行
使用 highlight-current-row 属性
使用 row-class-name
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="节点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>
在获取列表时，调用展开详情，这只适用于一个表格
/** 查询列表 */
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循环下，或者在多个tab下的话，那么this.$refs.expandTable就是一个数组，就需要使用下列方式：
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>
调用 setCurrentRow(row, true) 设置当前行高亮，row为dataList里面的数据。
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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
