一. Tags 组件动效异常
使用列表渲染时，如果使用index作为key的话，会导致组件的动效异常。
<el-tag type="info"
size='medium'
:disable-transitions='true'
v-for="tag in scope.row.tags"
:key="tag.name">{{tag.name}}</el-tag>
解决方案：可以设置:disable-transitions='true'关闭动效，当然最好的办法是不用index。
二. Table 组件行内编辑的表单验证
当以上两个组件组合行内编辑框表的时候，比如：
<el-table-column label="省份代码"
align="center">
<template slot-scope="scope">
<template v-if="scope.row.edit">
<el-form :ref="'code'+scope.$index"
:rules="rules"
:model="scope.row">
<el-form-item prop='code'>
<el-input size="mini"
v-model.number="scope.row.code"></el-input>
</el-form-item>
</el-form>
</template>
<span v-else>{{scope.row.code}}</span>
</template>
</el-table-column>
一般是需要表单验证的，目前想到的办法就是一个cell一个表单，这就会遇到问题：
ref的怎么命名，可以保证每行的表单之间独立验证，且一行内的表单统一验证
解决方案：命名参考以上代码，我通过数据的key+每行的$index进行命名，并对保存按钮这样传参：
<el-button v-if="scope.row.edit"
type="success"
size="mini"
@click="edit(scope.row,[Object.keys(scope.row)],scope.$index)">保存</el-button>
<el-button v-else
type="primary"
size="mini"
@click='scope.row.edit=!scope.row.edit'>编辑</el-button>
方法内部：
edit(row, formNameArr, index) {
let success = true
formNameArr[0] = formNameArr[0].map((key) => {
return key + index
})
for (const column of formNameArr[0]) {
if (this.$refs[column]) {
this.$refs[column].validate((valid) => {
if (!valid) {
success = false
}
})
}
}
if (success) {
// 发送改动请求
}
}
暂且解决了问题，以后有更好的办法再说ԅ(¯﹃¯ԅ)
三. 表单验证数字长度
包括antd和element-ui的表单验证都使用了 async-validator ，但是在并不能验证数字长度,即使使用了.number修饰符。
表单验证数字长度
找了下源码，发现对于数字类型并没有做处理
async-validator/src/rule/range.js
// len为验证的长度，val为用户输入的数组或字符串长度
if (len) {
if (val !== rule.len) {
errors.push(util.format(options.messages[key].len, rule.fullField, rule.len));
}
}
解决方案：要么去完善插件的源代码，或者不使用.number修饰符，就把输入值当作字符串处理，在需要的时候转换为数字。
