Element: [table]根据条件来判断该行能否展开

Created on 8 Feb 2017  ·  4Comments  ·  Source: ElemeFE/element

hi:
我想要这样一个功能:
在table中,如果某一行满足某个条件,则这行可以展开。
翻了文档后,没有找到相应的方法或者属性。
想通过获取当前行数据再加上v-if指令,如下:

<el-table-column type="expand" v-if="currentRow.XXX">

但是没有找到相关的办法在 标签中获取当前行的数据,只能通过slot等来获取。
请问下如何在中获取当前行的数据?
ps: git chat room 里面也没有人回答我,只好来这里了。

Most helpful comment

我找到了一个偏方:

  1. row-class-name 给不需要展开的行添加一个类
  2. 给这个类的所在行的expand这一列设置visibility:hidden样式,

大体代码如下:

<template>
  <el-table :data=tabledata :row-class-name="getRowClass">
    ...
  </el-table>
<template>
<script>
// ...
methods: {
  getRowClass: function (row, index) {
    if(row.canExpand)
      return ''
    else
      return 'hide-expand'
  }
}
// ...
</script>
<style>
.hide-expand{
  visibility:hidden
}
</style>

All 4 comments

但是没有找到相关的办法在 标签中获取当前行的数据

通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据,

我倾向于用scoped slot+详情按钮实现,话说我不是在gitter里回复过了?

我倾向于用scoped slot+详情按钮实现

我想要的那种处理,估计相当于动态添加行(column),估计不太好实现吧,毕竟对于table来说,通常head是固定行。

不过还是谢谢了~

我找到了一个偏方:

  1. row-class-name 给不需要展开的行添加一个类
  2. 给这个类的所在行的expand这一列设置visibility:hidden样式,

大体代码如下:

<template>
  <el-table :data=tabledata :row-class-name="getRowClass">
    ...
  </el-table>
<template>
<script>
// ...
methods: {
  getRowClass: function (row, index) {
    if(row.canExpand)
      return ''
    else
      return 'hide-expand'
  }
}
// ...
</script>
<style>
.hide-expand{
  visibility:hidden
}
</style>
Was this page helpful?
0 / 5 - 0 ratings

Related issues

mochenxm picture mochenxm  ·  3Comments

yuchonghua picture yuchonghua  ·  3Comments

FranzSkuffka picture FranzSkuffka  ·  3Comments

yubo111 picture yubo111  ·  3Comments

chenzhe-pro picture chenzhe-pro  ·  3Comments