antdv bodyCell切换标签

1. js 控制，选中回调控制 组件使用判断cell 是否选中函数

<template #customCell="{ column, record }">
    <template v-if="column.key === 'operation'">
	<a-button v-if="cellIsSelect(record.key)" class="table-bt" type="primary" ghost @click="look(record)">查看</a-button>
	<a-button v-else class="table-btn" type="primary" @click="look(record)">查看</a-button>
    </template>
 </template>

判断cell 是否选中功能函数

const cellIsSelect = (key: string) => {
    return selectedRowKeys.value.some((item) => item == key)
}

antdv 选中cell时会刷新 自定义的cell.能达到切换的效果

2. css 控制 css 类控制展示或隐藏(table-not-select-btn 和 table-select-btn)

<template #customCell="{ column, record }">
    <template v-if="column.key === 'operation'">
	<a-button class="table-btn table-not-select-btn" type="primary" ghost @click="look(record)">查看
	</a-button>
	<a-button class="table-btn table-select-btn" type="primary" @click="look(record)">查看</a-button>
    </template>
</template>

antdv 在选中和悬浮状态下有特殊的class

<style scoped lang="less">
    .table-not-select-btn {
	display: inline-block;
    }

    .table-select-btn {
	display: none;
    }

    :deep(.ant-table-cell-row-hover),
    :deep(.ant-table-row-selected) {
	.table-not-select-btn {
            display: none;
	}

	.table-select-btn {
            display: inline-block;
	}
    }
</style>