您现在的位置是:网站首页> 编程资料编程资料

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

2023-05-24 333人已围观

简介 Vue el-table 默认展开某一行的实例_vue.js_

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 '';     },

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

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

-六神源码网