vue+element中,根據狀態的不一樣,表格中操做行按鈕的顯示隱藏問題

後臺管理系統中須要作出以下的功能,根據狀態的不一樣,表格中操做行按鈕顯示不一樣

---

當前行結構以下:

<el-table-column label="操做" width="150" class="caozuo">
         <template slot-scope="scope" v-if="scope.row.state != 3">
               <div class="caozuoBtn" v-if="showList1.indexOf(scope.row.state) != -1" @click="assignment(['currentItem', 'dialogUrgentVisible'], [scope.row, true])">催辦</div>
               <div class="caozuoBtn" v-if="showList2.indexOf(scope.row.state) != -1" @click="assignment(['currentItem', 'dialogAzVisible'], [scope.row, true])">轉安裝單</div>
              <div class="caozuoBtn" v-if="showList3.indexOf(scope.row.state) != -1" @click="cdClick(scope.row)">撤單</div>
              <div class="caozuoBtn" v-if="showList4.indexOf(scope.row.state) != -1" @click="assignment(['currentItem', 'dialogZpVisible'], [scope.row, true])">轉派</div>
        </template>
    </el-table-column>

---

data中的數據

showList1: [0,1],          //  顯示按鈕1  催辦
      showList2: [0,2],          //  顯示按鈕2  轉安裝單
      showList3: [0,1,2,5],      //  顯示按鈕3  撤單
      showList4: [0,1,2,4],      //  顯示按鈕4  轉派
      
      //獲取列表數據,當前行scope.row.state的值在數組showList1存在,就顯示當前按鈕,
      //當每次點擊按鈕不一樣時,就會發送請求時,並把狀態發送過去,從而改變按鈕的狀態
      v-if="showList1.indexOf(scope.row.state) != -1"