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

Posted 南风晚来晚相识

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了element-ui表格展开行每次只能展开一行相关的知识，希望对你有一定的参考价值。

element-ui表格展开行每次只能展开一行
<template>
  <el-table
    :data="tableData"

    :expand-row-keys="expands"
    :row-key=\'getRowKeys\'
    @expand-change="expandChangeHandler"

    >
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <span> props.row.name </span>
          </el-form-item>
          <el-form-item label="所属店铺">
            <span> props.row.shop </span>
          </el-form-item>
        </el-form>
      </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>
</template>

<script>
  export default 
    data() 
      return 
        tableData: [
          id: \'12987122\',
          name: \'好滋好味鸡蛋仔\',
          category: \'江浙小吃、小吃零食\',
          desc: \'荷兰优质淡奶，奶香浓而不腻\',
          address: \'上海市普陀区真北路\',
          shop: \'王小虎夫妻店\',
          shopId: \'10333\'
        , 
          id: \'12987123\',
          name: \'好滋好味鸡蛋仔\',
          category: \'江浙小吃、小吃零食\',
          desc: \'荷兰优质淡奶，奶香浓而不腻\',
          address: \'上海市普陀区真北路\',
          shop: \'王小虎夫妻店\',
          shopId: \'10333\'
        , 
          id: \'12987125\',
          name: \'好滋好味鸡蛋仔\',
          category: \'江浙小吃、小吃零食\',
          desc: \'荷兰优质淡奶，奶香浓而不腻\',
          address: \'上海市普陀区真北路\',
          shop: \'王小虎夫妻店\',
          shopId: \'10333\'
        ],
        getRowKeys(row) 
          return row.id;
        ,
        //存放展开的id
        expands: [],
      
    ,
    methods:
      // 点击展开的时候就会触发这个方法
      expandChangeHandler(row, expandedRows) 
        console.log(\'expandedRows\',expandedRows)
        console.log(\'row\',row)
        if (expandedRows.length) 
          this.expands = [];
          if (row) 
            this.expands.push(row.id);
          
         else 
          this.expands = [];
        
      
    
  
</script>
<style>
.demo-table-expand 
  font-size: 0;

.demo-table-expand label 
  width: 90px;
  color: #99a9bf;

.demo-table-expand .el-form-item 
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;

</style>

以上是关于element-ui表格展开行每次只能展开一行的主要内容，如果未能解决你的问题，请参考以下文章

如何使表格行可点击并展开行 - vue.js - element-ui

Table展开行

Ant Design Vue 嵌套表格每次仅展开一行

Antd table的expandedRowRender额外展开行以及注意事项

Ant Design Vue子表格展开只展开一行，其他行折叠#yyds干货盘点#

iView中表格(Table)添加点击行，展开扩展，默认展开所有行