Vue.js 表单项：多级考核指标选择与权重分配

该代码段使用 Vue.js 框架编写了一个表单项，其中包含了一个下拉选择框和一个数字输入框。使用 v-for 指令来遍历一个名为 'modalObj.indexBOS' 的数组，该数组包含了多个对象，每个对象表示一个考核指标。在每个对象内部，使用 v-for 指令遍历子级指标，以展示子级指标。

在每个考核指标的下拉选择框中，使用 v-model 指令来绑定选中的值，并使用 @change 事件监听选项的变化。在数字输入框中，使用 v-model 指令绑定输入的值。

在每个考核指标的对象中，使用 @click 事件来添加子级指标，并使用 @click 事件来删除指标。

具体功能如下：

• 选择考核指标： 使用下拉选择框选择考核指标，并绑定到 item.indexId 属性。
• 分配权重： 使用数字输入框输入权重，并绑定到 item.weight 属性。
• 添加子级指标： 点击 '选择子级指标' 按钮，可以添加新的子级指标，并通过递归的方式展示子级指标的层级结构。
• 删除指标： 点击删除图标，可以删除当前指标，并更新指标的层级结构。

代码示例：

<a-form-item label='考核指标'>
  <div v-for='(item, index) in modalObj.indexBOS' :key='index'>
    <div :style="{ paddingLeft: (item.level - 1) * 20 + 'px' }">
      <a-select placeholder='请选择考核指标' style='width: 150px' v-model='item.indexId' @change='handleChange(item.indexId,index,item)'>
        <a-select-option v-for='item in fotSelectList' :key='item.value' :value='item.value'>
          {{ item.name }}
        </a-select-option>
      </a-select>
      <a-input-number placeholder='填写分配权重' style='width: 120px; margin-left: 10px' v-model='item.weight' />
      <span>%</span>
      <a class='t ml8' @click='addSubItem(item)' v-if='item.level < 5 && modalObj.type !== '4''>选择子级指标</a>
      <a-icon type='close-circle' theme='twoTone' two-tone-color='#F56C6C' v-if='modalObj.indexBOS.length > 1' class='ml8' :disabled='modalObj.indexBOS.length === 1' @click='() => remove(index)' />
    </div>
    <template v-if='item.level < 5'>
      <a-form-model-item v-for='(subItem, i) in item.childList' :key='i'>
        <div :style="{ paddingLeft: subItem.level * 20 + 'px' }">
          <a-select placeholder='请选择考核指标' style='width: 150px' v-model='subItem.indexId' @change='handleChange(subItem.indexId,i,subItem)'>
            <a-select-option v-for='item in oneList' :key='item.value' :value='item.value'>
              {{ item.name }}
            </a-select-option>
          </a-select>
          <a-input-number placeholder='填写分配权重' style='width: 120px; margin-left: 10px' v-model='subItem.weight' />
          <span>%</span>
          <a class='ml8 t' @click='addSubItem(subItem)' v-if='subItem.level < 5'>选择子级指标</a>
          <a-icon type='close-circle' theme='twoTone' two-tone-color='#F56C6C' v-if='item.childList.length > 0' class='ml8' :disabled='item.childList.length === 1' @click='() => removeSubItem(item, i)' />
        </div>
        <template v-if='subItem.level < 4'>
          <div style='margin-left: 20px'>
            <a-form-model-item v-for='(thirdItem, j) in subItem.childList' :key='j'>
              <div :style="{ paddingLeft: thirdItem.level * 20 + 'px' }">
                <a-select placeholder='请选择考核指标' style='width: 150px' v-model='thirdItem.indexId' @change='handleChange(thirdItem.indexId,j,thirdItem)'>
                  <a-select-option v-for='item in towList' :key='item.value' :value='item.value'>
                    {{ item.name }}
                  </a-select-option>
                </a-select>
                <a-input-number placeholder='填写分配权重' style='width: 120px; margin-left: 10px' v-model='thirdItem.weight' />
                <span>%</span>
                <a class='t ml8' @click='addThirdItem(thirdItem)' v-if='thirdItem.level < 4'>选择子级指标</a>
                <a-icon type='close-circle' theme='twoTone' two-tone-color='#F56C6C' v-if='subItem.childList.length > 0 ' class='ml8' :disabled='subItem.childList.length === 1' @click='() => removeThirdItem(subItem, j)' />
              </div>
              <template v-if='thirdItem.level = 3'>
                <div style='margin-left: 20px'>
                  <a-form-model-item v-for='(fourthItem, k) in thirdItem.childList' :key='k'>
                    <div :style="{ paddingLeft: fourthItem.level * 20 + 'px' }">
                      <a-select placeholder='请选择考核指标' style='width: 150px' v-model='fourthItem.indexId' @change='handleChange(fourthItem.indexId,k,fourthItem)'>
                        <a-select-option v-for='item in thirdList' :key='item.value' :value='item.value'>
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                      <a-input-number placeholder='填写分配权重' style='width: 120px; margin-left: 10px' v-model='fourthItem.weight' />
                      <span>%</span>
                      <a class='t ml8' @click='addFourthItem(fourthItem)' v-if='fourthItem.level = 4'>选择子级指标</a>
                      <a-icon type='close-circle' theme='twoTone' two-tone-color='#F56C6C' v-if='thirdItem.childList.length > 0' class='ml8' :disabled='thirdItem.childList.length === 1' @click='() => removeFourthItem(thirdItem, k)' />
                    </div>
                    <template v-if='fourthItem.level = 4'>
                      <div style='margin-left: 20px'>
                        <a-form-model-item v-for='(fiveItem, h) in fourthItem.childList' :key='h'>
                          <div :style="{ paddingLeft: fiveItem.level * 20 + 'px' }">
                            <a-select placeholder='请选择考核指标' style='width: 150px' v-model='fiveItem.indexId' @change='handleChange(fiveItem.indexId,h,fiveItem)'>
                              <a-select-option v-for='item in fourList' :key='item.value' :value='item.value'>
                                {{ item.name }}
                              </a-select-option>
                            </a-select>
                            <a-input-number placeholder='填写分配权重' style='width: 120px; margin-left: 10px' v-model='fiveItem.weight' />
                            <a-icon type='close-circle' theme='twoTone' two-tone-color='#F56C6C' v-if='fourthItem.childList.length > 0' class='ml8' :disabled='fourthItem.childList.length === 1' @click='() => removeFiveItem(fourthItem, h)' />
                          </div>
                        </a-form-model-item>
                      </div>
                    </template>
                  </a-form-model-item>
                </div>
              </template>
            </a-form-model-item>
          </div>
        </template>
      </a-form-model-item>
    </template>
  </div>
</a-form-item>
<a class='t' @click='addTopItem()'>选择指标</a>

该代码段实现了多级考核指标的选择和权重分配功能，可以方便用户进行指标管理和权重配置。