elementUI在表单tree中表单验证prop多层级

844 阅读1分钟

在树的最尾层需要添加el-form-item,这个时候的表单验证prop就要用方法计算了。

1636686494(1).jpg html

<el-form @submit.native.prevent ref="form" :model="form" size="small" label-width="0px">
    <el-tree
              :data="form.parentTypes"
              :props="{
                children: 'children',
                label: 'typeName'
              }"
              node-key="typeId"
              default-expand-all
              :expand-on-click-node="false"
            >
              <div class="custom-tree-node" slot-scope="{ node, data }">
                <div class="tree-label">{{ node.label }}</div>
                <div v-if="node.isLeaf" class="form-item-box">
                  <el-form-item label class="margin_bottom_0">
                    <el-radio-group :disabled="isDisabled" v-model.trim="data.situation" style="width:370px">
                      <el-radio :label="3">未巡查</el-radio>
                      <el-radio :label="1">正常</el-radio>
                      <el-radio :label="2">不正常</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item
                    :key="`${data.typeId}_reason`"
                    label
                    v-if="data.situation === 2"
                    :prop="getProp(node,'parentTypes')"
                    :rules="{ required: true, message: `原因不能为空`, trigger: 'blur' }"
                  >
                    <el-input
                      :disabled="isDisabled"
                      v-model.trim="data.reason"
                      placeholder="请输入原因"
                      style="width: 370px;"
                      rows="2"
                      maxlength="250"
                      show-word-limit
                      type="textarea"
                    />
                  </el-form-item>
                </div>
              </div>
            </el-tree>
</el-form>

js

 methods: {
    getProp(node, firstStr = 'types') {
      const lastStr = `[${node.data.index}].reason`
      let centerStr = ''
      const dealFun = function (num) {
        for (let i = 0; i < num; i++) {
          if (i > 0) {
            const parent = _.map(_.range(i), () => {
              return 'parent'
            })
            const currStr = `[${_.get(node, `${parent.join('.')}.data.index`)}].children`
            centerStr = `${currStr}${centerStr}`
          }
        }
        return centerStr
      }
      dealFun(node.level)
      return `${firstStr}${centerStr}${lastStr}`
    }
  }