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

2020-06-17  本文已影响0人  一只小菜猿

一:应用场景

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

调用代码如下

    <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为无的数据给筛选掉达到数据筛选的效果,同时还不影响其他模块调用这个接口

上一篇 下一篇

猜你喜欢

热点阅读