Vue：动态表单标签/校验提示

场景介绍

对于表单项，存在前一个表单项填写控制后一个表单项展示问题。即动态表单项展示。

处理思路

定义表单项变量：:label="nameLabel"

<Form ref="form" :model="formModel" :rules="formRulesList" label-width="100px" size="mini">
  <FormItem label="家长" required prop="isFather">
	<Select v-model="formModel.isFather" clearable @change="changeFamilyType">
	  <Option
		v-for="(dataType, index) in familyList"
		:key="index"
		:label="dataType.type"
		:value="dataType.isFather"
	  />
	</Select>
  </FormItem>
  <FormItem :label="nameLabel" required prop="nameId" v-if="isVisible">
	<Select v-model="formModel.nameId" clearable>
	  <Option
		v-for="(topic, index) in nameList"
		:key="index"
		:label="topic.name"
		:value="topic.id"
	  />
	</Select>
  </FormItem>
</Form>

表单项变量校验提示：computed 处理"

<script>
export default {
  data() {
    return {
      isVisible: false,
      nameLabel: "",
	  familyList: [],
	  nameList: [],
      formModel: {
        nameId: ""
      },
	  formRules: {
        nameId: [
          {
            required: true,
            message: "请选择父亲名字",
            trigger: ["blur", "change"]
          }
        ]
      }
    }
  },
  methods: {
    changeFamilyType() {
	  this.isVisible = true
	  this.nameLabel = this.formModel.isFather === '0' ? "父亲名字": "母亲名字"
	  ...
	}
  },
  computed: {
    formRulesList(){
      let formRules_ = this.formRules
      if(this.formModel.isFather === '0'){
        formRules_.nameId[0].message = "请选择父亲名字"
      } else {
        formRules_.nameId[0].message = "请选择母亲名字"
      }
      return formRules_
    }
  }
}
</script>

来源：CSDN

作者：拾荒追逐者

链接：https://blog.csdn.net/u012510831/article/details/104748387

标签

动态

vue

form

label