elementUIVue单个按钮显⽰和隐藏的变换      在做后台管理系统中遇到⼀个需求, 点击⼀个按钮可以变换⾥⾯字的内容
先上图
当状态为显⽰的时候, 该⾏第⼀个按钮为隐藏;
当状态为隐藏的时候, 该⾏第⼀个按钮为显⽰;
具体代码如下:
<!-- 数据表格 -->
<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, w)">
{{w.status=='显⽰'?'隐藏':'显⽰'}}
</el-button>
<el-button size="mini" type="primary" @click="handleEdit(scope.$index, w)">编辑</el-button>
<!-- <el-button size="mini" type="danger" @click="handleRemove(scope.$index, w)">删除</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>vue element admin
<el-table-column label="操作">
<template slot-scope="scope">
<el-button v-if="w.status=='显⽰'"  size="mini" type="warning"
@click="handleIsDisplay(scope.$index, w)">隐藏</el-button>
<el-button v-if="w.status=='隐藏'" size="mini" type="warning"
@click="handleIsDisplay(scope.$index, w)">显⽰</el-button>
<el-button size="mini" type="primary" @click="handleEdit(scope.$index, w)">编辑</el-button>
<!-- <el-button size="mini" type="danger" @click="handleRemove(scope.$index, w)">删除</el-button> -->
</template>
</el-table-column>
</el-table>
⽅法有很多, 个⼈觉得第⼀种⽅法更为简便.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。