vue中map()和filter()的使用—vue中隐藏表格整行

.filter()的使用：方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

语法：

const arr= [32, 33, 16, 40];
const arr1 = arr.filter(item => item >= 18)
console.log(arr)   // [32, 33, 16, 40]
console.log(arr1)  // [32, 33, 40]

map()的使用：方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值；

map() 方法按照原始数组元素顺序依次处理元素。

语法：

const arr= [4, 9, 16, 25];
const arr1 = arr.map(item => item+2)
console.log(arr)   // [4, 9, 16, 25]
console.log(arr1)  // [6, 11, 18, 27]

------------------------------map()方法的具体使用-------------------------

<el-table v-loading="loading" :data="projectRoleList" @selection-change="handleSelectionChange" >
  <el-table-column type="selection" width="55" align="center" />
  <el-table-column label="部门" align="center" prop="deptName" />
  <el-table-column label="项目" align="center" prop="projectName" />
  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
    <template slot-scope="scope">
      <el-button
        size="mini"
        type="text"
        icon="el-icon-edit"
        @click="handleUpdate(scope.row)"
      >修改</el-button>
      <el-button
        size="mini"
        type="text"
        icon="el-icon-delete"
        @click="handleDelete(scope.row)"
      >删除</el-button>
    </template>
  </el-table-column>
</el-table>

// 多选框选中数据
handleSelectionChange(selection) {
  this.ids = selection.map(item => item.projectId);
  this.projectNameIds = selection.map(item => item.projectName);  //map的使用
  this.single = selection.length!=1
  this.multiple = !selection.length
},

------------------------------filter()方法的具体使用-------------------------

后台数据

//表格数据-获取部门项目信息
projectList(){
  this.loading = true;
  listProject(this.queryParams).then(response=>{
    // console.log(response.rows)
    this.projectRoleList = response.rows.filter(v => v.delFlag !== 2);   //filter的使用
     //-----delFlag=2隐藏删除整行---------
    response.total = this.projectRoleList.length;
    this.total = response.total;
    this.loading = false;
  });
},