vue3中，封装el-tree树形控件组件，用于组织架构——defineEmits、defineProps& vue3之computed计算属性、watch和nextTick监听的写法 & `${写法

已于 2023-09-23 09:56:56 修改
阅读量2.8k 收藏 1
点赞数
分类专栏： vue3+ts-运维 文章标签： vue.js javascript ecmascript
于 2023-09-22 17:16:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44867717/article/details/133177986
版权

vue3中，封装el-tree树形控件组件，用于组织架构——defineEmits、defineProps & vue3之computed计算属性、watch和nextTick监听的写法 & `${写法

效果

在这里插入图片描述

1

在这里插入图片描述

2

在这里插入图片描述

主页代码

index.vue

<template>
  <div class="main-content">
    <el-button
      :disabled="route.query.type === 'view'"
      plain
      type="primary"
      @click="handleUnit"
    >
      选择单位
    </el-button>
    <div class="table-lists">
      <el-table ref="multipleTableRef" border :data="tableUnitData" stripe>
        <el-table-column label="序号" type="index" width="120" />
        <el-table-column label="单位名称" prop="unitName" />
        <el-table-column v-if="route.query.type !== 'view'" label="操作">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="handleClickUnit(scope.$index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 全量单位数据-->
    <SelectUnit
      v-if="formInline.changeType === '6'"
      v-model:dialogVisible="dialogUnit"
      v-model:unitData="tableUnitData"
    />
     <!-- 2级单位数据-->
      <SelectUnit
        v-model:dialogVisible="dialogUnit"
        v-model:unitData="tableUnitData"
        :level="'2'"
        @change-unit="handleUnit"
      />
  </div>
</template>
<script setup>
  //承担单位
  const dialogUnit = ref(false);
  const multipleTableRef = ref(null);
  const tableUnitData = ref([]);
  const handleUnit = async () => {
    dialogUnit.value = true;
    tableUnitData.value.forEach((item) => {
      item.id = item.unitCode;
      item.orgObjMdmName = item.unitName;
    });
  };
  //承担单位删除
  const handleClickUnit = (index) => {
    ElMessageBox.confirm("确认删除").then(() => {
      tableUnitData.value.splice(index, 1);
    });
  };
 // 单位
      const handleUnit = (params) => {
        emit('joinUnit', params)
        state.units = params // 回填
        state.formData.unitList = params // 承担单位值
        // 写法一
        const orgObjMdmNames = params.map((item) => item.orgObjMdmName)
        const orgObjMdmIds = params.map((item) => item.id)
        const names = orgObjMdmNames.toString()
        const ids = orgObjMdmIds.toString()

        const data = state.formData.baseTopicList
        data[`${state.curIndex}`].leadUnit = names //lead_unit
        data[`${state.curIndex}`].leadUnitId = ids //lead_unit_id
          
       // 写法二
       params.forEach((item) => {
          setTimeout(() => {
            getUnitsDetail({ value: item, source: 'fund' })
          }, 1000)
        })
      }
</script>
<style lang="scss" scoped></style>

附

// 写法一
var a = '小明'
var b = {c:12}
b[`${a}`] = '小强'
console.log(b)  // {c: 12, 小明: '小强'}

//写法二
var list = [2,3,4]
var index = 2
var val = list[`${index}`]
console.log(val)  // 4

//写法三
var arr = [{a:'小强',b:'小军'}]
var id = 0
var name = arr[`${id}`].b
console.log(name) // '小军'
弹框树形控件组件代码

src\app\science\components\SelectUnit.vue

<!--
  dialogVisible    //弹窗是否显示
  unitData         //选择后需要回显数据
  level            //数据权限 不传获取全部组织树数据，传2获取2级单位数据
  change-unit      //回调方法： 参数为选择后单位相关的数据
-->
<template>
  <el-dialog
    v-model="dialogVisible"
    align-center
    append-to-body
    height="600"
    :modal="false"
    style="width: 1000px"
    title="单位选择"
  >
    <div class="el-dialog-div">
      <el-row :gutter="24">
        <el-col :span="10" style="width: 400px">
          <el-form
            ref="formRef"
            class="inline-form"
            :inline="true"
            label-position="right"
            label-width="70px"
            :model="formInline"
          >
            <el-form-item>
              <el-select v-model="region" disabled>
                <el-option label="内部" value="neibu" />
                <el-option label="外部" value="waibu" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="filterText" placeholder="搜索" />
            </el-form-item>
          </el-form>

          <el-tree
            ref="treeRef"
            check-strictly
            class="filter-tree"
            :data="interData"
            :filter-node-method="filterNode"
            node-key="id"
            :props="treeProps"
            show-checkbox
            @check-change="handleCheckChange"
          />
        </el-col>
        <el-col :span="14">
          <el-table ref="multipleTableRef" border :data="tableData">
            <el-table-column label="单位名称" prop="orgObjMdmName" />
            <el-table-column label="组织机构代码" prop="id" />
          </el-table>
        </el-col>
      </el-row>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelDialog">取消</el-button>
        <el-button type="primary" @click="submitDialog">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
  import { getUnitsTree, getUnitstwoTree } from '@src/api/common/base'

  const props = defineProps({
    dialogVisible: {
      default: null,
      type: Boolean,
    },
    level: {
      default: null,
      type: String,
    },
    unitData: {
      default: null,
      type: Object,
    },
  })

  const emit = defineEmits([
    'update:dialogVisible',
    'update:unitData',
    'change-unit',
  ])
  const dialogVisible = computed({
    get: () => props.dialogVisible,
    set: (val) => emit('update:dialogVisible', val),
  })

  const { level } = toRefs(props)
  const region = ref('neibu')
  const treeRef = ref()
  const filterText = ref('')

  const interData = ref([])
  const treeProps = {
    children: 'children',
    label: 'orgObjMdmName',
    value: 'id',
  }

  const tableData = ref([])

  const onLoad = () => {
    const loading = ElLoading.service({
      lock: true,
      text: 'Loading',
      background: 'rgba(0, 0, 0, 0.7)',
    })
    if (level.value === '2') {
      getUnitstwoTree()
        .then((res) => {
          interData.value = res.data
          loading.close()
        })
        .catch(() => {
          loading.close()
        })
    } else {
      getUnitsTree()
        .then((res) => {
          interData.value = res.data
          loading.close()
        })
        .catch(() => {
          loading.close()
        })
    }
  }
  onLoad()

  watch(filterText, (val) => {
    treeRef.value.filter(val)
  })

  watch(
    () => props.dialogVisible,
    (newVal) => {
      if (newVal) {
        nextTick(() => {
          treeRef.value.setCheckedKeys([], false)
          console.log(props.unitData, 1111)
          treeRef.value.setCheckedNodes(props.unitData)
          tableData.value = props.unitData
        })
      }
    },
    { immediate: true }
  )

  const filterNode = (value, data) => {
    if (!value) return true
    return data.orgObjMdmName.includes(value)
  }

  const handleCheckChange = () => {
    tableData.value = treeRef.value.getCheckedNodes(false, false)
  }

  const cancelDialog = () => {
    emit('update:dialogVisible', false)
  }
  const submitDialog = async () => {
    tableData.value.forEach((item) => {
      item.scc = item.id
      item.unitName = item.orgObjMdmName
      item.unitCode = item.id
      item.children = []
    })
    emit('update:unitData', tableData.value)
    emit('update:dialogVisible', false)
    emit('change-unit', tableData.value)
    console.log(tableData.value, '确定')
  }
</script>
<style scoped>
  .filter-tree {
    position: relative;
    width: 380px;
    height: 500px;
    overflow-y: auto;
  }
</style>
接口数据

src\api\common\base.js

import request from '@src/utils/request'

//枚举值查询 process.env.VUE_APP_URL--> apiUrl
const configInfo = sessionStorage.getItem('configInfo') || '{}'
const apiUrl = JSON.parse(configInfo)?.baseApiUrl || 'http://27.86.34.99/kjapi'

//单位组织树全部数据
export const getUnitsTree = (params) => {
  return request({
    url: `${apiUrl}/srbm-bas-mdm-front/member/feignDataRel/org/tolTree`,
    method: 'get',
    params,
  })
}

//单位组织树2级数据
export const getUnitstwoTree = (params) => {
  return request({
    url: `${apiUrl}/srbm-bas-mdm-front/member/feignDataRel/org/twoTree`,
    method: 'get',
    params,
  })
}
2级数据

http://27.86.34.99/kjapi/srbm-bas-mdm-front/member/feignDataRel/org/twoTree

{
  "code": "00000",
  "success": true,
  "data": [
    {
      "id": "58",
      "orgObjCode": "0e9c9e3f757645fa92710b89ab33813a",
      "pOrgObjCodeInner": "0",
      "orgObjMdmName": "国家电网公司",
      "mgtOrgCode": "0000",
      "children": [
        {
          "id": "3291",
          "orgObjCode": "019468e5ad2942c19ea70e8ad113ea52",
          "pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
          "orgObjMdmName": "全球能源互联网集团有限公司",
          "mgtOrgCode": "0037",
          "children": [],
          "hasChildren": false,
          "porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
        },
        {
          "id": "3287",
          "orgObjCode": "0916a6a7839d45bdab54c8759ab79e97",
          "pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
          "orgObjMdmName": "中国电力技术装备有限公司",
          "mgtOrgCode": "0036",
          "children": [],
          "hasChildren": false,
          "porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
        },
        {
          "id": "3296",
          "orgObjCode": "0ce337c3bd5a41fa812fcfd5f8051add",
          "pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
          "orgObjMdmName": "中国电力科学研究院有限公司",
          "mgtOrgCode": "0038",
          "children": [],
          "hasChildren": false,
          "porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
        },
        {
          "id": "3289",
          "orgObjCode": "10ca50caada54792a0e2e95964ea2916",
          "pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
          "orgObjMdmName": "国网智能电网研究院有限公司",
          "mgtOrgCode": "0042",
          "children": [],
          "hasChildren": false,
          "porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
        },
        {
          "id": "1032",
          "orgObjCode": "17ca61f8c2f6486aafc88852ea360b0c",
          "pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
          "orgObjMdmName": "国家电网有限公司大数据中心",
          "mgtOrgCode": "0058",
          "children": [],
          "hasChildren": false,
          "porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
        }
      ],
      "hasChildren": true,
      "porgObjCodeInner": "0"
    }
  ],
  "message": "操作成功"
}
全量数据

http://27.86.34.99/kjapi/srbm-bas-mdm-front/member/feignDataRel/org/tolTree

{
  "code": "00000",
  "success": true,
  "data": [
    {
      "id": "58",
      "orgObjCode": "0e9c9e3f757645fa92710b89ab33813a",
      "pOrgObjCodeInner": "0",
      "orgObjMdmName": "国家电网公司",
      "mgtOrgCode": null,
      "children": [
        {
          "id": "3",
          "orgObjCode": "6aa31ca4eba34073b3232a27161e4db1",
          "pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
          "orgObjMdmName": "国家电网有限公司华中分部",
          "mgtOrgCode": null,
          "children": [
            {
              "id": "4",
              "orgObjCode": "cf0db6cf5978452eb64fd18aec395cc4",
              "pOrgObjCodeInner": "6aa31ca4eba34073b3232a27161e4db1",
              "orgObjMdmName": "国家电网有限公司华中分部后勤管理中心",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "6aa31ca4eba34073b3232a27161e4db1"
            },
            {
              "id": "16",
              "orgObjCode": "79c78961a06b4e3a93cc8eb209a7c6e5",
              "pOrgObjCodeInner": "6aa31ca4eba34073b3232a27161e4db1",
              "orgObjMdmName": "国家电网有限公司华中分部电网技术支持中心",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "6aa31ca4eba34073b3232a27161e4db1"
            }
          ],
          "hasChildren": true,
          "porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
        },
        {
          "id": "17",
          "orgObjCode": "2c205be18f3849e3996948a76836e3f9",
          "pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
          "orgObjMdmName": "国家电网公司东北分部",
          "mgtOrgCode": null,
          "children": [
            {
              "id": "13",
              "orgObjCode": "f7c7b8a0b1f54553ae3dc0acfc00f921",
              "pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
              "orgObjMdmName": "东北分部后勤管理中心",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
            },
            {
              "id": "18",
              "orgObjCode": "0adfff04222741e89d2def254abf83e1",
              "pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
              "orgObjMdmName": "国家电网公司东北分部",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
            },
            {
              "id": "21",
              "orgObjCode": "58e662c160db43d1a3af3214296f6008",
              "pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
              "orgObjMdmName": "云峰发电厂（国网东北分部绿源水力发电公司）",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
            },
            {
              "id": "23",
              "orgObjCode": "e58f92a3dbeb45baade2d09034fddc07",
              "pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
              "orgObjMdmName": "国网东北分部电网技术支持中心",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
            },
            {
              "id": "24",
              "orgObjCode": "ff187d22bb95449187374c4665ae7b0b",
              "pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
              "orgObjMdmName": "太平湾发电厂（国网东北分部绿源水力发电公司）",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
            },
            {
              "id": "27",
              "orgObjCode": "31a5d47e3317434baa4dab701b2a8a7f",
              "pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
              "orgObjMdmName": "望江楼水电站工程建设局（国网东北分部绿源）",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
            },
            {
              "id": "34",
              "orgObjCode": "238c2347ebfd42b8918371bd2f4ae158",
              "pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
              "orgObjMdmName": "望江楼水电站工程建设局",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
            },
            {
              "id": "36",
              "orgObjCode": "1b125856b5814d3b905177b05f47e923",
              "pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
              "orgObjMdmName": "太平湾发电厂",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
            },
            {
              "id": "37",
              "orgObjCode": "6a43230d80614c1ca91656e2dd82dd1b",
              "pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
              "orgObjMdmName": "云峰发电厂",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
            },
            {
              "id": "44",
              "orgObjCode": "08e30b3bc8954e1c9704a861f7b7f8f3",
              "pOrgObjCodeInner": "2c205be18f3849e3996948a76836e3f9",
              "orgObjMdmName": "检修公司（国网东北分部绿源水力发电公司）",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2c205be18f3849e3996948a76836e3f9"
            }
          ],
          "hasChildren": true,
          "porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
        },
        {
          "id": "38",
          "orgObjCode": "45178125acfe422b91e751b31a234478",
          "pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
          "orgObjMdmName": "国家电网有限公司西北分部",
          "mgtOrgCode": null,
          "children": [
            {
              "id": "50",
              "orgObjCode": "e20c012d06924396996b3d30da496529",
              "pOrgObjCodeInner": "45178125acfe422b91e751b31a234478",
              "orgObjMdmName": "西北分部电网技术支持中心（支撑机构）",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "45178125acfe422b91e751b31a234478"
            },
            {
              "id": "55",
              "orgObjCode": "5fc1336f36334a9ca7dcf95501c63832",
              "pOrgObjCodeInner": "45178125acfe422b91e751b31a234478",
              "orgObjMdmName": "西北分部后勤管理中心(支撑机构）",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "45178125acfe422b91e751b31a234478"
            }
          ],
          "hasChildren": true,
          "porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
        },
        {
          "id": "51",
          "orgObjCode": "30c1ffad5d664d65a5a3054427ee2b02",
          "pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
          "orgObjMdmName": "国家电网公司西南分部",
          "mgtOrgCode": null,
          "children": [],
          "hasChildren": false,
          "porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
        },
        {
          "id": "62",
          "orgObjCode": "2fb658beab814d69b7fb7ec596a378b6",
          "pOrgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a",
          "orgObjMdmName": "国网北京市电力公司",
          "mgtOrgCode": null,
          "children": [
            {
              "id": "1",
              "orgObjCode": "04a31c3dd75c4990b92103a9fec4232c",
              "pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
              "orgObjMdmName": "国网北京市电力公司房山供电公司",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
            },
            {
              "id": "6",
              "orgObjCode": "d8660f3cf0344fc6865edd332e6180e6",
              "pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
              "orgObjMdmName": "国网北京市电力公司物资分公司（国网京电（北京）招标有限公司）",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
            },
            {
              "id": "7",
              "orgObjCode": "a287151c2f8845309c848b3a27c7b80a",
              "pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
              "orgObjMdmName": "国网北京市电力公司大兴供电公司",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
            },
            {
              "id": "8",
              "orgObjCode": "7606460177aa4259bcc1244e5e4452e1",
              "pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
              "orgObjMdmName": "国网北京市电力公司信息通信分公司",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
            },
            {
              "id": "10",
              "orgObjCode": "730cc4c780074444b91768eee928dff6",
              "pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
              "orgObjMdmName": "国网北京市电力公司平谷供电公司",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
            },
            {
              "id": "14",
              "orgObjCode": "a293f054bd7748509c106240b0258082",
              "pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
              "orgObjMdmName": "国网北京市电力公司综合服务中心",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
            },
            {
              "id": "19",
              "orgObjCode": "aa68fca7d7034ec2a9c379b315336ffc",
              "pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
              "orgObjMdmName": "中共国网北京市电力公司党校（北京首电人才服务有限公司）",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
            },
            {
              "id": "20",
              "orgObjCode": "80935987da0a4d3c86dc7251a63bc126",
              "pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
              "orgObjMdmName": "国网北京市电力公司密云供电公司",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
            },
            {
              "id": "25",
              "orgObjCode": "55940778b41a444eb7444f24aecf7d4f",
              "pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
              "orgObjMdmName": "国网北京市电力公司客户服务中心",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
            },
            {
              "id": "60",
              "orgObjCode": "6252635d76074d73bcc64cea66fbe847",
              "pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
              "orgObjMdmName": "国网北京市电力公司业务发展中心",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
            },
            {
              "id": "61",
              "orgObjCode": "a8d87150253e4884b3c0dd188237148a",
              "pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
              "orgObjMdmName": "国网北京市电力公司经济技术研究院(北京电力经济技术研究院有限公司）",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
            },
            {
              "id": "63",
              "orgObjCode": "0da674bae1724f17a1bed7ac18ee5059",
              "pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
              "orgObjMdmName": "国网北京市电力公司物业管理公司",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
            },
            {
              "id": "77",
              "orgObjCode": "827e45bc2f6d4b2aa82b1d18315a507e",
              "pOrgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6",
              "orgObjMdmName": "北京电力工程有限公司",
              "mgtOrgCode": null,
              "children": [],
              "hasChildren": false,
              "porgObjCodeInner": "2fb658beab814d69b7fb7ec596a378b6"
            }
          ],
          "hasChildren": true,
          "porgObjCodeInner": "0e9c9e3f757645fa92710b89ab33813a"
        }
      ],
      "hasChildren": true,
      "porgObjCodeInner": "0"
    }
  ],
  "message": "操作成功"
}
viceen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-virtual-tree:基于Vue3的大量数据的树组件
04-30
虚拟树 基于vue3封装的树组件，该树组件专用于大数据量，如果数据量不大，则使用此组件会有点浪费 英文＆ 如何使用 npm i vue-virtual-tree 全局注册，但这会丢失类型，如果您使用打字稿，则不建议使用此方法 import { createApp } from 'vue' ; import VirTree from 'vue-virtual-tree' ; createApp ( App ) . use ( VirTree ) . mount ( '#app' ) ; In components : < vir> 部分注册，您可以获得完整的类型 < template> < div xss=removed> < vir xss=removed> < / div > < / template > < s
实现 el-tree 自定义节点的新增、修改和删除
HuuXiaoTian的博客
09-11 1787
在网上找了好多代码，总是会有各种问题，成功只能靠自己呀。
【前端】vue3树形组件使用
最新发布
weixin_43366051的博客
04-22 1710
随着开发语言及人工智能工具的普及，使得越来越多的人学习使用vue前端工具，本文主要是介绍vue3中树形组件的使用。树形组件是一种常见的用户界面元素，用于以层次结构的形式显示数据。它通常用于展示具有父子关系的数据，例如文件系统结构、组织架构、类别和子类别等。树形组件通常由树节点（节点）组成，每个节点可以包含子节点，形成树状结构。用户可以展开或折叠节点，以便查看或隐藏其子节点。用户可以选择一个或多个节点，以执行特定操作，例如删除、移动或编辑。允许用户通过拖放节点来重新组织树的结构。
[vue3] Tree/TreeSelect树形控件使用
沫洺的博客
10-31 5451
Tree/TreeSelect树形控件使用
vue3 el-tree ts数据格式递归处理，获取所有父节点信息，实时筛选
weixin_40449665的博客
09-02 5313
实现el-tree筛选，其中要注意数据格式的处理以及所有父节点信息的获取
基于vue3和elementPlus的el-tree组件实现懒加载点击节点展开列表
W-Mo-Mo的博客
08-04 3091
经常会遇到树状结构的页面，刚开始不是一股脑把树状数据全加载出来了，而是基于懒加载 点击节点后调取接口再展开。基于vue3和elementPlus的el-tree组件做个记录~
Vue3问题：如何实现el-tree树的单选？
m0_74802419的博客
11-19 2285
使用el-tree组件，渲染树状数据。 要求默认全部展开、不显示复选框、支持单选、以及点击父级节点时不折叠子节点。 当然，还有个小细节就是，点击当前节点要高亮显示。
vue3 ant-design-vue3 tree树形控件的使用
weixin_44565776的博客
01-31 1377
在实践中学习，在学习中成长，在成长中实践，不断循环迭代。在使用一种框架时，不仅仅是使用该框架本身，更多的是要思考，在使用框架的过程中，如何将这种运用框架的能力移植到其它的框架上，毕竟互联网技术更新快，前端框架也是层出不穷，如何将这种能力梳理成一种底层的能力，这才是核心的核心。
Vue3---手写Tree组件
Dormiveglia-flx的博客
04-04 1464
1 添加myOptions ,使之双向绑定，绑定的数据来自prop.options传来的数据，不直接用prop.options传来数据的原因是因为要加isOpen，防止原数据遭到污染。但是问题是现在的数据有的item会有4层的children，有的item会有10层的children，，但是我们不能准确的知道需要使用多少个v-for。重点：通过isOpen属性的true，false，来使组件是否v-show隐藏显示。关于使用v-for 和 递归时候，数据是怎么渲染出来的分析。，这个时候，我们可以考虑。
vue3-blocks-tree:vue3块组织树视图组件。 分层的水平或垂直树
04-29
vue3块树基于Vue3.x的简单组织结构树视图。 它支持事件，时段，水平视觉和节点操纵感谢和他以vue 2为基础的资料。用法< template> < h1>Basic</ h1> < div> ...
3.（vue3.x+vite）el-tree组件（数组结构数据转树结构数据）.rar
09-22
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725
vued3treeVUE实现自定义节点的树结构
08-09
vued3treeVUE实现自定义节点的树结构
vue2树形组件打造vue2下最简洁高效的树组件
08-12
vue2树形组件,打造vue2下最简洁高效的树组件
vue-tree-chart:由D3.js支持的使用Canvas和Svg的灵活树形图
05-01
使用unique-color方式识别Canvas中的鼠标单击事件（您可以参考以查看详细信息）SVG版本使用D3计算节点和链接位置使用Vue处理dom元素进入和离开使用Vue插槽让用户轻松使用自己的数据如何使用？SVG版本1.安装npm模块...
vue-tree-list:tree树形结构的Vue组件
05-02
Vue树列表 树结构的Vue组件。 支持添加treenode / leafnode，编辑节点名称并拖动。 安装 安装插件，然后您就可以全局使用该组件了。 import Vue from 'vue' import VueTreeList from 'vue-tree-list' Vue . use ( ...
基于iView和he-tree-vue的一个拖拽树形组件
12-16
树形组件：支持selected选中状态（单/多），checkbox选择框，拖拽功能，增、删、改功能，双击展开、箭头展开收起功能，全部展开、收起功能，自定义图标、按钮、辅助信息等。
vue实现树状结构+拖拽
m0_57057282的博客
09-08 1826
然后树组件和树组件对应的拖拽都完成了，该进行拖拽区域的设置了。我这里用到了pubsub.js，相关内容小伙伴可以自行百度。我直接推一手链接，直接用他的最终源码就可以。用到了事件总线总归是有些麻烦的。1.首先说树状结构的实现。menudata结构如下。然后，我这里有一些改动。就这样吧，拍拍手，下播。
vue3树形下拉框组件
bajiutao的博客
12-20 2717
vue3树形下拉框组件
Vue3 Element-Plus Tree组件基本使用
白瑕 的博客
04-29 9814
快速呈现出简易的一个Tree组件.
在vue3中使用自定义v-model获取树形数据，要求使用el-tree和计算属性
05-30
好的，这是一个关于Vue3的问题，我会尽力回答。 首先，我们需要了解vue3中v-model的实现方式。在vue3中，v-model实际上是一个语法糖，它会根据组件的props和events来自动生成代码，从而实现双向绑定。 接下来，我们需要明确需求：要使用el-tree组件展示树形数据，并且要实现自定义v-model，以实现双向绑定。 那么，我们该如何实现呢？ 首先，我们需要在组件中定义一个value属性，用来保存树形数据。然后，在组件的props中定义一个modelValue属性，用来接收父组件传递的数据。在组件的events中，我们需要定义一个update:modelValue事件，用来向父组件发送数据更新的信号。 代码示例： ``` <template> <el-tree :data="treeData" :props="defaultProps" v-model:value="value"></el-tree> </template> <script> export default { props: { modelValue: { type: Array, default: () => [] } }, emits: ['update:modelValue'], data() { return { value: [] } }, computed: { treeData() { // 对modelValue进行处理，生成树形数据 // ... return treeData }, defaultProps() { return { children: 'children', label: 'label' } } }, watch: { modelValue(newValue) { this.value = newValue }, value(newValue) { this.$emit('update:modelValue', newValue) } } } </script> ``` 在上面的代码中，我们定义了一个value属性，用来保存树形数据。在props中，我们定义了一个modelValue属性，用来接收父组件传递的数据。在events中，我们定义了一个update:modelValue事件，用来向父组件发送数据更新的信号。在computed中，我们定义了一个treeData计算属性，用来将modelValue转换成树形数据。在watch中，我们监听modelValue和value属性的变化，以实现双向绑定。 最后，我们在父组件中使用自定义v-model来绑定数据即可： ``` <template> <my-tree v-model="treeData"></my-tree> </template> <script> import MyTree from './MyTree.vue' export default { components: { MyTree }, data() { return { treeData: [] } } } </script> ``` 在上面的代码中，我们使用了自定义v-model来绑定数据，实现了双向绑定。 希望这个回答能够帮到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值