Element: [Feature Request] can table-column dynamically set type="expand"

Created on 11 Apr 2018  ·  2Comments  ·  Source: ElemeFE/element

Existing Component

yes

Component Name

table-column

Description

i am using el-table to render a dataset like this

<el-table :data="data">
  <el-table-column type="expand">
    <template slot-scope="props" v-if="props.row.children.length > 0">
      <el-form inline label-position="left" v-for="child in props.row.children">
        <el-form-item label="age">
          <span>{{child.id}}</span>
        </el-form-item>
        <el-form-item label="sex">
          <span>{{child.name}}</span>
        </el-form-item>
      </el-form>
    </template>
  </el-table-column>
  <el-table-column label="id" prop="id">
  </el-table-column>
  <el-table-column label="name" prop="name">
  </el-table-column>
</el-table>
data = [
  {
    id: '1',
    name: 'test',
    children: [
      { id: '12', name: 'test-child' },
      { id: '13', name: 'test-child2' },
    ],
  },
  {
    id: '2',
    name: 'test2',
    children: [],
  },
]

jsfiddle example here

image

each row has a children array, i use expandable row to render children <el-table-column type="expand">.
the problem is when the children is an empty array, and i want to hidden expend icon in the row.
so can i set the type="expand" dynamically in el-table-column element ?

it seems i can't get data context like slot-scope="props" in el-table-column

Most helpful comment

Sorry, we have no plan to support this. I'm afraid you'll have to manipulate DOM directly: https://jsfiddle.net/leopoldthecuber/8yseucbe/13/

All 2 comments

Sorry, we have no plan to support this. I'm afraid you'll have to manipulate DOM directly: https://jsfiddle.net/leopoldthecuber/8yseucbe/13/

I've also struggled with this case. Interesting way to handle it. Thank you

Was this page helpful?
0 / 5 - 0 ratings