Vue Element-ui table只展开一行

最新推荐文章于 2025-01-08 11:52:36 发布

weixin_34061042

最新推荐文章于 2025-01-08 11:52:36 发布

阅读量370

点赞数

CC 4.0 BY-SA版权

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/ykCoder/p/11046462.html

博客建议结合Element - UI官方文档阅读代码，以快速搞懂其原理，还给出了转载来源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码了哈~

 1 <template>
 2   <div class="app-content">
 3     <div class="table_expand_item">
 4       <b>element-ui table只展开一行demo</b>
 5       <el-table
 6         :data="tableData"
 7         :row-key="getRowKeys"
 8         :expand-row-keys="expands"
 9         border
10         style="width:750px; margin-top:20px;"
11         @expand-change="expandSelect">
12         <el-table-column type="expand" label="展开" width="60px">
13           <template slot-scope="scope">
14             我是表格行展开的信息{{ scope.$index + 1 }}
15           </template>
16         </el-table-column>
17         <el-table-column
18           prop="date"
19           label="日期"
20           align="center" />
21         <el-table-column
22           prop="name"
23           label="姓名"
24           align="center" />
25         <el-table-column
26           prop="address"
27           label="地址"
28           align="center" />
29       </el-table>
30     </div>
31   </div>
32 </template>
33 
34 <script>
35 export default {
36   data() {
37     return {
38       tableData: [{
39         id: 'a',
40         date: '2016-05-02',
41         name: '王小虎',
42         address: '上海市普陀区金沙江路 1518 弄'
43       }, {
44         id: 'b',
45         date: '2016-05-04',
46         name: '王小虎',
47         address: '上海市普陀区金沙江路 1517 弄'
48       }, {
49         id: 'c',
50         date: '2016-05-01',
51         name: '王小虎',
52         address: '上海市普陀区金沙江路 1519 弄'
53       }, {
54         id: 'd',
55         date: '2016-05-03',
56         name: '王小虎',
57         address: '上海市普陀区金沙江路 1516 弄'
58       }],
59       getRowKeys(row) { // 行数据的Key
60         return row.id
61       },
62       expands: [] // 通过该属性设置Table目前的展开行，需要设置row-key属性才能使用，该属性为展开行的keys数组
63     }
64   },
65   methods: {
66     // table每次只能展开一行
67     expandSelect(row, expandedRows) {
68       this.expands = []
69       if (expandedRows.length > 0) {
70         row ? this.expands.push(row.id) : ''
71       }
72     }
73   }
74 }
75 </script>