vue-element dropdown 要怎么隐藏一个el-dropdown-item？

Question

在一个表格的最右端的列模板写成一个dropdown，使用该dropdown菜单作为该表格操作的功能集合。这个页面的加载之前作会做权限查询，如果没有权限则某些el-dropdown-item项目不显示。如果是在jquery的环境下，则是在页面加载的时候使用Hide方法传入隐藏需要隐藏操作ui的id或者是class。但既然使用了Vue-element这个框架，那就不能使用jquery了。

但查阅了element官方组件文档的el-dropdown-item部分。没有发现设置菜单项的隐藏属性，但有一个disabled。这个可以禁用，但是权限既然不能让某人使用，那么更不能让人看到，所以怎么隐藏一个el-dropdown-item，js代码或html也行。如果是用css的visibility: collapse;，那会留下一段空白。这样在用户看来也不是太好。

当然还有一种有效的方法，就是使用后端的模板引擎的if判断权限，虽然我会这样搞。但这样前后端耦合就多了。这个是万不得已才会用的，我更希望是在前端搞。

代码

<el-table-column

        fixed="right"
        label="操作"
        width="100%">
        <template slot-scope="scope" >
          <el-dropdown @command="handleClick(scope.row)" >
            <el-button type="primary"  >
              更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a" >黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item ref="messageDrop"  >螺蛳粉</el-dropdown-item>
              <el-dropdown-item disabled >双皮奶</el-dropdown-item>
              <el-dropdown-item divided >蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>

Answer 1

建议你先阅读下vue文档

vue中有两个非常基础的语法v-if 和 v-show，都可以很好的解决这个问题