vue3封装表单组件（二）01之el-tree-select & vue3封装组件写法

vue3封装表单组件（二）01之el-tree-select & vue3封装组件写法

效果

方式一：常规写法

index.vue

<template> <div class="about"> <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="120px" class="demo-ruleForm"> <el-form-item label="牵头单位" prop="leadUnit"> <el-tree-select v-model="ruleForm.leadUnit" :data="companyData" :props="{ value: 'unitCode', label: 'unitName' }" value-key="unitCode" @change="(val: any) => handleUnitChange(val)" placeholder="请选择" /> </el-form-item> </el-form> </div> </template> <script lang="ts" setup> import { reactive, ref } from 'vue' import unitSelect from '@/components/unitSelect' const ruleFormRef = ref(null) const ruleForm = reactive({ leadUnit: '' }) const companyData = ref([ { id: 0, unitCode: '0', unitName: '集团总部', children: [ { id: 1, unitCode: '1', unitName: '北京总部', children: [ { id: 2, unitCode: '2', unitName: '朝阳分公司', }, { id: 3, unitCode: '3', unitName: '海淀分公司', }, { id: 4, unitCode: '4', unitName: '昌平分公司', } ] } ] } ]) // const findField = (data: any, val: any, res = []){ // if (!Array.isArray(data)) { // return [] // } // data.forEach(item => { // if (item.unitCode === val) { // res.push(item) // } // if (item.children && item.children.length) { // findField(item.children, val, res) // } // }) // return res // } const handleUnitChange = (val: any) => { console.log(val ); // const obj = findField(companyData.value, val) // ruleForm.leadUnit = obj[0] } </script> <style scoped> .about { width: 500px; } </style> 

方式二：封装写法

1、页面

index.vue

<template> <div class="about"> <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="120px" class="demo-ruleForm"> <el-form-item label="牵头单位" prop="leadUnit"> <unitSelect v-model="ruleForm.leadUnit"/> </el-form-item> </el-form> </div> </template> <script lang="ts" setup> import { reactive, ref } from 'vue' import unitSelect from '@/components/unitSelect' const ruleFormRef = ref(null) const ruleForm = reactive({ leadUnit: '' }) </script> <style scoped> .about { width: 500px; } </style> 

引用组件

2、组件

src\components\unitSelect.vue

<template> <el-tree-select v-model="unitValue" :data="companyData" :props="{ value: 'unitCode', label: 'unitName' }" value-key="unitCode" @change="selectUnitEvent" placeholder="请选择"/> </template> <!-- @change="(val: any) => handleUnitChange(val)" 等价于 @change="selectUnitEvent" --> <script lang="ts" setup> // import { getUnits } from '@/api/couny' import { emitChangeFn } from 'element-plus'; import { ref, toRef } from 'vue' const props = defineProps({ modelValue: { defult: null, type: String } }) const emit = defineEmits(['update:modelValue']) const unitValue = toRef(props, 'modelValue') const companyData = ref([ { id: 0, unitCode: '0', unitName: '集团总部', children: [ { id: 1, unitCode: '1', unitName: '北京总部', children: [ { id: 2, unitCode: '2', unitName: '朝阳分公司', }, { id: 3, unitCode: '3', unitName: '海淀分公司', }, { id: 4, unitCode: '4', unitName: '昌平分公司', } ] } ] } ]) // const getUnitsList = async()=>{ // await getUnitsList().then((res:any)=>{ // companyData.value = res.data // }) // } // getUnitsList() const selectUnitEvent = (val: any) => { emit('update:modelValue', val) } </script> 

引用接口

3、接口

src\api\couny.js

import request from '@/utils/request' const url = '/thingsgrid-science' //枚举值查询--写法一 export const queryId = (id)=>{ 
    return request({ 
    url:`${ 
     url}/dict/queryDictById`, method:'post', data }) } // 获取表格数据 -- 写法二 export function getList(params){ 
    return request({ 
    url:'api/thingsgrid-system/dept/lazy-list', method:'get', params, }) } // 删除数据 -- 写法三 export function remove (params){ 
    return request({ 
    url:'api/thingsgrid-system/dept/remove', method:'post', params, }) } // 牵头单位组织树列表 export const getUnits = (data)=>{ 
    return request({ 
    url:`${ 
     url}/unit/getUnits`, method:'post', data }) } 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10752.html