vue3封装表单组件（一）之el-select & `${}之接口抽离公共词根

vue3封装表单组件（一）之el-select & `${}之接口抽离公共词根

效果

方式一：常规写法

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="examineState"> <el-select v-model="ruleForm.processState" placeholder="请选择"> <el-option label="通过" value="1" /> <el-option label="驳回" value="2" /> </el-select> </el-form-item> </el-form> </div> </template> <script lang="ts" setup> import { reactive, ref } from 'vue' const ruleFormRef = ref(null) const ruleForm = reactive({ examineState: '' }) </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="examineState"> <!-- <el-select v-model="ruleForm.processState" placeholder="请选择"> <el-option label="通过" value="1" /> <el-option label="驳回" value="2" /> </el-select> --> <dictSelect v-model="ruleForm.examineState" :dictid="199" /> </el-form-item> </el-form> </div> </template> <script lang="ts" setup> import { reactive, ref } from 'vue' import dictSelect from '@/components/dictSelect' const ruleFormRef = ref(null) const ruleForm = reactive({ examineState: '' }) </script> <style scoped> .about { width: 500px; } </style> 

引用组件

2、组件

src\components\dictSelect.vue

<template> <!-- class="m-2" --> <el-select v-model="dictValue" placeholder="请选择" @change="selectDictEvent" size="default"> <el-option v-for="item in dictData" :key="item.paraCode" :label="item.paraDesc" :value="item.paraCode"> </el-option> </el-select> </template> <script lang="ts" setup> // import { queryId } from '@/api/couny' import { ref, toRef } from 'vue' const props = defineProps({ modelValue: { default: null, type: String }, dictid: { default: null, type: Number } }) const emit = defineEmits(['update:modelValue']) const dictData = ref([ { paraDesc: '通过', paraCode: '1', }, { paraDesc: '驳回', paraCode: '2', }, ]) const queryDictList = () => { console.log( props.dictid); // queryId({ id: props.dictid }).then((res: any) => { // dictData.value = res.data // }) } queryDictList() const dictValue = toRef(props, 'modelValue') const selectDictEvent = (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/10753.html