报错信息:
分析原因:
看网上有博主分享原因是因为页面有rules
不能和value-fomatter共存
需要删掉value-fomatter;
但是这里有一点需要注意如果不加value-format,时间会回显1970,此时其实就是数据类型的问题,日期选择器接受的数据都是string类型,而我们拿到的值是number类型,我们需要给它加一个String()方法来处理。
此时的写法是如下代码块:
<el-table-column
prop="years"
label="年度"
width="120"
fixed="left"
>
<template slot-scope="scope">
<template v-if="scope.row.newDataFlag">
<el-form-item
:key="scope.$index"
:prop="'materialList['+scope.$index +'].years'"
:rules="[{required: true, message: '请输入', trigger: 'blur'}]"
>
<el-date-picker
v-model="scope.row.years"
type="year"
value-format="yyyy"
placeholder="选择年"
style="width:100px"
/>
</el-form-item>
</template>
<template v-else>
<span>{{ scope.row.years }}</span>
</template>
</template>
</el-table-column>
解决方法:
因为我是在当前的el-table表格中去使用的,是用row去v-model绑定值得,需要知道每一行。
所以我在这里用的watch监听,去进行更改。
watch: {
'form.materialList': {
deep: true,
handler: function(newVal, oldVal) {
newVal.forEach(row => {
if (row.years) {
// 将年转换为字符串
console.log(typeof row.years, '年没有转换的类型yyyy1');
console.log(typeof row.years.toString(), '年转换后的类型yyyy2');
row.years = row.years.toString();
}
});
},
},
},
解决方法二:
可以直接在赋值的位置进行字符串拼接
value.years = value.years + ' ';