element-table 隐藏行

向前跑丶加油

于 2022-04-21 10:56:41 发布

阅读量4.3k

点赞数 7

分类专栏：开发前端文章标签： elementui vue 前端 javascript

本文链接：https://blog.csdn.net/m0_37128767/article/details/124316315

版权

开发同时被 2 个专栏收录

15 篇文章

订阅专栏

前端

12 篇文章

订阅专栏

这篇博客介绍了如何利用Element UI的表格组件（el-table）进行数据展示，并通过`rowClassName`属性和自定义回调方法实现特定行的隐藏显示。在回调函数中，根据`belongType`和`row.type`的比较来决定是否应用`showRow`类，从而控制行的显示状态。当`showRow`类被应用时，行将通过CSS设置为隐藏。

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

      <el-table
        ref="multipleTable"
        :data="vehicleList"
        border
        :show-header="true"
        max-height="180"
        @selection-change="handleSelectionChange"
        :row-class-name="rowClassName" //回调行 的样式，通过这个回调放法控制隐藏显示
      >
      </el-table>

    //每一行的回调方法
    rowClassName: function ({ row }) {
      if (!this.belongType) {
        return;
      }
      if (row.type !== this.belongType) {
        return "showRow";
      }
    },