聚美优品网站建设主题,怎么做网站的优化,sem培训班,天津企业做网站多少钱Element中table默认支持的#xff0c;展开和收起功能#xff0c;如下#xff1a;
针对表格的展开收起#xff0c;本文改造的主要有3点#xff1a; 1、修改展开/收起的图标#xff1b; 2、对于不支持展开/收起的行#xff0c;隐藏图标#xff1b; 3、点击行#xff0…Element中table默认支持的展开和收起功能如下
针对表格的展开收起本文改造的主要有3点 1、修改展开/收起的图标 2、对于不支持展开/收起的行隐藏图标 3、点击行就可以展开/收起对应的内容。
1、修改图标
这个单纯的样式还是挺好改的。
el-table classtable-wrap/el-tablestyle langless
.table-wrap {.el-table__expand-icon {-webkit-transform: rotate(0deg);transform: rotate(0deg);}.el-table__expand-icon .el-icon-arrow-right:before {content: \e6d9;border: 1px solid #ccc;padding: 1px;}.el-table__expand-icon--expanded .el-icon-arrow-right:before {content: \e6d8;}
}
/style效果如下
2、不可展开行隐藏图标
这个实现是通过给el-table中不可展开的行增加一个样式利用el-table行的 className 的回调方法row-class-name
el-table :row-class-namegetRowClass/el-tablemethods: {getRowClass({ row }) {if (!row.children) return hide-expand;}
}style// 没有展开行时隐藏展开/折叠操作按钮.hide-expand {td:first-child .cell {visibility: hidden;}}
/style效果如下
3、点击行展开/收起
利用el-table的row-click事件和toggleRowExpansion方法。
同时可以进行限制只能展开一行还是都可以展开。 本文完整代码
templatedivel-button typeprimary clickopenAll true可展开全部/el-buttonel-button typeprimary clickopenAll false只能展开一个/el-buttonel-table:datatableData:row-class-namegetRowClass:bordertrue:stripetruerow-clickclickRowclasstable-wrapreftableRefel-table-column typeexpand aligncenter width80template slot-scope{ row }展开行childre: {{ row.children }}/template/el-table-columnel-table-columnv-foritem in header:keyitem.key:labelitem.value:propitem.key:sortableitem.sortable ? item.sortable : falsealigncenter/el-table-column/el-table/div
/templatescript
export default {data() {return {openAll: true,header: [{key: id,value: ID},{key: title,value: 名称},{key: tag,value: 标签},{key: typeText,value: 方式},{key: cycle,value: 周期},{key: status,value: 状态}],tableData: [{id: 1,title: test111122222,tag: ,typeText: 定时任务,cycle: 每天 9:00,status: 草稿,sortable: true,children: [{id: 11,title: test1-1,tag: ,typeText: 定时任务,cycle: 每天 9:00,status: 草稿}]},{id: 2,title:名称很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长,tag: hhh,typeText: 定时任务,cycle: 每天 12:00,status: 草稿,children: [{id: 21,title: test1-1,tag: ,typeText: 定时任务,cycle: 每天 9:00,status: 草稿}]},{id: 3,title: 测试测试测试,tag: hhh,typeText: 定时任务,cycle: 每天 00:00,status: 草稿,children: [{id: 31,title: test1-1,tag: ,typeText: 定时任务,cycle: 每天 9:00,status: 草稿},{id: 32,title: test3-2,tag: ,typeText: 定时任务,cycle: 每天 9:00,status: 草稿}]},{id: 4,title: 嗯嗯嗯,tag: hhh,typeText: 定时任务,cycle: 每天 10:00,status: 草稿,children: []},{id: 5,title: test,tag: null,typeText: 循环任务,cycle: 每天 19:00,status: 正式}]};},methods: {getRowClass({ row }) {if (!row.children || !Array.isArray(row.children) || !row.children.length) return hide-expand;},clickRow(row, index, e) {if (row.children) {const $table this.$refs.tableRef;this.tableData.map(item {// 可以全部都展开if (this.openAll) {item.expanded !item.expanded;} else {// 同一时间只能展开一个if (row.id ! index.id) {$table.toggleRowExpansion(item, false);item.expanded false;} else {item.expanded !item.expanded;}}});$table.toggleRowExpansion(row);}}}
};
/scriptstyle langless
.table-wrap {.el-table__expand-icon {-webkit-transform: rotate(0deg);transform: rotate(0deg);}.el-table__expand-icon .el-icon-arrow-right:before {content: \e6d9;border: 1px solid #ccc;padding: 1px;}.el-table__expand-icon--expanded .el-icon-arrow-right:before {content: \e6d8;}// 没有展开行时隐藏展开/折叠操作按钮.hide-expand {td:first-child .cell {visibility: hidden;}}
}
/style完整效果
