您现在的位置是:网站首页> 编程资料编程资料
Vue el-table 默认展开某一行的实例_vue.js_
2023-05-24
333人已围观
简介 Vue el-table 默认展开某一行的实例_vue.js_
Vue el-table 默认展开某一行
需求是在另外一个页面选择IP地址直接到这个页面,并需要默认展开选择的那一行
代码如下:
{{ props.row.ip }} {{ props.row.country }} {{ props.row.purchaseDate }} {{ props.row.expiryDate }}
在获取列表时,调用展开详情,这只适用于一个表格
/** 查询列表 */ 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 ''; },如果是当前行时,返回不同的样式。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- JavaScript设计模式之单例模式_javascript技巧_
- vue前端项目打包成Docker镜像并运行的实现_vue.js_
- SpringBoot+Vue项目线上买菜系统源码展示_vue.js_
- vue如何判断数组中的对象是否包含某个值_vue.js_
- Vue 关闭当前页、关闭当前标签tagsView的实现方法_vue.js_
- wasm+js实现文件获取md5示例详解_JavaScript_
- Vue中的@blur事件 当元素失去焦点时所触发的事件问题_vue.js_
- vue实现tagsview多页签导航功能的示例代码_vue.js_
- vue中关于trigger的用法_vue.js_
- JavaScript最少知识原则介绍与体现_javascript技巧_
