使vxe-table以及element-ui table第一行 操作栏的操作项与其他行的操作项不一样

我这里的场景是
第一行的操作栏 只有计算这一个按钮并且点击计算 计算按钮会变成停止,其他行的操作项有 计算和删除两个按钮
代码:

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

关键就在 rowIndex == 0 这个判断条件

猜你喜欢

转载自blog.csdn.net/GongWei_/article/details/110947672