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

    xiaoxiao2022-07-13  155

    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' } },

     

    最新回复(0)