element-ui table某些行展开某些行不展开

"本文介绍了如何在Element-UI的表格组件中设置数据展开功能,通过``标签结合`row-class-name`属性控制展开图标显示,并提供了示例代码展示如何根据数据动态控制展开状态。示例中展示了数据结构和CSS样式,以隐藏不需要展开的行。"
摘要由CSDN通过智能技术生成

element ui table中,设置数据可以展开只需要设置 type="expand",

<el-table-column type="expand">
    <template slot-scope="scope">
        展开后的显示内容
    </template>
</el-table-column>

根据数据设置展开图标是否展示从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;
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值