Make the operation items in the first row of the vxe-table and element-ui table different from those in other rows

My scenario here is
that the operation bar in the first row has only the calculation button and clicking the calculation button will change to stop, and the operation items in the other rows have two buttons
: calculate and delete. Code:

<vxe-table-column title="操作" width="200">
    <template v-slot="{ row, rowIndex }">
            <template v-if="rowIndex == 0">
              <vxe-button v-if="row.show" type="text" class="count" @click="count(row)">计算</vxe-button>
              <vxe-button v-else type="text" class="stop" @click="stop(row)">停止</vxe-button>
            </template>
            <template v-if="rowIndex != 0">
              <vxe-button v-if="row.show" type="text" class="count" @click="count(row)">计算</vxe-button>
              <vxe-button v-else type="text" class="stop" @click="stop(row)">停止</vxe-button>
              <vxe-button type="text" class="delete" @click="removeEvent(row)">删除</vxe-button>
            </template>
          </template>
</vxe-table-column>

The key is the judgment condition rowIndex == 0

Guess you like

Origin blog.csdn.net/GongWei_/article/details/110947672