element中的table使用展开行功能,特定条件下才能点开展开行以及点击整行展开,以及使用合计不显示问题

在使用element中的table使用展开行功能时,官网给的示例中每行都可以展开,以及只能通过点击展开图标才能展开,但是需求中是点击整行展开,以及只有某些符合条件的行才有展开功能如下图所示:

通过设置 type=“expand” 和 Scoped slot 可以开启展开行功能,el-table-column 的模板会被渲染成为展开行的内容,展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。

官网给的示例,每行都可以展开,以及只能通过点击展开图标才能展开


element中的table使用展开行功能,特定条件下才能点开展开行以及点击整行展开,以及使用合计不显示问题_第1张图片

点击整行展开,以及只有某些符合条件的行才有展开功能

一个偏方:

  1. 用 row-class-name 给不需要展开的行添加一个类
  2. 给这个类的所在行的expand这一列设置visibility:hidden样式
  3. 点击行的时候调用 this.$refs.expandTable.toggleRowExpansion(row, expanded);





效果图如下:
element中的table使用展开行功能,特定条件下才能点开展开行以及点击整行展开,以及使用合计不显示问题_第2张图片

注意:element文档中Table Events是事件通过@row-click调用,而Table Methods是方法可以通过ref进行调用this.$refs.autofixElTable.toggleRowExpansion(row, row.expanded);

使用show-summary在表尾显示合计行却不显示问题

不可以给el-table设置固定高度否则会失效

你可能感兴趣的:(工作中的坑,vue,javascript,前端,vue.js)