问题描述
RT,还是最近在做的项目,权限管理模块,要做成这个样子,table 列也要动态渲染的这种(下图);
第一次做这种权限控制,一个头两个大,萌新攻城狮求大狮子帮助!!!
点击列表的配置按钮会弹一个框框,这个框框就这样子的,是一个用trreTable来实现的界面,请求回来的数据是0和1(1表示启用即勾选,反之0表示不启用则不勾选),数据已经渲染好了,渲染一下看看(下图)
这样看的话感觉值没有问题,这个框框就是选不起来,下面我放代码
相关代码
组件代码
<el-table :tree-props="treeOption" :data="tableData" row-key="id" fit > <!-- 渲染列 --> <el-table-column v-for="(item, index) in tableLabel" :fixed="index == 0? 'left':false " :width="index == 0? '180':'' " :key="index" :prop="item.prop" :label="item.name" > <template slot-scope="scope"> <!-- 功能名称 --> <div v-if="index == 0">{{ scope.row.name }}</div> <!-- 功能项 --> <el-checkbox v-else :disabled="scope.row[item.prop]==undefined? true:false" :v-model="scope.row[item.prop]" @change="scope.row[item.prop]==1? 0:1" /> </template> </el-table-column> <el-table-column label="是否启用"> <template slot-scope="scope"> <el-checkbox @change="checkRow(scope.row)" /> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button :disabled="scope.row.is_edit!=1?true:false" @click="optionDialog(scope.row.id)" >配 置</el-button> </template> </el-table-column> </el-table>
数据
// table 列数据(表头) tableLabel: [ { name: "功能名称", prop: "name" }, { name: "添加", prop: "is_add" }, { name: "修改", prop: "is_edit" }, { name: "删除", prop: "is_del" }, { name: "审核", prop: "is_audit" }, { name: "打印", prop: "is_print" }, { name: "导入", prop: "is_import" }, { name: "导出", prop: "is_export" } ], // table 表数据(片段) tableData: [ { id: 1, name: "基础模块", child: [ { id: 3, name: "设置管理", child: [ { id: 5, name: "辞典设置", is_add: 1, is_edit: 1, is_del: 1, is_audit: 1, is_print: 1, is_import: 1, is_export: 1 } ] } ] }]
这个就是用表格来收集数据,其实开始用checked实现了默认选中,后面我想要通过勾选来改变表数据,但是没有实现
需求
用这个 treeTable 来控制权限,根据请求来的数据 0 || 1 来渲染表,通过 勾选/不勾选 来改变 tableData 中对应的值,然后点提交的时候会把改好的 tableData 提交给后台
最后,谢谢各位老师指点!!!
已解决
悬赏分:10
- 解决时间 2021-11-26 13:44
点赞 0反对 0举报 0
收藏 0
分享 2
回答1
最佳
-
在checkbox上加上:true-label="1" :false-label="0",因为默认的checkbox的value值为true和false,加上这个,使他的值变为1和0,这样你的change事件也可以删除了
支持 0 反对 0 举报2021-11-25 16:14