美文网首页
Element-UI 表格中使用输入验证

Element-UI 表格中使用输入验证

作者: ai耳边的呢喃 | 来源:发表于2019-08-07 09:26 被阅读0次

    html 部分

    <el-table
                ref="addPropertyTable"
                :data="ruleForm.propertyList"
                stripe
                border
                style="width: 100%;"
                height="250"
                :cell-style="cellStyleAlignCenter"
              >
                <el-table-column prop="name" label="名称"  >
                  <template slot-scope="scope">
                      <el-form-item :prop="`propertyList.${scope.$index}.name`" class="tab-form"
                                    style=" margin-bottom: 0" :rules="rulesTab.name">
                      <el-input v-model="scope.row.name"  class="tool-inp" placeholder="请输入属性名称"/>
                      </el-form-item>
                    </template>
                </el-table-column>
    </el-table>
    

    data数据

    data() {
          return {
            ruleForm:{
              propertyList:[
                  name:''
              ]
            },
            rulesTab: {
              name: [
                { required: true, message: '请输入名称', trigger: ['blur','change'] }
              ]
            }
          }
    }
    

    为了能显示出提示文字,需要对 css 进行修改

    <style lang="scss">     // 此处不可用scoped属性
    .tab-form .el-form-item__error{
        position: relative;
        left: -20px;
        line-height: 1 !important;
      }
    </style>
    
    image.png

    相关文章

      网友评论

          本文标题:Element-UI 表格中使用输入验证

          本文链接:https://www.haomeiwen.com/subject/cxyndctx.html