element ui级联选择器--表单验证

一、vue模板表单内容
注意el-form元素的model属性与el-cascader元素的v-model之间的对应关系，以及el-form-item的prop与el-cascader元素的v-model之间的对应关系

<el-form :inline="true" :rules="rules" ref="form" :model="form">
          <el-form-item prop="origin">
            <el-cascader :options="originOptions" clearable placeholder="请选择始发地" v-model="form.origin"
                         :props="{ expandTrigger: 'hover' }" filterable></el-cascader>
          </el-form-item>
          <el-form-item>
            <i class="el-icon-right"></i>
          </el-form-item>
          <el-form-item prop="desti">
            <el-cascader :options="destiOptions" clearable placeholder="请选择目的地" v-model="form.desti"
                         :props="{ expandTrigger: 'hover' }" filterable></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" style="margin-left:20px;">查运价</el-button>
          </el-form-item>
        </el-form>

二、javascript代码部分
rules中的origin与desti与el-form-item元素的prop相对应

export default {
  name: "Truckprice",
  data() {
    return {
        form:{
        origin:'',
        desti:''
      },
      rules:{
        origin:[
          {required: true, message: '请选择始发地', trigger: 'change'},
          ],
        desti:[
          {required: true, message: '请选择目的地', trigger: 'change'},
        ]
      }
    }
  }
}

更多相关文章

随机推荐