element怎么隐藏某一列中的一项按钮?

如图:想把前两个删除按钮隐藏,但是最后一个不隐藏,页面结构如下怎么写?

      <el-table-column label="操作" width="200%">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">分配菜单</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>

https://img1.mukewang.com/5b826d150001772b08000289.jpg

喵喵时光机
浏览 4318回答 1
1回答

慕侠2389804

这个按钮的显隐也直接绑定在data里面,在button上面用v-show="scope.row.allowDelete控制补充:你的表单数据应该是类似的结构let&nbsp;tableData&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:"123",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;number:123, &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:"456",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;number:456, &nbsp;&nbsp;&nbsp;&nbsp;} ]你可以将其补充为let&nbsp;tableData&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:"123",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;number:123,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;allowDelete:true, &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:"456",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;number:456,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;allowDelete:false, &nbsp;&nbsp;&nbsp;&nbsp;}]然后在slot里,<button v-show="scope.row.allowDelete">删除</button>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Vue.js