Element: [Feature Request] Make expandable row property more flexible

[Chalkin]

Existing Component

Yes

Component Name

element ui tables

Description

Currently I have not found any way to decide wether a single row is expandable or not. Currently it's either all rows are exandable or none. But I do have a use case in which some rows does have child items and others don't. For the rows without child items I don't need the row to be exandable. For the ones with child items the row should be exandable.

How could this be implemented?

[imqishi]

I also need this...
Maybe we do not need add one column to expand a row, just click one column's data and that row expands...

[gdutwyg]

do you solve it that click one column's every area and that row expands ？？？ @imqishi

[Chalkin]

No, I can't solve it this way because I have action buttons in a row as well. If I would make the whole row clickable, the action buttons woun't work anymore

[gdutwyg]

@Chalkin if i want to make the whole row clickable, click the row and the row expands ， what should i do?

[imqishi]

@gdutwyg @Chalkin I solved it by using a trick... It needs DOM change manually and Vue's extend method. see https://vuejs.org/v2/api/#Vue-extend

For example, first I add a class to label element that I want to append, when click action triggered, I use jQuery(or you can just origin javascript) create a after the labeled element's . then you can use Vue.extend() method create a virtual dom then .$mount it on .

This method's main advantage is we can write the "append dom" in extend method just like you write other vue file. All element UI's components can be used here....

But the disadvantage is that you should manage these append dom (the mount point) by yourself, remember clear them in beforeDestroy.

By the way, if you want extend's html use the parent vue file's class, it might be invalid if you use "scoped", so I use style or give parent's page's root element a unique class then use .RootClass .subclass {} and delete "scoped" keyword. And if you want to use "this" keyword, remember distinguish "this" in extend method and outside.

[rnvitter]

an easy work around would be to add the row-class-name attribute and call a custom method
:row-class-name="getClasses"
and then in the method do the check you want to see if there's any data for an expandable table and return a class name such as 'no-expand' or 'expandable' then add some css classes like this to hide and disable the button

.no-expand .el-icon {
    display: none;
  }
  .no-expand .el-table__expand-icon {
    pointer-events: none;
  }

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[JeronimoCarrizo]

I think this functionality should be provider by the component it-self.