要素プラステーブルは複数の選択を使用して、ヘッダー内のすべての選択を非表示にします。

8b3c8b692a0f4d27a59db12589ae708e.png

テーブルには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>

 

 

おすすめ

転載: blog.csdn.net/weixin_48329823/article/details/125445130