The interface of el-select & `${} in vue3 encapsulated form component (1) extracts the common root
Effect
Method 1: Conventional writing method
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>
Method 2: Encapsulation writing method
1. Page
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>
Reference component
2. Components
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>
Reference interface
3. Interface
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
})
}