vue element ui 表格 点击行只显示一行

借鉴:添加链接描述

使用 toggleRowExpansion

补充内容:

                      data() {
                          return {
                              tableData: list,
                              //⭐展开的内容表格数据
                              versionData: [],
                              currentPage: 1,
                              pagesize: 10,
                              loading: true,
                              getRowKeys(row) { return row.id },
                              expands: [],
                              //⭐ 判断是否打开
                              isOpen: false,
                              //保存上一次点击的行
                              lastRow:{}

                          }
                      },
                         methods: {
                         //⭐
                          cellClick(row, column, event) {
                              var that = this
                              this.$refs.multipleTable.toggleRowExpansion(that.lastRow, false)
                              if (row == that.lastRow) {
                                  // that.isOpen = !that.isOpen
                                  if (that.isOpen == true) {
                                      //本来已经打开
                                      //改成关闭
                                      that.isOpen = false
                                          //
                                      that.$refs.multipleTable.toggleRowExpansion(that.lastRow, false)
                                  } else {
                                      //本来是关闭
                                      //改成打开
                                      that.isOpen = true
                                      that.$refs.multipleTable.toggleRowExpansion(row)
                                          //获取展开内容的表格数据

                                      var file_id = row.id
                                      getVersion(file_id).then(list => {
                                          that.versionData = list
                                      })
                                  }

                              } else {
                                  that.isOpen = true
                                  if (event.cellIndex != 0) {
                                      this.$refs.multipleTable.toggleRowExpansion(row)
                                      this.lastRow = row

                                      //获取展开内容的表格数据
                                      var file_id = row.id
                                      getVersion(file_id).then(list => {
                                          that.versionData = list
                                      })
                                  }
                              }

                          },


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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值