【项目经验】:elementui表格中表头的多选框换成文字

一.项目需求

表格可以多选,表头都是汉字。。。。类似于这种

二.实现功能

用到的方法

|------------------------|-----------------------------------------------------------|-------------------------------------------------------|-----|-----|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| header-cell-class-name | 表头单元格的 className 的回调方法,也可以使用字符串为所有表头单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | --- | --- |
[Table Attributes]

实现代码(可复制直接跑)

HTML部分
html 复制代码
<template>
    <div class="Box">
        <div>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 500px"
                @selection-change="handleSelectionChange" :header-cell-class-name="cellClass">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="日期" width="120">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="120">
                </el-table-column>
                <el-table-column prop="address" label="地址" show-overflow-tooltip>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
js部分
javascript 复制代码
<script>
export default {
    name: "list",
    data () {
        return {
            tableData: [{
                date: '2023-09-03',
                name: 'bug天选之子',
                address: 'https://blog.csdn.net/weixin_70245286?spm=1000.2115.3001.5343'
            }, {
                date: '2023-09-03',
                name: 'bug天选之子',
                address: 'https://blog.csdn.net/weixin_70245286?spm=1000.2115.3001.5343'
            }, {
                date: '2023-09-03',
                name: 'bug天选之子',
                address: 'https://blog.csdn.net/weixin_70245286?spm=1000.2115.3001.5343'
            }, {
                date: '2023-09-03',
                name: 'bug天选之子',
                address: 'https://blog.csdn.net/weixin_70245286?spm=1000.2115.3001.5343'
            },],
            multipleSelection: [],
        }
    },


    methods: {
        // 选中的项
        handleSelectionChange (val) {
            this.multipleSelection = val;
            console.log("选中的项:", this.multipleSelection);
        },
        // 修改多选框表头
        cellClass (row) {
            // 判断第几列
            if (row.columnIndex === 0) {
                return "disableSelection";
            }
        }

    },
    mounted () {

    }
}
</script>
css部分
css 复制代码
<style scoped>
.Box {
    display: flex;
    justify-content: center;
    align-items: center;
}

::v-deep.el-table .disableSelection .cell .el-checkbox__inner {
    display: none;
    position: relative;
}

::v-deep.el-table .disableSelection .cell::before {
    content: "选项";
    position: absolute;
    right: 15px;
}

::v-deep.el-table {
    border: 1px solid blue;
}
</style>
实现后的效果图

三.总结

关键代码

javascript 复制代码
// 在表格上绑定header-cell-class-name属性
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 500px"
                @selection-change="handleSelectionChange" :header-cell-class-name="cellClass">
// 在methods中判断确定是第一列然后给对应的class名
cellClass (row) {
            // 判断第几列
            if (row.columnIndex === 0) {
                return "disableSelection";
            }
        }
// css做对应修改

// 隐藏多选框表头
::v-deep.el-table .disableSelection .cell .el-checkbox__inner {
    display: none;
    position: relative;
}
// 替换后的表头内容(根据需求自行设置)
::v-deep.el-table .disableSelection .cell::before {
    content: "选项";
    position: absolute;
    right: 15px;
}

大家有啥更好的方法评论区留言

相关推荐
携欢2 分钟前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss
三小河10 分钟前
工作中的Ai工具汇总
前端
mapbar_front28 分钟前
react项目开发—关于代码架构/规范探讨
前端·react.js
二木一夕35 分钟前
Vue 3 的组合式 API和传统选项式 API区别(vue2转vue3,两者差异)
前端
LuckySusu37 分钟前
【vue篇】Vue 项目中的静态资源管理:assets vs static 终极指南
前端·vue.js
LuckySusu37 分钟前
【vue篇】Vue.delete vs delete:数组删除的“陷阱”与正确姿势
前端·vue.js
LuckySusu39 分钟前
【vue篇】Vue 模板编译原理:从 Template 到 DOM 的翻译官
前端·vue.js
小菜摸鱼42 分钟前
Node.js + vue3 大文件-切片上传全流程(视频文件)
前端·node.js
LuckySusu1 小时前
【vue篇】Vue 2 响应式“盲区”破解:如何监听对象/数组属性变化
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue Mixin:可复用功能的“乐高积木”
前端·vue.js