<template>
  <el-form :model="state.form" ref="form"  :label-width="labelWidth"
    @submit.native.prevent
    <el-row :gutter="20">
      <el-col v-bind="item.layout||layout" v-for="(item, index) in elements" :key="index">
        <el-form-item
          :prop="item.prop"
          :label="item.label"
          :label-width="item.labelWidth ? (item.labelWidth + 'px') : ''"
          <!-- el-input -->
          <el-input
            v-if="item.type === 'input' || item.type === undefined"
            v-model="state.form[item.prop]"
            :size="item.size ? item.size : size"
            :disabled="item.disabled"
            :placeholder="item.placeholder"
            :suffix-icon="item.suffixIcon"
            clearable
         </el-form-item>
       </el-col>
    </el-row>
  </el-form>
</template>
<script lang="ts" setup>
import { ref, reactive, defineProps,watch, PropType } from 'vue'
import { Search, RefreshLeft } from '@element-plus/icons-vue'
type elementItem = {
  prop: string,
  label: string,
  type: string,
  size?: string,
  disabled?: boolean,
  placeholder?: string,
  suffixIcon?: string,
  filterable?: boolean,
  multiple?: boolean,
  style?: object,
  optionGroup?: boolean,
  options: Array<any>,
  layout?:object,
  labelWidth?: number | string,
const emits = defineEmits(['search'])
const props = defineProps({
  // layout
    layout: {
      type: Object,
      default: () => ({
        lg: {
          span: 6,
        md: {
          span: 8,
        sm: {
          span: 12,
        xs: {
          span: 24,
    // 表单label宽度
    labelWidth: {
      type: [String, Number],
      default: 'auto',
    // 表单元素大小 默认 meidum
    size: {
      type: String,
      default: 'default',
      // validator: sizeValidator,
    // 表单元素
    elements: {
      type: Array as unknown as PropType<[elementItem]>,
      required: true,
    // 是否展示搜索、重置按钮
    hideBtns: {
      type: Boolean,
      default: false,
const form = ref()
const state = reactive({
  form: {},
  formatters: {},
</script>
在定义接口时，入参如果不定义类型会报：
(parameter) params: any
参数“params”隐式具有“any”类型。ts(7006)
解决办法就是给入参定义接口类型：

interface generalViewIn {
  page: number,
  pagesize: number,
//获取概览列表数据
export async function getGeneralView(params: generalViewIn) {
  return await http.get(Api.getGeneralView, params)
这样params入参就不会标红了。
对象使用变量索引时，会标红，报：
元素隐式具有 "any" 类型，因为类型为 "string" 的表达式不能用于索引类型 "{}"。\在类型 "{}" 上找不到具有类型为 "string" 的参数的索引签名。ts(7053)
解决办法：
最简单是方案是修改tsconfig.json配置：在"compilerOptions"下加入下面这句，就不报错了。还有其他方案：
  "compilerOptions": {
    "suppressImplicitAnyIndexErrors":true,
给reactive的变量赋值，会报：
不能将类型“{ path: any; meta: any; }[]”分配给类型“never[]”。\
不能将类型“{ path: any; meta: any; }”分配给类型“never”。ts(2322)
解决办法：
在声明变量出就定义类型：
在遍历中，item会报错：
解决办法： 给item定义类型
const subChildren = children.filter((item:any) => !item.meta?.hidden);
从路由中获取参数，然后传递给接口
// 变量声明
const { regionName="", regionId='',  status="" } = route.query
//接口声明
interface getHostListIn {
  regionId: string,
//接口使用
const getOptionList = () => {
  getHostList({regionId}).then((res) => {
  }).catch((err) => {
传给接口的入参使用从路由中获取的参数时会报错：
不能将类型“string | LocationQueryValue[]”分配给类型“string”。\
不能将类型“LocationQueryValue[]”分配给类型“string”。ts(2322)
解决办法：
修改接口入参声明类型：
//变量声明
const regionName = route.query.regionName
const regionId = route.query.regionId
const status = route.query.status
//接口声明
interface getHostListIn {
  regionId: string | LocationQueryValue[],
复制代码
  
分类：
 前端
 
标签：
 
JavaScript前端
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
    
友情链接：
 

        洪荒：我有亿个分身
        重生：我体内带个台式机