テーブルにはheader-cell-class-name属性があります
1. header-cell-class-name の属性名を設定します。
<el-table :data="tableData" :header-cell-class-name="cellClass"></el-table>
2. セットアップ構文で処理するメソッドを定義します。
<script setup lang="ts">
import nameImg from '@/assets/images/banner.png'
interface User {
name: object
price: string
sales: string
ctr: string
convert: string
}
const tableData: User[] = [
{
name: {
img: nameImg,
title: '心印手帕纸茶语系列4 层面巾纸12包*6条纸巾新层面巾纸12包*6条纸巾新',
},
price: '33.90',
sales: '666',
ctr: '12%',
convert: '12%'
},
{
name: {
img: nameImg,
title: '心印手帕纸茶语系列4 层面巾纸12包*6条纸巾新层面巾纸12包*6条纸巾新',
},
price: '33.90',
sales: '777',
ctr: '12%',
convert: '12%'
}
]
// 将表头的全选隐藏
function cellClass(row) {
if (row.columnIndex === 0) {
return 'disabledCheck';
}
}
</script>
3. deep を使用して CSS でスタイルを設定します
<style scoped lang="scss">
:deep(.el-table .disabledCheck .cell .el-checkbox__inner) {
display: none;
}
</style>