Element-UI 问题记录（3/3）

一. 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修饰符，就把输入值当作字符串处理，在需要的时候转换为数字。