美文网首页
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中筛选数组数据,控制表格中某一行不显

    一:应用场景 由于其他模块跟该页面共用一个接口,该页面不想显示接口中的某一条数据。 调用代码如下 处理数据 这样就...

  • jquery表格应用

    单选框控制表格行高亮 复选框控制表格行高亮 表格点击展开关闭 表格内容筛选

  • layui数据表格使用笔记

    数据渲染: 数据筛选,表格重载 模板引擎+多重条件判断 监听行工具

  • 利用excel切片器数据筛选

    在Excel表格中筛选数据,一般是这样的: 打开筛选按钮,然后去掉全选,然后从下拉中勾选要筛选的内容 如果要筛选很...

  • vue 改变了数组对象里的值,页面不刷新

    element ui 的表格组件数据存放在数组 tableData中,当我在页面上改变数据时,从控制台可以看到ta...

  • 2018-11-16 让我窃喜的筛选

    我每天工作中要接触N次的表格,筛选是表格中不不可少的操作。但对汇总的结果却从来没有想过要把筛选后的数据进行...

  • nz-table 动态合并行

    如图所示,要在表格中展示动态的行数据,蓝框中为后台返回的单个数组对象元素 关键点在于控制 td 的显示,仅在 in...

  • 学习小组Day6笔记—小森

    新知识 命令作用mutate新增列select按列筛选filter筛选行arrange按某一列或某几列对整个表格进...

  • Java图形化:Swing表格的使用

    在JTable类中除了默认的构造方法之外,还提供了利用指定表格列名数组和表格数据数组创建表格的构造方法,如下: J...

  • flask 多条件查询

    筛选的时候会遇到多个筛选条件,但都是非必填的把存在的筛选条件添加到数组中,然后进行解包最后把解包后的数据添加到筛选条件中

网友评论

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

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