树形控件与输入框结合

项目场景:

最近在开发中遇见一个需要用到树形控件和输入框结合的需求,找了一些现有插件都不是很符合要求,于是自己将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

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

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

未名'

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值