关于element-ui table 用按钮控制 使table 全部打开和隐藏

1 首先要用到他的一个属性 row-key
2 还有就是 expand-row-keys

第一步

    <el-button type="primary" @click="hangshou">全部显示</el-button>
    <el-button type="success" @click="hanghide">全部隐藏</el-button>
    <el-table
      :data="tableData5"
      style="width: 100%"
      :expand-row-keys="expends"
      :row-key="getRowKeys">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table
            ref="multipleTable"
            :data="tableData3"
            style="width: 100%">
            <el-table-column
              label="日期"
              align="left">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              align="center"
              width="150">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址"
              width="150"
              align="center"
              show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        label="商品 ID"
        prop="id">
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="name">
      </el-table-column>
      <el-table-column
        label="描述"
        prop="desc">
      </el-table-column>
    </el-table>
    
    
    第二步
    
    
      data () {
        return {
            expends: [],
        },
        methods: {
          getRowKeys (row) {
            return row.id
          },
          // 全部隐藏
          hanghide () {
            this.expends = []
          },
          // 全部显示
          hangshou () {
            var tranId = this.tableData5.map(item => item.id)
            this.expends = tranId
          },
          
          
  这样就能应按钮控制table 的去全部展示 和 隐藏了
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值