文章目录
需求:按照权限管理配置的数据权限树展开;点击查看按钮后进入其他指定机构选择弹窗为一树形结构
本文章对项目中出现得关键点进行总结。
数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址
一、实现如上树形列表
在 element 官方表格示例中,实现树形表格列表数据渲染,非常简单。只需要按部就班,替换相关的数据即可。
但是很明显,我们这个项目中的需求,除了树形列表外,还有一些非常规的需求(😓想拿板砖拍死产品🤯的心都有了,有没有想过开发啥感受😶,好不好实现🤢!)。没有办法,还是得硬着头皮上,谁让咱没有话语权,说干就干,着手研究。这个过程一定要跟后端商量好交互的数据格式,不然自己干自己的,你最后会很痛苦(PS:最好有一个靠谱的经验丰富的后端来配合你,能让你节省很多时间,少走很多弯路)。
1.1 首先要就是渲染树形列表
很简单,直接贴代码
<el-table
:data="tableData"
style="width: 100%"
row-key="id"
lazy
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="one_level"></el-table-column>
<el-table-column prop="two_level"></el-table-column>
<el-table-column prop="three_level"></el-table-column>
<el-table-column prop="four_level"> </el-table-column>
<el-table-column prop="operation" label="其他指定机构"></el-table-column>
</el-table>
1.2 然后通过插槽处理头部标题
这里的数据只需要渲染名称一行,后面全部都是选框,所以就是头部那里也需要重新去搞一下。
el-table 本身是带有 type=checkbox 属性来实现复选功能的,当时就尝试了四个,但是你需要实现互斥关系,并且还需要加一些文字,自带的就多少有点不够用了。
所以这个使用采用插槽 #header 去重写头部,并使用 el-radio 填充,实现单选互斥效果,代码如下:
<el-table
:data="tableData"
style="width: 100%"
row-key="id"
lazy
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="one_level">
<template #header>
<div>
<el-radio v-model="tableHeader.level" label="1" @change="headerChange(1)">一级组织机构内所有数据</el-radio>
</div>
</template>
</el-table-column>
<el-table-column prop="two_level">
<template #header>
<div>
<el-radio
v-model="tableHeader.level"
label="2"
@change="headerChange(2)"
>本级组织机构及下属组织机构数据</el-radio>
</div>
</template>
</el-table-column>
<el-table-column prop="three_level"<