element-ui el-table表格勾选框条件禁用,及全勾选按钮禁用, 记录

项目场景:

表格的部分内容是可以被勾选的,部分内容是不可以被勾选的

使用的是 "element-plus": "^2.2.22", 以上应该都是兼容的


问题描述

要求el-table表格中,部分内容不可以被勾选,全选框在没有可选内容时,是禁用状态

如上图所示,要求数据id是1或者2的数据不可被选择,当数据只剩下id为1和2的数据时,全选为禁用状态,当某一个全局值为true时,所有勾选框全部都是禁用状态

分析:

从描述来看,需求有以下几点

1、要求数据id是1或者2的数据不可被选择

2、当数据只剩下id为1和2的数据或者时,全选为禁用状态

3、当某一个全局值为true时,所有勾选框全部都是禁用状态

解决方案:

满足第一个条件:要求数据id是1或者2的数据不可被选择

javascript 复制代码
<template>
	 <el-table :data="tableDatas" >
	       <el-table-column type="selection" fixed="left" :selectable="checkSelectable"/>
	       <el-table-column label='姓名' prop="name" />
	 </el-table>
</template>
<script setup>
const tableDatas = ref([
{ id:1, name:"张三"},
{ id:2, name:"李四"}])
const checkSelectable = (row) => {
    if (row.id == 1 || row.id == 2) {
        return false
    } else {
        return true
    }
}
</script>

满足第二个条件:当数据只剩下id为1和2的数据或者时,全选为禁用状态

因为1和2不可被选择,所以他们只能剩下两条数据,由于全选框不能直接disable,所以需要给他加上样式

javascript 复制代码
<template>
	 <el-table :data="tableDatas" :header-cell-class-name="cellClass">
	       <el-table-column type="selection" fixed="left" :selectable="checkSelectable"/>
	       <el-table-column label='姓名' prop="name" />
	 </el-table>
</template>
<script setup>
const tableDatas = ref([
{ id:1, name:"张三"},
{ id:2, name:"李四"}])
const checkSelectable = (row) => {
    if (row.id == 1 || row.id == 2) {
        return false
    } else {
        return true
    }
}

const cellClass = (row) => {
    const list = tableDatas.value.filter((rowss) => {
        return (rowss.idx == 1 || rowss.idx == 16)
    })

    if (row.columnIndex === 0) {
        if (list.length == tableData.length) {
            return "DisableSelection"
        }
    }

}
</script>
<style scoped lang="less">
::v-deep {  //全选框用了fixed 用这个样式,没有用fixed就用下面那个样式
    .DisableSelection .cell .el-checkbox .el-checkbox__inner {
        background-color: var(--el-checkbox-disabled-input-fill) !important;
        border-color: var(--el-checkbox-disabled-border-color) !important;
        cursor: not-allowed !important;
    }
}

::v-deep .el-table .DisableSelection .cell .el-checkbox__inner{
    background-color: var(--el-checkbox-disabled-input-fill);
    border-color: var(--el-checkbox-disabled-border-color);
    cursor: not-allowed;
}

</style>

再满足第三个条件

javascript 复制代码
<template>
	 <el-table :data="tableDatas" :header-cell-class-name="cellClass">
	       <el-table-column type="selection" fixed="left"  :selectable="checkSelectable"/>
	       <el-table-column label='姓名' prop="name" />
	 </el-table>
</template>
<script setup>
let ablestatus = true
const tableDatas = ref([
{ id:1, name:"张三"},
{ id:2, name:"李四"}])
const checkSelectable = (row) => {
    if (row.id == 1 || row.id == 2 || ablestatus) {
        return false
    } else {
        return true
    }
}

const cellClass = (row) => {
    const list = tableDatas.value.filter((rowss) => {
        return (rowss.idx == 1 || rowss.idx == 16)
    })

    if (row.columnIndex === 0) {
        if (list.length == tableData.length || ablestatus ) {
            return "DisableSelection"
        }
    }

}
</script>
<style scoped lang="less">
::v-deep {  //全选框用了fixed 用这个样式,没有用fixed就用下面那个样式
    .DisableSelection .cell .el-checkbox .el-checkbox__inner {
        background-color: var(--el-checkbox-disabled-input-fill) !important;
        border-color: var(--el-checkbox-disabled-border-color) !important;
        cursor: not-allowed !important;
    }
}

::v-deep .el-table .DisableSelection .cell .el-checkbox__inner{
    background-color: var(--el-checkbox-disabled-input-fill);
    border-color: var(--el-checkbox-disabled-border-color);
    cursor: not-allowed;
}

</style>

就可以了 ,最后一个是完整代码,当然如果想在没有可选数据时,将全选按钮隐藏也可以把样式改成display:none,

相关推荐
罚时大师月色6 小时前
Vue+ts 如何实现父组件和子组件通信
javascript·vue.js·ecmascript
漂流瓶jz7 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom7 小时前
iframe实战:跨域通信与安全隔离
前端·安全
fury_1237 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js
weixin_405023377 小时前
包资源管理器NPM 使用
前端·npm·node.js
宁&沉沦7 小时前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js
Dragonir7 小时前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效
武天8 小时前
如果使用Vue3.0实现一个 Modal,你会怎么进行设计?
vue.js
peachSoda78 小时前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序