Vue-Element-UI中筛选数组数据,控制表格中某一行不显示

一:应用场景

由于其他模块跟该页面共用一个接口,该页面不想显示接口中的某一条数据。

调用代码如下

    <el-table
      v-loading="listLoading"
      :data="tableDataNew"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      row-key="testId"
      border
      stripe
    >
      <el-table-column align="left" label="分类名称" prop="testName"/>
      <el-table-column align="center" label="描述" prop="testDesc"/>
      <el-table-column :formatter="dateFormat" align="center" label="创建时间" prop="createdTime" />
      <el-table-column align="center" label="操作" width="300px">
        <template slot-scope="scope">
          <div>
            <el-button type="primary" size="mini" plain @click="moveUp(scope.row)">上移</el-button>
            <el-button type="primary" size="mini" plain @click="moveDown(scope.row)">下移</el-button>
            <el-button type="primary" size="mini" @click="modify(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="dropRow(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

处理数据

computed: {

tableDataNew:function() {

return this.fieldData.filter((data) => {

return data.testName !=='无'

    })

}

}

这样就可以把数据中testName为无的数据给筛选掉达到数据筛选的效果,同时还不影响其他模块调用这个接口

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容