vue3——element-plus的el-inputnumber报错期望获得number却获得了streing

这个错误通常是由于在使用 el-input-number 时，传入的 v-model 或者 value 不是一个 number 类型，而是一个 string 类型导致的。你可以检查一下你传入的值类型是否正确。

如果你使用的是 v-model，可以尝试将绑定的变量转换成 number 类型，例如：

<el-input-number v-model="parseInt(num)" />

或者使用修饰符 .number，强制将绑定的值转换成 number 类型，例如：

<el-input-number v-model.number="num" />

如果你使用的是 value 属性，也可以将绑定的值转换成 number 类型，例如：

<el-input-number :value="parseInt(num)" />

希望能帮到你解决问题。

相关问题

drf+vue3+element-plus搭建CRUD的案例

以下是drf+vue3+element-plus搭建CRUD的案例：

1. 创建Django项目，命名为backend，创建Django APP，命名为api。

2. 在api中创建models.py文件，定义模型：

   from django.db import models

   class Book(models.Model):
       title = models.CharField(max_length=100)
       author = models.CharField(max_length=100)
       price = models.DecimalField(max_digits=10, decimal_places=2)
       created_at = models.DateTimeField(auto_now_add=True)
       updated_at = models.DateTimeField(auto_now=True)

       def __str__(self):
           return self.title

3. 在api中创建serializers.py文件，定义序列化器：

   from rest_framework import serializers
   from .models import Book

   class BookSerializer(serializers.ModelSerializer):
       class Meta:
           model = Book
           fields = '__all__'

4. 在api中创建views.py文件，定义视图：

   from rest_framework import viewsets
   from .models import Book
   from .serializers import BookSerializer

   class BookViewSet(viewsets.ModelViewSet):
       queryset = Book.objects.all()
       serializer_class = BookSerializer

5. 在backend中配置api的url：

   from django.urls import path, include
   from rest_framework import routers
   from api.views import BookViewSet

   router = routers.DefaultRouter()
   router.register(r'books', BookViewSet)

   urlpatterns = [
       path('api/', include(router.urls)),
   ]

6. 在frontend中创建vue3项目，命名为frontend，安装element-ui和axios：

   yarn add element-plus axios

7. 在frontend中创建src/api/index.js文件，定义请求：

   import axios from 'axios'

   const instance = axios.create({
       baseURL: 'http://localhost:8000/api/',
       timeout: 1000,
       headers: {'Content-Type': 'application/json'}
   })

   export default {
       getBooks() {
           return instance.get('books/')
       },
       createBook(data) {
           return instance.post('books/', data)
       },
       updateBook(id, data) {
           return instance.put(`books/${id}/`, data)
       },
       deleteBook(id) {
           return instance.delete(`books/${id}/`)
       }
   }

8. 在frontend中创建src/views/BookList.vue文件，定义书籍列表组件：

   <template>
       <el-table :data="books" style="width: 100%">
           <el-table-column prop="title" label="书名"></el-table-column>
           <el-table-column prop="author" label="作者"></el-table-column>
           <el-table-column prop="price" label="价格"></el-table-column>
           <el-table-column label="操作">
               <template #default="{row}">
                   <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
                   <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
               </template>
           </el-table-column>
       </el-table>
   </template>

   <script>
   import api from '@/api'

   export default {
       name: 'BookList',
       data() {
           return {
               books: []
           }
       },
       async created() {
           const res = await api.getBooks()
           this.books = res.data
       },
       methods: {
           handleEdit(row) {
               this.$router.push({name: 'BookEdit', params: {id: row.id}})
           },
           async handleDelete(row) {
               try {
                   await api.deleteBook(row.id)
                   this.books = this.books.filter(book => book.id !== row.id)
                   this.$message.success('删除成功')
               } catch (error) {
                   this.$message.error('删除失败')
               }
           }
       }
   }
   </script>

9. 在frontend中创建src/views/BookCreate.vue文件，定义创建书籍组件：

   <template>
       <el-form :model="form" :rules="rules" ref="form" label-width="80px">
           <el-form-item label="书名" prop="title">
               <el-input v-model="form.title"></el-input>
           </el-form-item>
           <el-form-item label="作者" prop="author">
               <el-input v-model="form.author"></el-input>
           </el-form-item>
           <el-form-item label="价格" prop="price">
               <el-input v-model="form.price"></el-input>
           </el-form-item>
           <el-form-item>
               <el-button type="primary" @click="handleSubmit">创建</el-button>
           </el-form-item>
       </el-form>
   </template>

   <script>
   import api from '@/api'

   export default {
       name: 'BookCreate',
       data() {
           return {
               form: {
                   title: '',
                   author: '',
                   price: ''
               },
               rules: {
                   title: [
                       {required: true, message: '请输入书名', trigger: 'blur'}
                   ],
                   author: [
                       {required: true, message: '请输入作者', trigger: 'blur'}
                   ],
                   price: [
                       {required: true, message: '请输入价格', trigger: 'blur'},
                       {type: 'number', message: '价格必须为数字', trigger: 'blur'}
                   ]
               }
           }
       },
       methods: {
           async handleSubmit() {
               try {
                   await this.$refs.form.validate()
                   await api.createBook(this.form)
                   this.$message.success('创建成功')
                   this.$router.push({name: 'BookList'})
               } catch (error) {
                   this.$message.error('创建失败')
               }
           }
       }
   }
   </script>

10. 在frontend中创建src/views/BookEdit.vue文件，定义编辑书籍组件：

    <template>
        <el-form :model="form" :rules="rules" ref="form" label-width="80px">
            <el-form-item label="书名" prop="title">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="作者" prop="author">
                <el-input v-model="form.author"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
                <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSubmit">保存</el-button>
            </el-form-item>
        </el-form>
    </template>

    <script>
    import api from '@/api'

    export default {
        name: 'BookEdit',
        data() {
            return {
                id: this.$route.params.id,
                form: {
                    title: '',
                    author: '',
                    price: ''
                },
                rules: {
                    title: [
                        {required: true, message: '请输入书名', trigger: 'blur'}
                    ],
                    author: [
                        {required: true, message: '请输入作者', trigger: 'blur'}
                    ],
                    price: [
                        {required: true, message: '请输入价格', trigger: 'blur'},
                        {type: 'number', message: '价格必须为数字', trigger: 'blur'}
                    ]
                }
            }
        },
        async created() {
            const res = await api.getBooks()
            const book = res.data.find(book => book.id == this.id)
            this.form = book
        },
        methods: {
            async handleSubmit() {
                try {
                    await this.$refs.form.validate()
                    await api.updateBook(this.id, this.form)
                    this.$message.success('保存成功')
                    this.$router.push({name: 'BookList'})
                } catch (error) {
                    this.$message.error('保存失败')
                }
            }
        }
    }
    </script>

11. 在frontend中创建src/router/index.js文件，定义路由：

    import {createRouter, createWebHistory} from 'vue-router'
    import BookList from '@/views/BookList.vue'
    import BookCreate from '@/views/BookCreate.vue'
    import BookEdit from '@/views/BookEdit.vue'

    const routes = [
        {path: '/', name: 'BookList', component: BookList},
        {path: '/create', name: 'BookCreate', component: BookCreate},
        {path: '/edit/:id', name: 'BookEdit', component: BookEdit},
    ]

    const router = createRouter({
        history: createWebHistory(),
        routes
    })

    export default router

12. 在frontend中创建src/main.js文件，初始化vue3和element-plus：

    import {createApp} from 'vue'
    import App from './App.vue'
    import router from './router'
    import ElementPlus from 'element-plus'
    import 'element-plus/lib/theme-chalk/index.css'

    createApp(App).use(router).use(ElementPlus).mount('#app')

至此，我们成功地实现了一个简单的CRUD功能。

基于vue3 ts element-plus生成表格分页查询配置

好的，我们来一步步实现基于Vue3、TypeScript和Element Plus的表格分页查询配置。

1. 首先我们需要安装Vue3、Vue Router、Element Plus和Axios等依赖：

npm install vue@next vue-router@4.0.0-beta.8 element-plus@next axios

2. 在`main.ts`中引入Vue、VueRouter、Element Plus和Axios：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import axios from 'axios'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.config.globalProperties.$axios = axios
app.mount('#app')

3. 在`src/components`目录下创建一个`Table.vue`组件，用来展示表格数据：

<template>
  <el-table :data="tableData">
    <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column>
  </el-table>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    tableData() {
      return this.data.map(item => {
        const row = {}
        this.columns.forEach(column => {
          row[column.prop] = item[column.prop]
        })
        return row
      })
    }
  }
})
</script>

4. 在`src/components`目录下创建一个`Pagination.vue`组件，用来展示分页控件：

<template>
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  ></el-pagination>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleCurrentChange(currentPage: number) {
      this.$emit('update:currentPage', currentPage)
    },
    handleSizeChange(pageSize: number) {
      this.$emit('update:pageSize', pageSize)
    }
  }
})
</script>

5. 在`src/views`目录下创建一个`TableDemo.vue`视图组件，用来展示表格和分页控件：

<template>
  <div>
    <el-form :inline="true" :model="query" class="table-demo__form">
      <el-form-item v-for="field in fields" :key="field.prop" :label="field.label">
        <el-input v-model="query[field.prop]" placeholder="请输入"></el-input>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
    </el-form>
    <Table :columns="columns" :data="data"></Table>
    <Pagination :currentPage.sync="currentPage" :pageSize.sync="pageSize" :total="total"></Pagination>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import axios from 'axios'
import Table from '@/components/Table.vue'
import Pagination from '@/components/Pagination.vue'

export default defineComponent({
  components: {
    Table,
    Pagination
  },
  setup() {
    const fields = [
      { prop: 'name', label: '姓名' },
      { prop: 'age', label: '年龄' },
      { prop: 'gender', label: '性别' }
    ]
    const columns = [
      { prop: 'name', label: '姓名' },
      { prop: 'age', label: '年龄' },
      { prop: 'gender', label: '性别' }
    ]
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(0)
    const data = ref([])

    const query = ref({
      name: '',
      age: '',
      gender: ''
    })

    const fetchData = async () => {
      const res = await axios.get('/api/users', {
        params: {
          ...query.value,
          page: currentPage.value,
          size: pageSize.value
        }
      })
      data.value = res.data.items
      total.value = res.data.total
    }

    const handleSearch = () => {
      currentPage.value = 1
      fetchData()
    }

    fetchData()

    return {
      fields,
      columns,
      currentPage,
      pageSize,
      total,
      data,
      query,
      handleSearch
    }
  }
})
</script>

<style>
.table-demo__form {
  margin-bottom: 20px;
}
</style>

6. 在`src/router/index.ts`中配置路由：

import { createRouter, createWebHashHistory } from 'vue-router'
import TableDemo from '@/views/TableDemo.vue'

const routes = [
  {
    path: '/',
    name: 'TableDemo',
    component: TableDemo
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

7. 在`public`目录下创建一个`api`目录，用来模拟后端接口：

// api/users.json
{
  "total": 100,
  "items": [
    { "name": "张三", "age": 18, "gender": "男" },
    { "name": "李四", "age": 20, "gender": "女" },
    { "name": "王五", "age": 22, "gender": "男" },
    { "name": "赵六", "age": 24, "gender": "女" },
    { "name": "钱七", "age": 26, "gender": "男" }
  ]
}

8. 在`package.json`中添加一个`dev`命令，用来启动开发服务器：

{
  "scripts": {
    "dev": "vite"
  }
}

9. 启动开发服务器并访问`http://localhost:3000/`，就可以看到我们的表格和分页控件了。

以上就是基于Vue3、TypeScript和Element Plus的表格分页查询配置的实现步骤。