vueelement中根据状态的不同表格中操作行按钮的显示隐藏问题

后台管理系统中需要做出如下的功能, 根据状态的不同, 表格中操作行按钮显示不同

当前行结构如下:

    <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"