zoukankan      html  css  js  c++  java
  • element-ui表格展开行每次只能展开一行

    代码:

    <template>
      <el-table
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        :data="tableData"
        :default-sort = "{prop: 'payment_date', order: 'descending'}"
        type="index"
        style=" 100%"
        @expand-change="expandSelect">
        <!-- 排序:default-sort sortable -->
        <el-table-column label="申请时间" prop="date_created" sortable align="left"/>
        <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: [// table数据
            {
              date_created: 'fsdaf',
              id: '333'
    
            },
            {
              date_created: 'fsdreraf',
              id: 'erer'
    
            }
          ]
        }
      },
      methods: {
        // 折叠面板每次只能展开一行
        expandSelect(row, expandedRows) {
          // console.log('expandedRows', expandedRows)
          // console.log('row', row)
          var that = this
          if (expandedRows.length) {
            that.expands = []
            if (row) {
              that.expands.push(row.id)// 每次push进去的是每行的ID
            }
          } else {
            that.expands = []// 默认不展开
          }
          // console.log('that.expands', that.expands)
        },
        handleEdit(index, row) {}
      }
    }
    </script>

    参照这个博客园自己写的demo:https://www.jianshu.com/p/a59c22202f2c

  • 相关阅读:
    Java8 Period.between方法坑及注意事项
    mybatis入门-第一个程序
    mybatis入门-框架原理
    初识servlet--未完成
    初识servlet
    session是什么
    session工作原理简介
    笔记本维修介绍
    j2se 总结
    maven
  • 原文地址:https://www.cnblogs.com/wangliko/p/11046090.html
Copyright © 2011-2022 走看看