element-ui table表格展开行每次只能展开一行

https://www.jianshu.com/p/a59c22202f2c

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<template>
        <el-table
          @expand-change="expandSelect"
          type='index'
          :row-key='getRowKeys'
          :expand-row-keys="expands"
          :data="tableData" style="width: 100%"
          :default-sort = "{prop: 'payment_date', order: 'descending'}">
          <!-- 排序:default-sort sortable -->
          <el-table-column label="申请时间" prop="date_created" sortable align='left'></el-table-column>
          <el-table-column label="操作" align='left' width='100px'>
            <template slot-scope="scope">
              <button class="btn" @click="handleEdit(scope.$index, scope.row)">查看</button>
            </template>
          </el-table-column>
          <!-- expand:折叠面板 -->
          <el-table-column type="expand">
            <template slot-scope="scope">
              <div class="bottom_content">
                折叠面板 type为expand。方法:@expand-change="expandSelect"
                expand-change: 当用户对某一行展开或者关闭的时候会触发该事件
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <script>
      export default {
        data () {
          return {
            expands: [],
            getRowKeys (row) {
              return row.id
            },
            tableData: []
          }
        },
        methods: {
          // 折叠面板每次只能展开一行
          expandSelect (row, expandedRows) {
            var that = this
            if (expandedRows.length) {
              that.expands = []
              if (row) {
                that.expands.push(row.id)
              }
            } else {
              that.expands = []
            }
          },
          handleEdit (index, row) {}
        }
      }
      </script>

  https://www.jianshu.com/p/a59c22202f2c

posted @   瑞蚨祥qianjin  阅读(8020)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
点击右上角即可分享
微信分享提示