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-columntype="index"width="50">
</el-table-column>
自定义索引
通过给 type=index 的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。
<el-table-columntype="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-optionv-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-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option>
</el-select>
若el-select进行了双向数据绑定，且每一项el-option都进行了value赋值，然而还报了这个错，这时需要检查下每一项绑定value的变量是否都在数组中存在。