在做后台管理系统中遇到一个需求, 点击一个按钮可以变换里面字的内容

先上图

当状态为显示的时候, 该行第一个按钮为隐藏;

当状态为隐藏的时候, 该行第一个按钮为显示;

具体代码如下:

<!-- 数据表格 -->
<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>

方法有很多, 个人觉得第一种方法更为简便.

 

https://segmentfault.com/q/1010000012438199


版权声明:本文为qq_34828100原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qq_34828100/article/details/81988019