elment-ui表格中的表单验证

最新推荐文章于 2024-05-13 12:03:06 发布

weixin_33716557

最新推荐文章于 2024-05-13 12:03:06 发布

阅读量167

点赞数

文章标签： ui python

原文链接：https://my.oschina.net/u/4131669/blog/3048479

版权

2019独角兽企业重金招聘Python工程师标准>>>

elment-ui提供表单验证，而在实际中表格里也涉及表单验证，其关键点在于如何给表格中需要验证的字段动态添加prop，再给其绑定规则。

<el-form :rules="ruleProcessForm.rules" :model="ruleProcessForm"  ref="formProcess">
          <el-table
            :data="ruleProcessForm.processData"
            tooltip-effect="dark"
            style="width: 100%"
            >
            <el-table-column
            label="工序名称"
            prop="processName"
            >
              <template slot-scope="scope">
                <el-form-item :prop="'processData.' + scope.$index + '.processName'" :rules='ruleProcessForm.rules.processName'>
                  <el-select v-model="scope.row.processName" 
                    @visible-change="getProcessNameInfo"
                    @change="processNameChange(scope.row)"
                    placeholder="工序名称">
                    <el-option
                      v-for="item in processNameList"
                      :key="item.processId"
                      :label="item.processName"
                      :value="item.processName">
                    </el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
<script>
  export default {
    data () {
      return {
        formProcess:{
                processName:"",
            },
        ruleProcessForm : {
            rules: {
              processName:[{ required: true, message: '请选择工序名称', trigger: 'change' }],
            },
            processData: []
        }
      }
    },
    methods: {
      this.$refs["formProcess"].validate((valid,ruleProcessForm) => {
        console.log(valid)
          if (valid) {
          
         }
       }
    }
  }
</script>

转载于:https://my.oschina.net/u/4131669/blog/3048479