Vue|Vue el-table 默认展开某一行的实例 Vueel-table默认展开某一行的实例

Vue el-table 默认展开某一行
el-table 高亮某一行

使用 highlight-current-row 属性
使用 row-class-name

Vue el-table 默认展开某一行需求是在另外一个页面选择IP地址直接到这个页面，并需要默认展开选择的那一行
代码如下：

在获取列表时，调用展开详情，这只适用于一个表格

/** 查询列表 */getList() {this.nodeList = []; // 从URL中获取的对应的主键IDconst 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 属性。

调用 setCurrentRow(row, true) 设置当前行高亮，row为dataList里面的数据。