会议点名人员crud-web前端Vue3多选调用示例
由于Traun需要前端,以前接触的那点知识都拿来搞一下,把会议机的前端实现了一下,NativeUI 的select ,mutiselect来做人员的管理
支持多选和人工输入编辑和删除.要用的都有了,
一开始的单个select multi输入效果
组件使用说明https://www.naiveui.com/zh-CN/os-theme/components/select
文档里说的on-update:value ,使用@update:value="funname"进行绑定.
每有更新, funname(value),负责把value+本地网格名称,一块复制给一个被观察的
在子组件
const toparentvar=ref(""),
//需要定义在setup内部,否则各邻居会覆盖内容
watch (toparentvar ,(newvalue,value)){
emit("toParentdo",newvalue)
}
然后定义props用于接收父组件初始的消息
会议地点+人名列表
props{
sta:String
names:String.
}
在父组件中使用循环初始化子组件
let items= ref([{id=1,sta="aa",names="啊,啊啊,啊啊啊,"},{}])function aynce updatesta(value){fecht(urlapi+data)
}<childComp v-for" (item,index )in items" id=indexkey=item.id:sta=item.sta:names=item.names@toParentdo=updatesta
/:>
完整代码的父组件提交更新的代码
const updatesta = (val) =>{//me.value = childRef.value nowmsg.value=valconst nowurl="/api/settp/"+val[0]+"/"+ val[1]const apiCall = async () => {try {const response = await fetch(nowurl);const data = await response.json();// console.log(data);} catch (error) {console.error('Error fetching data:', error);}};apicall();}
下面说子组件
<template><div class="containerchild"><label style="width:80px;margin-left:10px;" class="n-tag__content">{{sta}}: </label><n-select label="ddd" style="width:480px"v-model:value="multipleSelectValue"@update:value="onChange"filterablemultipletag:options="options"/> </div>
multipleSelectValue 需要用names初始化,这是开始的选择好的, 而options是所有的待选人.也是需要初始化的,
export default defineComponent({props :{names:{type: String,},sta: {type: String,default: '会议地点名' ,// Default valuerequired: true}},setup(props,{emit}) {//不知为啥不可直接watch,value的model,.mutiSelectValue/所以用parentmsg传递const parentmsg = ref(String(""))watch(parentmsg, (newValue) => {emit('custom-event', [props.sta, newValue]);//交给父组件更新API
});return {parentmsg,showModal,
//这是文本框的初始化,可以是三种类型,数组,字符串和 multipleSelectValue:ref(props.names),
parentmsg.value= multipleSelectValue.value onChange(value){parentmsg.value=value},// 需要定制一下opetions为字典,从一串逗号分隔的人名,到每个元素是,label,value的字典
options : props.names.map(function (item) {return {label:item,value:item}})
其实参合的一个页面能完成所有,只是做了隔离,就容易排版和集中控制通讯.各自独立发展. 比如.父组件做出左右分割的两块.
首先数据拆分
const fetchUsers = async () => {try {const response = await fetch('/api/gettp');stas.value=await response.json();lefts.value= stas.value.slice(0, 17);rights.value= stas.value.slice(17,stas.lenght)window.basee=stas // console.log( stas.value);} catch (error) {console.error('Fetch Error', error);}};
然后,版面
<div class="container">
<div class="left">
</div>
<div class="right">
</div>
</div><style>
.container {display: flex;height: 100vh; /* 使容器占满整个视口高度 */
}.left {gap:15px;flex: 1; /* 左边区域占据容器的一定比例 */margin-left:20px;margin-right:20px;background-color: #f0f0f0; /* 左边区域背景色 */
}.right {gap:15px;flex: 2; /* 右边区域占据容器的更多比例 */background-color: #e0e0e0; /* 右边区域背景色 */
}
</style>
用了一天加一夜,孤岛成了后端是最简单的,提取集合,和更新单个元素.
今天就到这里了.
最终
还有最后一个小课题:
以前有一个普通的 flask渲染的页面,想的某个元素弹出vue的控制窗口.
比如某个按钮,弹出一个模态窗口.本来我已经做好了.弹出. 把select,也放到了弹窗.
曾经花了一天的时间研究如何让htmt里的js方法,去激活vue的弹出窗口.最后的解决办法,让我忘了个七七八八.
因为最终的测试,vue无法的会议电脑lwebkit运行.所以又花了一天,转让普通的html元素+Jquery
这个混杂的页面,其实难点的于,版面和各个功能的拼凑,除了有事是附加,都相当于
可见vue3框架带来的模块化提升.
最后说一下七七八八的方法,只说大致路径,的vue的index.http
,拷贝到目标html,页面,并且导入,js,和css的build文件.<javascript>window.yourselfparm="example"//然后发现这是获得vueapp的方法.什么变量啦,方法啦都是可以使用的.$("#app").__vue_app__//然后子组件只要有ref="point2me",然后$("#app").__vue_app__.$refs.point2me//这样就能访问子组件,包括模态的显示属性.就能控制窗口弹出.
也许把,这个方法,我再次测试1小时,不知道为啥不能用了.睡觉