树形控件与输入框结合

项目场景：

最近在开发中遇见一个需要用到树形控件和输入框结合的需求，找了一些现有插件都不是很符合要求，于是自己将vxe-table的树形表格和elmentPlus的输入框结合。
功能需求：有一个评估体系的模块，现需对每个评估指标体系做增删改查的操作，每一个评估指标体系都会有九个固定的参数，九个参数成树状排列。

解决方案：

可以完全调用vxe-table里面的树形表格实现该功能，这里我是根据自身项目需求做了调整，借用了elmentPlus的输入框。

<template>
  <div class="EvalSimEvaluate">
	<el-form ref="form" :model="form" :rules="rules" label-width="170px">
	    <vxe-table
	      show-overflow
	      :show-header="false"
	      ref="xTable"
	      border="none"
	      :row-config="{isHover: true, useKey: true}"
	      :column-config="{resizable: true}"
	      :tree-config="{transform: true, rowField: 'id', parentField: 'parentId', line: true,expandAll: true, reserve: true}"
	      :data="treeData"
	      :scroll-y="{enabled: false}">>
	      <vxe-column field="name" title="Name" tree-node>
	        <template #default="{ row }">
	          <div v-if="row.parentId == null">{{row.name}}</div>
	          <el-form-item v-else :label="row.name" :prop="row.prop" :label-width="row.labelWidth">
	            <el-input v-model="form[row.prop]"></el-input>
	          </el-form-item>
	        </template>
	      </vxe-column>
	    </vxe-table>
	 </el-form>
  </div>
</template>
<script>
export default {
  name: "evalParams",
  data() {
    return {
      form: {},
      // 属性表格值
      treeData:[
        { id: 1, parentId: null, name: '经济效益（费效比）评估参数',prop:'weightEffect',labelWidth:'210px',},
        { id: 2, parentId: null, name: '出动强度损失率评估参数',prop:'weightLoss',labelWidth:'180px', },
        { id: 3, parentId: null, name: '出动损失率',prop:'weightStrength',labelWidth:'100px',},
        { id: 4, parentId: 1, name: '运载导弹携带无人机数量(架)',prop:'evaluateNumber',labelWidth:'190px'},
        { id: 5, parentId: 1, name: '无人机单价(元)',prop:'evaluateCK',labelWidth:'107px'},
        { id: 6, parentId: 1, name: '运载导弹单价(元)',prop:'evaluateCM',labelWidth:'120px'},
        { id: 7, parentId: 1, name: '发射系统单价(元)',prop:'evaluateCV',labelWidth:'120px'},
        { id: 8, parentId: 2, name: '发射系统最大携弹量(枚)',prop:'evaluateM',labelWidth:'160px'},
        { id: 9, parentId: 2, name: '联队战机总数(架)',prop:'evaluateFnumber',labelWidth:'120px'},
        { id: 10, parentId: 2, name: '任务平均飞行时间(秒)',prop:'evaluateTair',labelWidth:'147px'},
        { id: 11, parentId: 2, name: '平均地面准备时间(秒)',prop:'evaluateTgrd',labelWidth:'147px'},
        { id: 11, parentId: 2, name: '外场平均维修时间(秒)',prop:'evaluateMttr',labelWidth:'147px'},
      ],
    };
  },
};
</script>

效果图：

• 收缩状态

• 展开状态
  

注意事项：

1、这种树形组件输入框只适合参数数量固定的情况下，如果参数数量不确定的话不推荐使用。
2、vxe-table组件的树形表格需要在数据一加载的情况下树形控件就是全部展开状态的话，需要在tree-config属性里面设置expandAll为true

———————————————————————————

如果大家有更好的方法或者好用的插件推荐，欢迎给作者留言！