【NativeUI下的data table备注信息的快捷输入-会议签到补充】

NativeUI下的data table备注信息的快捷输入-会议签到补充

概述
结构
本文任务
子组件在列中定制显示
父组件的备注补充
父组件的便捷输入按钮
父组件快捷按钮给子组件的备注用
最后固定在底部

概述

本文讲述Vue3的数据和函数在父组件,子组件的交互,以NativeUI的datatable为载体,实现签到信息和快捷短语的点击输入, 从行备注,到总体备注,均可点击实现采集,且文本框是基础,可任意定制,实现了,便捷和灵活.
代码太乱,关键点说一下.
在这里插入图片描述

结构

就是做vue截图的报表,App.vue有同一组件HelloWorld.vue,用了两次,将left,right,的ref标签给它们, 定义自己的data,还有propers, 用于emit的@custem-event是一样的,采用propers里的tst参数,判断是来自不同部分的emit提交.两个组件有各自的数据.分开处理.
如果传入的参数是ref.归App.vue掌握, 比如data 1…20,其中,1-10给left,11-20给right.那么应该可以,通过综合管理数据,来实现交换.目前未做测试.对内部数据结构了解不那么深入.

本文任务

呈现签到列表,并定制显示,让页面可以方便添加补充备注信息.如请假,未包在临时模板的临时人员. 作为截屏打印的最后步骤,这里是系统的最后一步.结束后就手工了.
由于上面提到的左右两个子控件,数据目前是分开管理.所以给实现添加了复杂度. 如果只在App.vue中,综合管理,我想可能会简便的多, 就如同分了两页,只是同时出现.就不会这么折腾.话说Vue挺折腾人的.但是效果和下次都会更好.进入正题.

子组件在列中定制显示

在列的返回内容中使用render,h去显示成需要的样子.

本例中,第一二列,站点,和姓名显示为NText,并将’,'分割的名字,拆分成数组,遍历后均显示成NText,为其加入onclick事件响应/
第3列备注,显示为NInput, 考虑了NPopSelect.代码复杂且不支持任意输入,也考虑了右键菜单.和NPopSelect有一样的缺点.备注信息,不考虑远端保存.只做排版使用,因为开始并没这样的打算.要是综合成和其他人名信息一样. 对后台改动大,另外添加了,server负担.
每个子组件有一个自己的notes =ref(new Array())
根据行号分配给表格的每一行.保存备注信息.
对notes进行json化,onmounted. load, onUpdataValue save localManage.管理,也就是浏览器的本地存储字典.

父组件的备注补充

除了每行的备注,在父组件的下部有一个总补充是textArea,用于存放长的信息,在这里需要接受子组件的点击数据,比如要提到某个人请假.需要单击人名后,出现的这里.所以我用的了两种实现方法

使用子组件属性,指定父组件的方法.追加到textarea.简单直接子组件const propers= defindProper { name: toparent,type Function}. setup(propers) 在父组件中
使用子组件的emit,据查是子组件发出一个事件提醒,父组件接受后执行.可以传递,1到多个参数,在父组件的声明方式 <child @send-event="parentFunc"> 子组件调用方式在非setup语法糖下更简捷setup(propers, {emit}) 的要用的地方emit('send-event',[someparame of parentFunc])
实现流程,父组件 parentFunc 定义追加textarea的方式. 子组件send-event,调用parentFunc,实现追加.

父组件的便捷输入按钮

在实现人名差分并可点击后的时候,实现了个快捷输入关键词的办法.可以无需改动的拿到父组件,给输入框,提供便捷输入.当点某个词的时候,自动追加到输入框.
使用在template中 <div id='btnContainer'></div> 在js中 btnCon= document.getElmentbyID('btnContainer'); reander (h(NInput)[no], btnCon)

textarea处于父组件. 使用template 中 v-mode="parentnote" 同时js中,'const parentnode=ref("")
同时, onchang= savetoLocalManager()
保持数据同步改变,并长期存储.每日一条新的.在快捷按钮点击时,快捷提条追究.这一块就没事了. onmounted loadFromLocalManager 加载初始化 parentnote,更新textarea的数据. 这样会议签到刚开始,就能计入补充事项,请假信息.

父组件快捷按钮给子组件的备注用

由于之前的设计,子组件使用自己的数据,这让操作变得很复杂.首先,子组件备注NInput被激活. 然后点按钮,激活的NInput加入按钮词条. 加入,两个子组件用了一套父组件的顺序数据,只需要告诉父组件,激活onFocus的index,索引,就可以父组件给数据赋值.需要的话,存储就行. 现在,除了索引,还需要标识是哪个子组件传递的. 使用一个单独的属性tst,来表示. emit('notefous', index,tst)在父组件<child @notefocus='parentTip'> 只是把index,存到变量,tst转化成两个控件, nowDatagrid.增加了很大的复杂度. 在转换的前,想好怎么引用. template <child ref='leftDatagrid'>, jsleftDatagrid=ref(null)虽然声明是null, 的mount的时候会绑定到对于名称的child元素. 然后 tst,判断nowDatagrid.value=leftDategrid.
剩下的当快捷按键点击, nowDatagrid.value.notes[index]='keyword' 并且当单行备注,一次点击后,应该自动失去焦点, 把index赋值-1,用于下一次,否则会始终在它上面追加. 由于,下拉select,有些复杂,用一批数据存储多次.不太适合.我以为官网应该有一个,下拉数据控件,给大家用.