vue+elment el-table 可展开表格过滤问题

最新推荐文章于 2025-03-04 09:31:42 发布

guohongyanghy

最新推荐文章于 2025-03-04 09:31:42 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 vue Element

本文链接：https://blog.youkuaiyun.com/weixin_41562512/article/details/90485670

vue 同时被 3 个专栏收录

18 篇文章

订阅专栏

前端

17 篇文章

订阅专栏

Element

10 篇文章

订阅专栏

博客介绍了Element相关内容，一是展开内容竖向显示及横线显示可参考Element官网；二是使用过滤器filters对展开行内容进行过滤；三是简单过滤可通过条件判断，如{{a>b? '大于':‘小于’}}。

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

1、展开内容竖向显示，横线显示参考element官网
2、使用过滤器filters对展开行中的内容进行过滤
3、简单的过滤可以直接条件判断比如{{a>b ? '大于':‘小于’}}


      <el-table
        row-style="height:22px"
        cell-style="padding:0"
        style="font-size: 10px;height:100%;width:99%"
        :header-cell-style="{height:'15px', fontSize:'10px', color:'#595959', background:'#EBEEF5'}"
        ref="singleTable"
        :data="List"
        :height="tableHeight"
        :max-height="tableHeight"
        highlight-current-row
        stripe
        tooltip-effect="light"
        @current-change="handleCurrentChange"
        @selection-change="handleSelectionChange">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-row>
                <el-form-item label=" " s>
                </el-form-item>
                <el-form-item label="第一列"
                              >
                </el-form-item>
                <el-form-item label="第二列"
                              >
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="0" >
                </el-form-item>
                <el-form-item >
                  <span>{{ props.row.lable0 | filter}}</span>
                </el-form-item>
                <el-form-item >
                  <span>{{ props.row.name0 }}</span>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="1" >
                </el-form-item>
                <el-form-item >
                  <span>{{ props.row.lable1 | filter}}</span>
                </el-form-item>
                <el-form-item >
                  <span>{{ props.row.name1 }}</span>
                </el-form-item>
              </el-row>

            </el-form>
          </template>

        </el-table-column>
        <el-table-column
          type="selection"
          width="28">
        </el-table-column>

        <el-table-column
          prop="profileName"
          label="名称"
          show-overflow-tooltip="true">

        </el-table-column>

      </el-table>

filters: {
      filter: function (value) {
        if (value==='1'||value===1) return 'a'
      else if (value==='0'||value===0) return 'b'
      }
    },