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"