Vue element-ui table组件只展开一行(手风琴效果)

最新推荐文章于 2022-09-16 09:34:14 发布

前端黑眼圈

最新推荐文章于 2022-09-16 09:34:14 发布

阅读量916

点赞数 1

分类专栏： element vue

本文链接：https://blog.youkuaiyun.com/qq_36595944/article/details/117956848

版权

vue 同时被 2 个专栏收录

39 篇文章

订阅专栏

element

10 篇文章

订阅专栏

这是一个关于如何在Element UI中实现表格只展开一行的示例代码。通过设置`expand-row-keys`属性和`expandSelect`方法，确保表格在每次点击时只展开或关闭一行。代码中展示了`el-table`的用法，包括展开列模板和数据绑定。

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

 <template>
   <div class="app-content">
     <div class="table_expand_item">
       <b>element-ui table只展开一行demo</b>
       <el-table
         :data="tableData"
         :row-key="getRowKeys"
         :expand-row-keys="expands"
         border
         style="width:750px; margin-top:20px;"
         @expand-change="expandSelect">
         <el-table-column type="expand" label="展开" width="60px">
           <template>
             111
           </template>
         </el-table-column>
         <el-table-column
           prop="date"
           label="日期"
           align="center" />
         <el-table-column
           prop="name"
           label="姓名"
           align="center" />
         <el-table-column
           prop="address"
           label="地址"
           align="center" />
       </el-table>
     </div>
   </div>
 </template>
 
 <script>
 export default {
   data() {
     return {
       tableData: [{
         id: 'a',
         date: '2016-05-02',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1518 弄'
       }, {
         id: 'b',
         date: '2016-05-04',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1517 弄'
       }, {
         id: 'c',
         date: '2016-05-01',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1519 弄'
       }, {
         id: 'd',
         date: '2016-05-03',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1516 弄'
       }],
       getRowKeys(row) { // 行数据的Key
         return row.id
       },
       expands: [] // 通过该属性设置Table目前的展开行，需要设置row-key属性才能使用，该属性为展开行的keys数组
     }
   },
   methods: {
     // table每次只能展开一行
     expandSelect(row, expandedRows) {
       this.expands = []
       if (expandedRows.length > 0) {
         row ? this.expands.push(row.id) : ''
       }
     }
   }
 }
 </script>

效果图
在这里插入图片描述