elementUI Vue 單個按鈕顯示和隱藏的變換

       在做後臺管理系統中遇到一個需求, 點擊一個按鈕可以變換裏面字的內容

先上圖

當狀態爲顯示的時候, 該行第一個按鈕爲隱藏;

當狀態爲隱藏的時候, 該行第一個按鈕爲顯示;

具體代碼如下:

<!-- 數據表格 -->
<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>

方法有很多, 個人覺得第一種方法更爲簡便.