項(xiàng)目場(chǎng)景：

表格的部分內(nèi)容是可以被勾選的，部分內(nèi)容是不可以被勾選的
使用的是 “element-plus”: “^2.2.22”, 以上應(yīng)該都是兼容的

問(wèn)題描述

要求el-table表格中，部分內(nèi)容不可以被勾選，全選框在沒(méi)有可選內(nèi)容時(shí)，是禁用狀態(tài)

如上圖所示，要求數(shù)據(jù)id是1或者2的數(shù)據(jù)不可被選擇，當(dāng)數(shù)據(jù)只剩下id為1和2的數(shù)據(jù)時(shí)，全選為禁用狀態(tài)，當(dāng)某一個(gè)全局值為true時(shí)，所有勾選框全部都是禁用狀態(tài)

分析：

從描述來(lái)看，需求有以下幾點(diǎn)
1、要求數(shù)據(jù)id是1或者2的數(shù)據(jù)不可被選擇
2、當(dāng)數(shù)據(jù)只剩下id為1和2的數(shù)據(jù)或者時(shí)，全選為禁用狀態(tài)
3、當(dāng)某一個(gè)全局值為true時(shí)，所有勾選框全部都是禁用狀態(tài)

解決方案：

滿足第一個(gè)條件：要求數(shù)據(jù)id是1或者2的數(shù)據(jù)不可被選擇

<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>

滿足第二個(gè)條件：當(dāng)數(shù)據(jù)只剩下id為1和2的數(shù)據(jù)或者時(shí)，全選為禁用狀態(tài)
因?yàn)?和2不可被選擇，所以他們只能剩下兩條數(shù)據(jù)，由于全選框不能直接disable，所以需要給他加上樣式

<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 用這個(gè)樣式，沒(méi)有用fixed就用下面那個(gè)樣式
    .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>

再滿足第三個(gè)條件

<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 用這個(gè)樣式，沒(méi)有用fixed就用下面那個(gè)樣式
    .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>

就可以了 ，最后一個(gè)是完整代碼，當(dāng)然如果想在沒(méi)有可選數(shù)據(jù)時(shí)，將全選按鈕隱藏也可以把樣式改成display:none,文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-813917.html

到了這里，關(guān)于element-ui el-table表格勾選框條件禁用，及全勾選按鈕禁用， 記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！