el-tree在vue3中全选和展开

合集 - 小知识(98)

1.前端url取参数以对象展示2023-09-04

2.el-tree在vue3中全选和展开2023-09-04

3.瀑布流2023-09-054.瀑布流——前端流行网页布局方式2023-09-055.vue中v-bind和v-model的区别是什么2023-09-056.Vue中key的作用2023-09-057.在Vue 3中，与Vue 2相比，有一些改进和优化的diff算法。2023-09-058.浏览器解析html2023-09-059.浏览器渲染HTML2023-09-0510.Object.entries()2023-09-0511.vue实现虚拟dom转换成真是dom的原理2023-09-0512.全局封装组件处理并发请求不连续的loading2023-09-0613.为什么vue数组下标修改监听不到2023-09-0714.Vue 3 在某些场景下可能表现出比 Vue 2 更低的性能2023-09-0715.vue里表单验证的v-model.number的坑2023-09-0816.有意思的css2023-09-0917.js原生语音转文字2023-09-0918.js手写一个call2023-10-1419.js手写一个apply2023-10-1420. 手写一个 bind 方法2023-10-1421.js寄生组合式继承2023-10-1422.react中的useState修改状态获取最新状态值2023-10-1523.函数柯里化js2023-10-2024.axios请求中断_下载中断和下载进度2023-10-2025.axios请求重试_核心原理2023-10-2026.axios请求重试_axios-retry插件2023-10-2027.虚拟列表-渲染 10 万条数据2023-10-2128.vue-office 组件2023-10-2129.threejs2023-10-2230.把原生 DOM 标签转换后加入到 3D 场景空间中显示2023-10-2431.three.js 物体要使用光线投射技术，计算是否点击位置与物体有交叉2023-10-2432.threejs基本函数2023-10-2533.二分查找算法2023-10-2634.js判断字符串是否连贯2023-10-2635.世界坐标系和模型坐标系2023-10-2836.设置车模型中每个小物体 castShadow = true2023-11-0437.Vue3 echarts 组件化使用 resizeObserver2023-11-0538.网页验证码的作用 *网页中几种常见验证码2023-11-0739.多个装饰器一起es6装饰器2023-11-0740.flex属性2023-11-0741.移动端兼容问题2023-11-0742.那什么是URL、URI、URN？2023-11-0743.threejs的坐标渲染和着色2023-11-1044.渲染管线2023-11-1045.着色器2023-11-1046.基于 three.js 加载器分别加载模型2023-11-1047.echarts自适应大屏方案 亲测有用2023-11-1648.js中关于class类的继承2023-11-1749.有趣的工具2023-11-1750.关于threejs中鼠标左右移动，左动看右边，右动看左边2023-11-1751.有趣的知识点threejs2023-11-1852.uniapp底层跨端原理2023-11-2253.防止XSS（跨站脚本攻击）漏洞2023-11-2254.启动vite和electron项目配置多个主进程2023-11-2355.九宫格css2023-11-2456.css伪类选择器2023-11-2457.uniapp关于uni.getUserProfile的使用2023-11-3058.uniapp有意思的api之openSetting2023-12-0259.处理flex布局2023-12-0260.uniapp登录板块封装(旧接口getUserInfo)2023-12-0361.uniapp获取用户信息2023-12-0462.在项目中使用UEditor碰到的几个问题2023-12-0463.一维数组转二位数组2023-12-1064.使用此函数对数组进行分块，并在最后一组添加特定的值2023-12-1065.如果win报错无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本2023-12-1166.win系统执行脚本报错策略更改无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本2023-12-1267.阅读时间缓存（快应用）2023-12-2868.uniapp去除button的边框2024-01-1069.uniapp中OnShow获取缓存2024-01-1070.js图片懒加载，在不做分页的情况下的解决方案2024-01-1271.width:100%与width:auto区别2024-01-1572.leetcode1047字符串反复去重（栈）2024-01-1573.记录一次uniapp使用scrollview2024-01-2274.微前端(矩阵项目)代码将单个文件合并到指定分支2024-01-2275.自适应高度的过渡2024-01-2476.实现下划线动画2024-01-2977.js不同类型比较2024-01-3178.登录后继续浏览之前的页面2024-02-0179.sse2024-02-1880.关于小说阅读前端翻页插件推荐turn.js2024-02-1981.数组扁平化2024-02-1982.好玩的vue组件2024-02-2083.DOMRect对象2024-02-2084.前端三大系列图解释2024-02-2085.js中关于return和if条件处理2024-02-2086.关于文心一言不能打开F12开发者工具2024-02-2087.js文字处理两端展示中间省略号2024-02-2088.[popover, select] el-popover内有select的时候在选择后会自动关闭2024-02-2089.说一下flex的属性2024-02-2690.vue3中404路由匹配规则2024-02-2691.shape-outside2024-02-2792.createRange表示文档中的一个范围——用于js判断文字添加省略号情况2024-02-2893.uniapp清除指定key缓存2024-03-0794.vue3+uniapp关于button的open-type无法生效2024-03-1195.uniapp+vue3 使用list触底+下拉2024-03-1196.diff算法vue2024-03-1297.动态修改manifest.json2024-03-1898.记录一下大小写导致的问题2024-03-20

收起

点击查看代码

<script setup lang="ts">
import { ref, reactive, computed, onBeforeMount } from 'vue'
import { menuPage, addRole, getRole, updateRole } from '@/utils/api/role'
import { ElTree, ElMessage } from 'element-plus'
interface Isex {
  createBy: String
  createTime: Number
  id: String
  remark: String
  sort: Number
  k: String
  v: String
  typeId: String
  updateBy: String
  updateTime: Number
}
let emit = defineEmits()
let props = defineProps<{
  id?: string
  show: boolean
}>()
const id = ref(props.id)
const formRef = ref(null)
let form = reactive({
  roleName: '',
  rolePerm: '',
  enabled: 1,
  descript: '',
})

let _show = computed({
  get() {
    return props.show
  },
  set(value) {
    emit('update:show', value)
  },
})
//控制菜单树
const permission = reactive({
  openAll: false,
  selectAll: false,
  linkage: true,
  treeList: [],
})
const treeRef = ref<InstanceType<typeof ElTree>>()
const onCancel = () => {
  _show.value = false
}
const defaultProps = {
  children: 'children',
  label: 'name',
}
const toggleTreeCollapse = (value) => {
  const nodes = treeRef.value.store.nodesMap
  for (let i in nodes) {
    nodes[i].expanded = value
  }
}
const toggleTreeChecked = (value) => {
  if (value) {
    permission.treeList.map((m) => {
      treeRef.value?.setChecked(m, true, true)
    })
  } else {
    treeRef.value?.setCheckedKeys([])
  }
}
const toggleTreeCheckedFs = (value) => {
  permission.linkage = value
}
const normalizeData = (list) => {
  // parentId 和 id 有联系 parentId为-1是一级列表
  let newArr = []
  let mapObj = {}
  list.forEach((m) => {
    mapObj[m.id] = m
  })
  list.forEach((mn) => {
    if (mn.id === '-1') {
      return newArr.push(mn)
    }
    const parObj = mapObj[mn.parentId]
    if (parObj) {
      parObj.children.push(mn)
    } else {
      newArr.push(mn)
    }
  })
  return newArr
}
const addRolehander = () => {
  let { roleName, rolePerm, enabled, descript } = form
  let params = {
    roleName,
    rolePerm,
    enabled,
    descript,
    permissionIds: treeRef.value!.getCheckedKeys(),
  }
  // 判断一下是否是添加或者编辑
  id.value ? updateRoleHan(params) : addRoleHan(params)
}
const updateRoleHan = async (params) => {
  // 拷贝一份数据
  let data = Object.assign(params, { id: id.value })
  let res = await updateRole(data)
  if (res.code == '200') {
    ElMessage({
      type: 'success',
      message: '修改成功',
    })
    _show.value = false
    emit('change')
  }
}
const addRoleHan = async (params) => {
  let res = await addRole(params)
  if (res.code == '200') {
    ElMessage({
      type: 'success',
      message: '添加成功',
    })
    _show.value = false
    emit('change')
  }
}
onBeforeMount(async () => {
  let {
    data: { records },
  } = await menuPage({ current: 1, size: 1000 })
  // permission.treeList = records
  // 数据处理tree
  let treeLists = normalizeData(records)
  permission.treeList = treeLists
  if (id.value) {
    let getRoleId = await getRole(id.value)
    let { role, permissions } = getRoleId.data
    //单独修改一下数据类型
    role.enabled = role.enabled.toString()
    //表单value值
    Object.assign(form, role)
    //菜单权限id
    treeRef.value.setCheckedKeys(permissions)
  }
})
</script>

<template>
  <div class="roleEditor-page">
    <el-dialog
      :modelValue="_show"
      width="600px"
      :title="id ? '修改' : '新增'"
      :append-to-body="true"
      :destroy-on-close="true"
    >
      <el-form v-model="form" ref="formRef">
        <el-form-item label="角色名称" prop="roleName">
          <el-input placeholder="请输入角色名称" v-model="form.roleName" />
        </el-form-item>

        <el-form-item label="权限字符" prop="rolePerm">
          <el-input placeholder="请输入权限字符" v-model="form.rolePerm" />
        </el-form-item>
        <el-form-item label="状态" prop="rolePerm">
          <el-radio-group v-model="form.enabled">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- start -->
        <el-form-item label="菜单权限">
          <div class="checkB">
            <el-checkbox
              v-model="permission.openAll"
              @change="toggleTreeCollapse"
            >
              展开/折叠
            </el-checkbox>

            <el-checkbox
              v-model="permission.selectAll"
              @change="toggleTreeChecked"
              >全选/全不选</el-checkbox
            >

            <el-checkbox
              v-model="permission.linkage"
              @change="toggleTreeCheckedFs"
              >父子(联动/不联动)
            </el-checkbox>
            <el-tree
              ref="treeRef"
              :data="permission.treeList"
              :check-strictly="!permission.linkage"
              show-checkbox
              node-key="id"
              :props="defaultProps"
              class="treeB"
            />
          </div>
        </el-form-item>
        <!-- end -->
        <el-form-item label="备注" prop="descript">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="form.descript"
            :maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel">取消</el-button>
          <el-button type="primary" @click="addRolehander">确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.checkB {
  width: 100%;
}
.treeB {
  margin-top: 0.5rem;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
</style>