如何使用element-uitableexpand展开行实现手风琴效果-创新互联

这篇文章主要介绍如何使用element-ui table expand展开行实现手风琴效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了张家港免费建站欢迎大家使用！

先展示一下ElementUI官方提供的示例代码效果图

可以看到官方代码中在这边没有让这个可展开table自动折叠的功能，我点击了别的标签页后上次点击的行仍旧处在一个展开的状态，而且操控的方式也只能点击到左上角的小箭头才可以控制行的展开状态，体验不是特别好，可以说有点糟糕了，但是我后来在后面的文档中发现The methods 里面有写到一个方法叫toggleRowExpansion，这个方法应该是官方本意上想让我们来自由控制展开状态的，从传递的两个参数来看，一个是row（当前点击的行id），另一个是expended（行展开状态，boolean值），看上去有理有据，但是就是不知道怎么用，因为我始终无法获取到expended这个参数的值，有点气，所以这次我们用另一种方式来实现这个功能。

代码实现：

核心是 row-key、expand-row-keys属性

特别要注意的是row-key传入的是一个Function(row)，而expand-row-keys传入的是一个数组，元素的值是要展开的row的key。

row-key这个属性是获取当前行号的，expand-row-keys这个属性是获取到展开的行号的，所以前者为一个单值，而后者是一个数组形式，所以这个属性也同样适用于表格多选列这种情况。

<el-table
        :data="compony"
        
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        @current-change="toggleRowExpansion">
        <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.com_name }}</span>
           </el-form-item>
           <el-form-item label="下属电厂ID">
            <span>{{ props.row.fct_id }}</span>
           </el-form-item>
           <el-form-item label="电厂名称">
            <span>{{ props.row.fct_name }}</span>
           </el-form-item>
           <el-form-item label="用户名">
            <span>{{ props.row.user_name }}</span>
           </el-form-item>
           <el-form-item label="密码">
            <span>{{ props.row.password }}</span>
           </el-form-item>
           <el-form-item label="加入时间">
            <span>{{ props.row.join_time | formatDate}}</span>
           </el-form-item>
           <el-form-item label="离开时间">
            <span>{{ props.row.leave_time }}</span>
           </el-form-item>
          </el-form>
         </template>
        </el-table-column>
        <el-table-column
         label="公司 ID"
         prop="com_id">
        </el-table-column>
        <el-table-column
         label="公司名称"
         prop="com_name">
        </el-table-column>
        <el-table-column label="操作">
         <template slot-scope="scope">
          <el-button
           size="mini"
           @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
           size="mini"
           type="danger"
           @click="handleDelete(scope.$index, scope.row)">删除</el-button>
         </template>
        </el-table-column>
       </el-table>

这边因为要涉及到我项目最终实现的效果，所以我这里就直接把我的整个table都复制上来了，这边的重点主要是table的各个属性，也就是这个代码段的开头，我们在这里涉及到了一个新的监听事件@current-change="toggleRowExpansion"，这个事件表示切换行的时候会有一个触发的事件发生，我们在获取了行id，展开行id之后，还要去data里面定义我们所要用到的数据框架。

 data() {
   return {
    compony:[],
    // 获取row的key值
    getRowKeys(row) {
      return row.id;
    },
    form: {},
    // 要展开的行，数值的元素是row的key值
    expands: [],
   }
  },

这边我就展示所需要用到的数据布置了，通过getRowKeys方法获取到row的行id值，定义一个expands展开行的数组，最后是业务逻辑代码

 data() {
   return {
    compony:[],
    // 获取row的key值
    getRowKeys(row) {
      return row.id;
    },
    form: {},
    // 要展开的行，数值的元素是row的key值
    expands: [],
   }
  },

因为我们现在只要求展开一行，所以每次把需要展开行的id储存进数组时要先清空一次数组，然后在push进去，最终实现效果图

以上是“如何使用element-ui table expand展开行实现手风琴效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站栏目：如何使用element-uitableexpand展开行实现手风琴效果-创新互联
文章路径：https://www.cdcxhl.com/article30/dehhso.html

成都网站建设公司_创新互联，为您提供网站设计公司、小程序开发、网站建设、响应式网站、全网营销推广、软件开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联