使用vue解决复杂逻辑

一,动态树形结构渲染

原型图

问题

  1. 后台需要提供提供怎样的的数据结构
  2. 页面渲染如何实现
  3. 如何拿到输入框的值

解决思路

  1. 每一条数据需要提供第一个select的options选项;后面的文本框需要输入类型;切换为区间输入的时候数据格式的切换,每条数据的唯一name属性。
  2. 封装成组件,通过传入的optios渲染第一个select,根据传入的type类型,使用v-if渲染文本输入框。
  3. 通过父组件v-for遍历得到的值通过props传个组件渲染,然后子组件通过在watch事件中通过emit将值返还给父组件,父组件通过eval方法,将name属性声明唯一对象和子组件相对应。

代码片段

父组件