项目记录总结

2021-8-10 — 2021-8-16

8-10 ---- 8-12 了解产品 试用功能 阅读项目源代码

8-13----8-16 开发

8-17 测试修改后上线 已投入使用

jsonpath解析json数据，供用户勾选解析后的json的一个字段提取出来然后通过key-value形式input中进行重命名生成新列，这一列显示提取列的相同字段的所有内容，在原项目基础上进行开发

项目描述：整个产品定位是对于数据清洗和数据仓库的一个数据处理型以及数据可视化的一个产品，我负责将选中列的json数据进行解析并针对用户做一些交互的功能，主要就是选择json功能后在页面右边出现一个对数据操作的step块，用iview组件库中的select下拉框进行对表格数据列的选择，然后可以通过增加参数按钮，生成一对input以key–value的形式供用户选择和修改，可以新增多组input同时进行修改，并对选择列的json数据进行解析，用到了vue-pretty-json对json进行解析，将解析后的json通过用户点击放大按钮在对话框中展现出来，并通过用户对某一字段的勾选，进行重命名并生成新列的数据处理的交互过程，在提升用户交互方面，在页面中做了相应的提示，并附上了jsonpath的外链链接

项目流程：下拉框选择列，获取到当前选择列的第一行数据，并对他进行判断判断是否是json数据，如果不是，在下拉框下面给出提示信息，并在放大的对话框中给用户一个提示，检测到当前选择列的内容不是json；如果是json ，通过JSON.parse将字符串转成对象，在data中定义对象 接收这个json 通过 放大按钮绑定的事件 传到 对话框中进行解析；通过vue-pretty-json组件进行对json的解析并在对话框的左边进行展示，通过用户对json每一个字段的勾选，在右侧生成一对input，左侧展示jsonpath解析的字段名，右边是对应生成的便于用户理解的字段名，不知道jsonpath的用户理解什么意思，通过对右边input修改名称点击确定，将对话框中的input同步到右侧step块中，并更新表格视图，新增列

盒子中文字太多 溢出 使用以下代码 实现溢出文字…表示

	  overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;