在树的最尾层需要添加el-form-item,这个时候的表单验证prop就要用方法计算了。
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}`
}
}