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

目录

• Vue el-table 默认展开某一行
• el-table 高亮某一行
• 使用 highlight-current-row 属性
• 使用 row-class-name

Vue el-table 默认展开某一行

需求是在另外一个页面选择IP地址直接到这个页面，并需要默认展开选择的那一行

代码如下：

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

/** 查询列表 */
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 属性。

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

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

如果要改变默认的高亮的颜色。这样就把项目中所有el-table的高亮颜色都改了。

使用 row-class-name

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

如果是当前行时，返回不同的样式。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。