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

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

作者: 一只小菜猿 | 来源:发表于2020-06-17 10:34 被阅读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为无的数据给筛选掉达到数据筛选的效果,同时还不影响其他模块调用这个接口

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/aqvjxktx.html