树形结构的勾选、取消勾选、删除、清空已选、回显、禁用

原创

已于 2024-06-25 17:33:26 修改 · 2.1k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2024-06-25 17:25:51 首次发布

树形结构的勾选、取消勾选、删除、清空已选、回显、禁用

基本页面：

分为上传文件和编辑的页面

代码实现要点：

上传文件页面：
1. 点开选择范围弹窗，三个radio单选框都为可选状态，默认显示的是第一个单选框（按机构项目组）对应的内容
2. 可以对树形数据进行勾选，勾选的数据展示在右边已选框内
3. 可以对树形数据进行全选，取消全选
4. 右边已选框内数据有对应的删除按钮，可以点击删除按钮或对已选数据进行删除
5. 可以点击清空已选按钮对已选数据进行一次性全部删除
6. 在左边树形数据取消勾选，右边已选框的数据也会对应发生变化
7. 点击确定按钮但未确认上传时，再次打开弹框，页面中应把上一次选择的数据展示出来，且不能禁用，并同步展示在右边已选框内，同样可以对数据进行以上操作
8. 点击确定并在上一层点击确认上传按钮，已经勾选的数据就会传给后端，同步新增到了页面中，后续可以对数据进行编辑操作来修改数据
编辑页面：
1. 点开选择范围弹窗，只有从后端返回的对应的单选框类型的单选框才能可选，其他的单选框都为禁用状态
2. 树形数据显示的也是可选单选框对应的树形数据
3. 从后端得到的上一次确认上传的数据，对数据进行禁用，即只能继续添加不能删除原有的
4. 从后端得到的上一次确认上传的数据，对数据同步展示在右边已选框
5. 从后端得到的上一次确认上传的数据，在右边已选框内不能存在删除按钮
6. 可以继续勾选想要勾选的数据，会同步展示在右边已选框，有删除按钮，可以删除
7. 点击全选，全选数据，点击反选，把除了从后端得到的上一次确认上传的数据都取消勾选，同时右边已选框也要同步展示
8. 点击清空已选，把除了从后端得到的上一次确认上传的数据在右边已选框内删除，同时左边的树形结构也要同步取消勾选数据
9. 点击确定按钮但未确认上传时，再次打开弹框，显示的勾选数据为上次点击确定前勾选的数据，禁用的数据也仅为从后端得到的上一次确认上传的数据，右边已选框也展示的是上次点击确定前勾选的数据，没有删除按钮的也仅为从后端得到的上一次确认上传的数据
10. 点击确定并在上一层点击确认上传按钮，已经勾选的数据就会传给后端，同步更新到页面中，后续也可以对数据进行编辑操作来修改数据

代码设计：

单选框用到的是el-radio组件

<div class="person_top_nav">
    <span>选择签署范围</span>
    <el-radio-group style="margin-left: 12px" v-model="searchRange" @change="handleSearchChange">
        <el-radio style="max-width: 90px" :disabled="!(SelectedType == 'clientOrganization') && disabledArr.length > 0" :label="1">
            按机构项目组
        </el-radio>
        <el-radio style="max-width: 60px" :disabled="!(SelectedType == 'organization') && disabledArr.length > 0" :label="2">
            按事业部
        </el-radio>
        <el-radio style="max-width: 90px" :disabled="!(SelectedType == 'branchCompany') && disabledArr.length > 0" :label="3">
            按合约归属公司
        </el-radio>
    </el-radio-group>
</div>