效果圖：
<template> <el-table :data="tableData" class="permissionstable" height="267px" :show-header="false" style="width: 26%; border: 1px solid #dfe6ec; margin: 0 auto; top: 25%" :default-expand-all="true" > <el-table-column type="expand" width="35px"> <template slot-scope="props"> <el-form label-position="left" inline class="demo-table-expand"> <el-form-item> <el-checkbox-group v-model="props.row.resourceNameList" class="resourceCheckClass" > <el-checkbox v-for="(item, index) in props.row.children" :key="index" :value="item.resourceId" :label="item.resourceId" name="type" @change="resourceCheckItem(props.row, props.row.children)" style="width: 100px" :disabled="props.row.chargingEventsDisabled" >{{ item.resourceName }}</el-checkbox > </el-checkbox-group> </el-form-item> </el-form> </template> </el-table-column> <el-table-column width="25"> <template slot-scope="props"> <el-checkbox :indeterminate="props.row.isIndeterminate" v-model="props.row.checkAll" @change="handleSelectionChange(props.row, props.row.children)" :disabled="props.row.chargingEventsDisabled" >全選</el-checkbox > </template> </el-table-column> <el-table-column label="resourceName" prop="resourceName" width="80"> </el-table-column> <el-table-column> <template slot-scope="props" width="35"> <div :style="{ display: props.row.chargingEventsDisabled ? 'block' : 'none', }" style="color: red" > *此模塊無權限 </div> </template> </el-table-column> </el-table> </template> <style> .el-form--inline .el-form-item { margin-left: 45px; } /* 滾動條 */ ::-webkit-scrollbar { width: 5px; height: 6px; } ::-webkit-scrollbar-button, ::-webkit-scrollbar-button:vertical { display: none; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-track:vertical { border-radius: 10px; background-color: black; } ::-webkit-scrollbar-track-piece { background-color: #dce7f0; border-radius: 3px; } ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:vertical { border-radius: 10px; background-color: #1890ff; } ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:vertical:hover { background: #1890ff; } </style> <script> import _ from "lodash"; export default { data() { return { // 需要展示的數據 tableData: [], // 后台返回的數據 tableData2: [ { resourceId: "0", resourceName: "用戶管理", isSelected: "0", children: [ { resourceId: "00", resourceName: "查看", isSelected: "0", }, { resourceId: "01", resourceName: "新增", isSelected: "0", }, { resourceId: "02", resourceName: "修改", isSelected: "0", }, { resourceId: "03", resourceName: "刪除", isSelected: "0", }, { resourceId: "04", resourceName: "確認", isSelected: "0", }, { resourceId: "05", resourceName: "結束", isSelected: "0", }, { resourceId: "06", resourceName: "導出", isSelected: "0", }, { resourceId: "07", resourceName: "導入", isSelected: "0", }, { resourceId: "08", resourceName: "歸檔", isSelected: "0", }, ], }, { resourceId: "1", resourceName: "收費事件", isSelected: "0", children: [ { resourceId: "00", resourceName: "查看", isSelected: "0", }, { resourceId: "01", resourceName: "新增", isSelected: "0", }, { resourceId: "02", resourceName: "修改", isSelected: "0", }, { resourceId: "03", resourceName: "刪除", isSelected: "0", }, { resourceId: "04", resourceName: "確認", isSelected: "0", }, { resourceId: "05", resourceName: "結束", isSelected: "0", }, { resourceId: "06", resourceName: "導出", isSelected: "0", }, { resourceId: "07", resourceName: "導入", isSelected: "0", }, { resourceId: "08", resourceName: "歸檔", isSelected: "0", }, ], }, { resourceId: "3", resourceName: "事件管理", isSelected: "0", children: [ { resourceId: "00", resourceName: "查看", isSelected: "0", }, { resourceId: "01", resourceName: "新增", isSelected: "0", }, { resourceId: "02", resourceName: "修改", isSelected: "0", }, { resourceId: "03", resourceName: "刪除", isSelected: "0", }, { resourceId: "04", resourceName: "確認", isSelected: "0", }, { resourceId: "05", resourceName: "結束", isSelected: "0", }, { resourceId: "06", resourceName: "導出", isSelected: "0", }, { resourceId: "07", resourceName: "導入", isSelected: "0", }, { resourceId: "08", resourceName: "歸檔", isSelected: "0", }, ], }, { resourceId: "4", resourceName: "角色管理", isSelected: "0", children: [ { resourceId: "00", resourceName: "查看", isSelected: "0", }, { resourceId: "01", resourceName: "新增", isSelected: "0", }, { resourceId: "02", resourceName: "修改", isSelected: "0", }, { resourceId: "03", resourceName: "刪除", isSelected: "0", }, { resourceId: "04", resourceName: "確認", isSelected: "0", }, { resourceId: "05", resourceName: "結束", isSelected: "0", }, { resourceId: "06", resourceName: "導出", isSelected: "0", }, { resourceId: "07", resourceName: "導入", isSelected: "0", }, { resourceId: "08", resourceName: "歸檔", isSelected: "0", }, ], }, ], }; }, created() {}, mounted() { this.getTableData(); }, methods: { // 獲取表格數據 getTableData() { // 實際開發中，在這里會請求后台數據，得到tableData2這個數組， // _.cloneDeep是為了深度克隆tableData2，以免之后的操作影響到原數組 let tableData = _.cloneDeep(this.tableData2); tableData.forEach((item) => { if (item.children && item.children.length > 0) { // 存放選中的數據 let selectDataList = []; item.children.forEach((evt) => { if (Number(evt.isSelected === 1)) { selectDataList.push(evt.resourceId); } }); // resourceNameList是el-checkbox-group中v-model需要綁定的數據，必須是一個數組，存放選中的數據 item.resourceNameList = selectDataList; // checkAll是判斷當前目錄是否全選 item.checkAll = selectDataList.length === item.children.length; if (item.checkAll) { item.isSelected = "1"; } // isIndeterminate是判斷當前目錄是否為半選中狀態 item.isIndeterminate = selectDataList.length > 0 && selectDataList.length < item.children.length; // 如果是收費事件，則禁用復選框 if (item.resourceName === "收費事件") { item.chargingEventsDisabled = true; } } }); // 將處理好的數據賦給真正需要渲染到頁面上的數組 this.tableData = tableData; }, // 子目錄選中事件 resourceCheckItem(evt, val) { let checkedCount = val.length; let refResourceNameList = _.cloneDeep(evt.resourceNameList); let childrenData = _.cloneDeep(evt.children); let deleteIdList = []; childrenData.forEach((item) => { deleteIdList.push(item.resourceId); }); // 兩個數組比較，取出相同的元素，代表當前選中的數據 let date = refResourceNameList.filter( (item) => deleteIdList.indexOf(item) > -1 ); // 當前所有數據長度等於選中數據的長度，則表示全選狀態 evt.checkAll = checkedCount === date.length; // 當前半選中狀態要等於當前選中的數據長度大於0並且當前選中的數據長度小於當前的所有數據長度 evt.isIndeterminate = date.length > 0 && date.length < checkedCount; }, // 目錄全選事件 handleSelectionChange(evt, val) { // 如果checkAll為true表示全選，否則取消全選 if (evt.checkAll) { if (evt.children && evt.children.length > 0) { let childrenDataList = _.cloneDeep(evt.children); let optionsData = []; // 拿到子目錄的數據，並將子目錄里的isSelected都賦值為1 childrenDataList.forEach((item) => { item.isSelected = "1"; optionsData.push(item.resourceId); }); // 如果之前已經有選中的，則追加 let refResourceNameList = _.cloneDeep(evt.resourceNameList); let arr = refResourceNameList.concat(optionsData); // 去重 evt.resourceNameList = Array.from(new Set(arr)); // 將當前目錄的isSelected賦值為1 evt.isSelected = "1"; // 取消半選中狀態 evt.isIndeterminate = false; } } else { let refResourceNameList = _.cloneDeep(evt.resourceNameList); let childrenData = _.cloneDeep(evt.children); let deleteIdList = []; childrenData.forEach((item) => { deleteIdList.push(item.resourceId); }); // 進行這一步操作是因為所有數據都在一個表格里，為了防止取消全選則全部取消全選的問題，這樣可以控制只取消當前目錄 // 刪除數據相同的元素 let arr = refResourceNameList.filter( (item) => !deleteIdList.some((i) => i == item) ); evt.isSelected = "0"; evt.resourceNameList = arr; } }, }, }; </script>