elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
程序员文章站
2023-11-28 20:24:28
在做后台管理系统中遇到一个需求, 点击一个按钮可以变换里面字的内容
当状态为显示的时候, 该行第一个按钮为隐藏;
当状态为隐藏的时候, 该行第一个按钮为显示;
具...
在做后台管理系统中遇到一个需求, 点击一个按钮可以变换里面字的内容
当状态为显示的时候, 该行第一个按钮为隐藏;
当状态为隐藏的时候, 该行第一个按钮为显示;
具体代码如下:
<!-- 数据表格 --> <el-table :data="tabledata" class="table" stripe border v-loading="loading"> <el-table-column type="index" label="序号" width="70"></el-table-column> <el-table-column prop="status" label="状态"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" type="warning" @click="handleisdisplay(scope.$index, scope.row)"> {{scope.row.status=='显示'?'隐藏':'显示'}} </el-button> <el-button size="mini" type="primary" @click="handleedit(scope.$index, scope.row)">编辑</el-button> <!-- <el-button size="mini" type="danger" @click="handleremove(scope.$index, scope.row)">删除</el-button> --> </template> </el-table-column> </el-table>
也可以用第二种方法:
<!-- 数据表格 --> <el-table :data="tabledata" class="table" stripe border v-loading="loading"> <el-table-column type="index" label="序号" width="70"></el-table-column> <el-table-column prop="status" label="状态"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button v-if="scope.row.status=='显示'" size="mini" type="warning" @click="handleisdisplay(scope.$index, scope.row)">隐藏</el-button> <el-button v-if="scope.row.status=='隐藏'" size="mini" type="warning" @click="handleisdisplay(scope.$index, scope.row)">显示</el-button> <el-button size="mini" type="primary" @click="handleedit(scope.$index, scope.row)">编辑</el-button> <!-- <el-button size="mini" type="danger" @click="handleremove(scope.$index, scope.row)">删除</el-button> --> </template> </el-table-column> </el-table>
总结
以上所述是小编给大家介绍的elementui vue 单个按钮显示和隐藏的变换功能,希望对大家有所帮助
上一篇: 企业推广宣传,你做好准备了吗?