<el-table
:data="treeList"
style="width: 100%"
row-key="id"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
default-expand-all
>
<el-table-column prop="name" width="180"></el-table-column>
<el-table-column width="180" label="读">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.dush" v-if="!scope.row.children" :disabled="scope.row.disble"></el-checkbox>
</template>
</el-table-column>
<el-table-column width="180" label="写">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.rite" v-if="!scope.row.children" :disabled="scope.row.disble"></el-checkbox>
</template></el-table-column>
<el-table-column width="180" label="操作">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.caozuo" v-if="!scope.row.children" :disabled="scope.row.disble"></el-checkbox>
</template></el-table-column>
</el-table>
<el-button type="primary" @click="save">确定</el-button>
treeList: [
{
name: "数据看板",
check: false,
id: 1,
children: [
{
id: 6,
check: false,
name: "人群分析看板",
rite: true,
caozuo: true,
dushu: false,
disble:true
},
{
id: 7,
check: true,
name: "人群分析报表",
rite: true,
caozuo: true,
dushu: false,
disble:true
},
{
id: 8,
check: false,
name: "排队管理",
rite: false,
caozuo: true,
dushu: false,
disble:true
},
],
},
{
name: "搜索中心",
check: false,
rite: false,
caozuo: false,
dushu: false,
disble:false,
id: 2,
},
{
name: "告警中心",
check: 3,
id: 3,
rite: false,
caozuo: false,
dushu: false,
disble:true
},
{
name: "测试222",
check: false,
id: 4,
children: [
{
id: 5,
check: false,
name: "测试123",
disble:false
},
],
},
],