当前位置: 首页 > 编程日记 > 正文

Vue开发中使用Element UI过程中遇到的问题及解决方案Missing required prop: “value”

一、vue中使用el-table的type=index有时不显示序号
Table 表格

用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。可以使用width属性来定义列宽。

显示索引

如果需要显示索引,可以增加一列el-table-column,设置type属性为index即可显示从 1 开始的索引号。

<el-table-column
      type="index"
      width="50">
</el-table-column>
自定义索引

通过给 type=index 的列传入 index 属性,可以自定义索引。该属性传入数字时,将作为索引的起始值。也可以传入一个方法,它提供当前行的行号(从 0 开始)作为参数,返回值将作为索引展示。

<el-table-column
      type="index"
      :index="indexMethod">
</el-table-column>
methods: {
  indexMethod(index) {
    return index * 2;
  }
}

在这里插入图片描述

报错信息

el-table中通过type=index来显示序号。有时候序号不能正常显示。

解决方案

使用template来换一种写法

<el-table-column label="序号" width="50" align="center">
    <template slot-scope="scope">{{scope.$index+1}}</template>
</el-table-column>
二、vue中Missing required prop: “value” 报错

在这里插入图片描述

报错原因
  • 表单中没有进行双向数据绑定(v-model)
<el-form-item label="活动名称">
    <el-input></el-input>
</el-form-item>
  • el-option没有进行value赋值
<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label">
    </el-option>
</el-select>
解决方案
  • 表单中每一项都要使用v-model绑定
<el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
</el-form-item>
  • el-option进行value赋值
<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
</el-select>

若el-select进行了双向数据绑定,且每一项el-option都进行了value赋值,然而还报了这个错,这时需要检查下每一项绑定value的变量是否都在数组中存在。

相关文章:

vue3项目中使用vite-plugin-mock

-设置模拟数据的存储文件夹,如果不是index.js需要写明完整路径。supportTs?: boolean;--是否读取ts文件模块,设置为true时不能读取js文件。--是否在控制台显示请求日志。4、利用axios调用。

elementPlust 的el-select在提示框关闭时自动弹出

主要问题就是因为filterable属性,根本解决方案是选中的时候让他失去焦点 el-select有一个visible-change事件,下拉框出现/隐藏时触发。当el-select添加filterable属性时,弹提示窗时,点击确定后,下拉框会自动弹出。console.log('弹窗出select', item)增加了visible-change事件。el-select事件最后增加焦点取消。

vue3 项目中 arguments 对象获取失败问题

在 vue3 项目中获取到的 arguments 对象与传入实参不符,打印出函数中的 arguments 对象如下...

uniap vue3 组件使用uni.createSelectorQuery() 获取dom报错

批量查询时,结果是按照查询的顺序返回的。由于vue3中没有this,所以使用。

vue+element ui实现图片上传并拖拽进行图片排序

vue+element ui实现图片上传并拖住进行图片排序

html 原生网页使用ElementPlus 日期控件el-date-picker换成中文

原生的html,加jQuery使用不习惯,新html页面导入vue3,element plus做界面,现在需要把日历上英文切成中文。elementplus, vue3对应的js都可以通过创建一个vue3项目找到对应的脚本导入)然后在node_modules对应目录的文件,把它拷贝到html项目即可。

vue3解决切换tab页每次切换加载数据导致数据缓慢问题

使用标识符来进行辨认 有两个tab页 搞个动态加载 在开头的vedioload还没开始加载的时候判断是否加载过 入股已经加载过 则返回 不要重新加载。由标签页的离线和在线数据 都分开管理 使用两个列表:即一个数组两个对象进行存储 数组的下标有tab0 tab1 动态决定 代替原来的直接覆盖数据。loadvideos会根据loadedTabs的状态决定是否需要加载数据。

基于SpringBoot的校园二手闲置交易平台

基于SpringBoot的校园二手闲置交易平台的设计与实现~

vue写了这么久了你对slot的理解是什么?slot使用场景有哪些?

如果父组件在使用到一个复用组件的时候,获取这个组件在不同的地方有少量的更改,如果去重写组件是一件不明智的事情。在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中。子组件在作用域上绑定属性来将子组件的信息传给父组件使用,这些属性会被挂在父组件。插槽向组件内部指定位置传递内容,完成这个复用组件在不同场景的应用。父组件在使用的时候,直接在子组件的标签内写入内容即可。结构,当父组件使用的时候没有往插槽传入内容,标签内。第三个参数,父组件则能够得到子组件传递过来的值。

解决 Hbuilder打包 Apk pad 无法横屏 以及 H5 直接打包 成Apk

下面是创建app 项目 wap站首页地址 可以配置 你H5的登录页 也可以是 你的index 页面 然后 会有一些 配置 你可以去百度 manifest.json 这个 配置文件 配置一下 就可以了 很方便 打包后直接 可以安装 到手机上。如果 你有自己的H5 也可以 自己去创建一个空壳 只需要 加上你 H5的请求地址 就可以了。当然 你的 H5前提是做了 自适应 不然 样式会很丑的。下面是manifest.json 配置文件。

Vue 3 开发中遇到的问题及解决方案(fix bug)

vite v3.2.4 building for development...'hasInjectionContext' is not exported by node_modules/pinia/node_modules/vue-demi/lib/index.mjs, imported by node_modules/pinia/dist/pinia.mjsat ../node_modules/pinia/dist/pinia.mjs:6:9 4: * @license MIT 5: */

vue实现动态路由菜单!!!

文章浏览阅读244次,点赞2次,收藏2次。递归处理后端响应的菜单树,后依次通过addRoute方法往静态父路由,添加动态子路由,添加完使用el-menu渲染并添加router属性实现路由菜单模式。