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

news2024/11/27 8:22:44

一、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>