会议点名人员crud-web前端Vue3多选调用示例

由于Tauri需要前端,以前接触的那点知识都拿来搞一下,把会议机的前端实现了一下.用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=index
        key=item.id
        :sta=item.sta
        :names=item.names
      @toParentdo=updatesta
/:>

完整代码的父组件提交更新的代码

const updatesta = (val) =>{
   //me.value =  childRef.value 
     nowmsg.value=val

    const 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"
      filterable
      multiple
      tag
      :options="options"
    />  
     
  </div>

multipleSelectValue 需要用names初始化,这是开始的选择好的, 而options是所有的待选人.也是需要初始化的,

export default defineComponent({
  
  props :{
      names:{
        type: String,
      },
      sta: {
        type: String,
        default: '会议地点名' ,// Default value
           required: 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

//这样就能访问子组件,包括模态的显示属性.就能控制窗口弹出.

 以上的方法在 build以后会失败。 没有instance的事了。
 
 这样吧 in  mounted

```bash
    window.msgproxg=this

```bash
也许把,这个方法,我再次测试1小时,不知道为啥不能用了.睡觉
晚上测试好了。再来一篇。