Element-ui的Table表格展开行功能

Posted 2023-05-11

参考技术A 业务需要表格能够展开某一行，但组件中只能展开所有行，或者用table的树形数据（row 中需包含 children字段），可以通过控制 row-class-name 来定义表格中需要展开的行。

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>

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。

作者：晚来南风晚相识
出处：https://www.cnblogs.com/IwishIcould/

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！

如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！

万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！

支付宝

微信

本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
如果文中有什么错误，欢迎指出。以免更多的人被误导。