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

最新推荐文章于 2024-10-10 11:12:12 发布

听听那晚风

最新推荐文章于 2024-10-10 11:12:12 发布

阅读量1.1k

点赞数

分类专栏： table vue 文章标签： vue.js

本文链接：https://blog.csdn.net/GongWei_/article/details/110947672

版权

vue 同时被 2 个专栏收录

58 篇文章 9 订阅

订阅专栏

table

4 篇文章 0 订阅

订阅专栏

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

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