【vue项目开发遇到的问题】：vue.runtime.esm.js:1887 TypeError: dateStr.match is not a function

报错信息：

分析原因：
看网上有博主分享原因是因为页面有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 + ' ';