element ui table中,某些行需要展开,某些行不需要展开

element ui table中,可否做到根据行数据信息来设置当前行是否有展开功能?

<el-table-column type="expand"></el-table-column>

看源码觉得这个属性不可控,求高人相助

阅读 18.4k
5 个回答

clipboard.png

clipboard.png

最终要实现的目的是这种的,现在实现的方式是从css上解决:
html

<el-table :data="tableData5" style="width: 100%" :row-class-name="setClassName">
    <el-table-column type="expand">...</el-table-column>
</el-table>

js

data() {
  return {
    tableData5: [{
      id: '12987122',
      name: '好滋好味鸡蛋仔',
      category: '江浙小吃、小吃零食',
      desc: '荷兰优质淡奶,奶香浓而不腻',
      address: '上海市普陀区真北路',
      shop: '王小虎夫妻店',
      shopId: '10333',
      expand: true
    }, {
      id: '12987123',
      name: '好滋好味鸡蛋仔',
      category: '江浙小吃、小吃零食',
      desc: '荷兰优质淡奶,奶香浓而不腻',
      address: '上海市普陀区真北路',
      shop: '王小虎夫妻店',
      shopId: '10333',
      expand: false
    }, {
      id: '12987125',
      name: '好滋好味鸡蛋仔',
      category: '江浙小吃、小吃零食',
      desc: '荷兰优质淡奶,奶香浓而不腻',
      address: '上海市普陀区真北路',
      shop: '王小虎夫妻店',
      shopId: '10333',
      expand: true
    }, {
      id: '12987126',
      name: '好滋好味鸡蛋仔',
      category: '江浙小吃、小吃零食',
      desc: '荷兰优质淡奶,奶香浓而不腻',
      address: '上海市普陀区真北路',
      shop: '王小虎夫妻店',
      shopId: '10333',
      expand: false
    }]
  }
},
methods:{
    setClassName({row, index}){
        // 通过自己的逻辑返回一个class或者空
        return row.expand ? 'expand' : '';
    },
},

css

.expand .el-table__expand-column .cell {
    display: none;
}

ele没有提供单独行展开的做法,控制不了<el-table-column type="expand"></el-table-column>的条件,而且就算上楼所说的将template标签添加是否显示,但是展开符号仍然还有,用户仍然认为是可选的,体验不好。
建议在表格数据渲染的时候将需要隐藏的展开符号行的index值保存,表格数据渲染到页面之后根据所保留的index值数组将所在行的图标标签<i class="el-icon el-icon-arrow-right"></i>隐藏(删除也可以,但是此时index值会有修改,需要注意下)

你用v-if控制<el-table-column type="expand"></el-table-column>这个不就完了

加了<el-table-column type="expand"></el-table-column>就会出现一列点选展开的向右箭头。

element-ui现在的table不能满足你根据行数据信息来设置当前行是否有展开功能的需求。

但你可以设置 v-if="props.row.canExpand" 来控制展开内容是否为空

<template slot-scope="props" v-if="props.row.canExpand">
        
</template>
新手上路,请多包涵

没看懂:row-class-name="setClassName"这个跟type有关系吗

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏