elementUI table隐藏行

项目中遇到一个问题，就是数组中的全部内容左侧需要全部展示，右侧列表中又需要部分展示，所以右侧把不需要展示的部分隐藏掉，看了文档才发现可以实现这个内容
官方文档有说明

<template>
  <el-table border :data="editor.result" stripe style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column prop="name" label="设备名称" align="center">
      </el-table-column>
      <el-table-column label="靶机列表" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.targetId" placeholder="选择靶机" filterable :disabled="vis">
            <el-option v-for="(it, i) in targetList" :key="i" :value="it.id" :label="it.targetName">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
  </el-table>
</template>
<script>
//只需要把type='device'的展示，type='area'的隐藏掉
   tableRowClassName({ row, rowIndex }) {
        if (row.type == "area") {
          return 'hidden_box'  //可以动态添加class样式
        }
        return ''
      }
</script>
<style>
//这的style不能加scoped，否则class名添加不上
    .el-table .hidden_box {
    display: none;
  }
</style>