首页 > 其他分享 >vue3-vben-admin开发记录、知识点

vue3-vben-admin开发记录、知识点

时间:2024-09-25 22:20:57浏览次数:9  
标签:知识点 formActionType const vben ... admin 组件 null any

vue3-vben-admin知识点

一、vue3写法

1、生命周期

setup-组件在创建时

onMounted-挂载在dom时运行

onUpdated-响应数据修改时运行

2、reactive

定义: 接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 Vue.observable()

定义一个全局常量

let otherParam = reactive({
        result: null as any, //设置类型,不设置则为never
        title: '',
        tabledata: [] as any[],
        readid: null as any,
        type: null as any,
        data: null as any,
        workflownumber: '',
      });

TS声明文件,因为TS直接引用第三方JS库的时候,虽然可以用,但是是没有类型检查,所以我们需要做一个声明文件,来声明这些第三方库的类型,这样在使用第三方库的时候,就有类型了

declare module

3、父子组件相互调用

3.1父组件调用子组件

先引入组件页面:

import PersonTable from './PersonTable.vue';

在引入组件,并设置ref

    <a-card title="所得荣誉" :bordered="false">
      <PersonTable ref="tableRef" />
    </a-card>

定义常量,引用方法:

const tableRef = ref<{ getDataSource: () => any; test } | null>(null);

调用:

console.log(tableRef.value.test(otherParam.data));

注意:

如果是通过ref调用子组件的方法并需要取其返回值,可能出现有时间差问题,点击部门列表进行筛选时,获取的返回值总是为上一次点击的,就是因为实际上获取的值是ref上一次存储的值,本次需要获取的值还没来得及更新。所以为了避免这个问题,可以使用VUE提供的 watch 特性来监视ref值的变更。

例子:vue-vben-admin-awards:D:\workspace\vscode\vue-vben-admin-awards\src\views\user\DeptTree.vue

watch(
        () => treeRef.value?.getSelectedKeys()[0],
        (newValue, oldValue) => {
          if (newValue !== oldValue) {
              // 在这里执行其他操作,例如触发事件或者调用其他函数
            handleSelect();
          }
        },
      );

function handleSelect() {
        const key = treeRef.value?.getSelectedKeys()[0];
        console.log(key);
        emit('select', key);
      }
3.2子组件调用父组件

可以在子组件使用emits定义事件,再在父组件中监听该事件,当监听到该事件时,出发相应的函数逻辑:

//子组件DeptTree

emits: ['select'],   //定义select事件
    setup(_, { emit }) {
      const treeRef = ref<{ getSelectedKeys: () => any } | null>(null);

      function handleSelect() {
        const key = treeRef.value?.getSelectedKeys()[0];
        emit('select', key); //触发select事件,并传递参数key
      }
}
//父组件
<DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />   //监听select事件,触发时执行handleSelect函数方法


function handleSelect(deptId = '') {  //定义参数deptId,默认值为空,接收子组件传来的key
        console.log(deptId);
        searchInfo.code = deptId;
        reload();
      }

4、路由跳转

//引入
import { useRouter } from 'vue-router';
//获取对象
const router = useRouter();
//路由跳转并携带参数
router.push({
          name: 'high',
          //path:"/detail/high",   //不要这个也行
          params: {
            value: record.pkid,
            title: title,
          },
        });


//目的页面接收参数
let otherParam = reactive({
        showA: false,
        result: null as any, //设置类型,不设置则为never
        title: '',
        tabledata: [] as any[],
        pkid: null as any,
        type: null as any,
        data: null as any,
      });
      const route = useRoute();
      const getParams = () => {
        return route.params;
      };
      // Composition API 生命周期写法
      onMounted(() => {
        console.log('mounted:' + getParams().value);
        otherParam.title = '' + getParams().title;
        otherParam.pkid = getParams().value;
      });

5、表单工具FormSchema

ApiSelect类型的下拉框,formActionType获取整个表单的对象,更新表单的方法updateSchema([{}])

{
    label: '角色',
    field: 'roleName',
    component: 'ApiSelect',
    componentProps: ({ schema, tableAction, formActionType, formModel }) => {
      return {
        onChange: (e: ChangeEvent) => {
          console.log('change' + e);
          if ('' + e == 'Super') {
            formActionType.updateSchema([
              {
                field: 'college',
                ifShow: false,
              },
            ]);
            formActionType.updateSchema([
              {
                field: 'profession',
                ifShow: false,
              },
            ]);
            formActionType.updateSchema([
              {
                field: 'tclass',
                ifShow: false,
              },
            ]);
          } else if ('' + e == 'Department') {
            formActionType.updateSchema([
              {
                field: 'college',
                ifShow: true,
              },
            ]);
            formActionType.updateSchema([
              {
                field: 'profession',
                ifShow: false,
              },
            ]);
            formActionType.updateSchema([
              {
                field: 'tclass',
                ifShow: false,
              },
            ]);
          } else if ('' + e == 'student') {
            formActionType.updateSchema([
              {
                field: 'college',
                ifShow: true,
              },
            ]);
            formActionType.updateSchema([
              {
                field: 'profession',
                ifShow: true,
              },
            ]);
            formActionType.updateSchema([
              {
                field: 'tclass',
                ifShow: true,
              },
            ]);
          }
        },
        api: getdropdownselectList,
        params: { type: 'roleName' },
        labelField: 'roleName',
        valueField: 'roleValue',
      };
    },
    required: true,
  },

6、获取用户对象数据

import { useUserStore } from '/@/store/modules/user';

const userStore = useUserStore();

const username = computed(() => userStore.getUserInfo.username || headerImg);

7、await Promise.all

1.await 可以获得多个promise 的返回结果

2.Promise.all 返回的也是promise,所以可以直接await Promise.all();

获取两个表单的数据:

const [register, { validate }] = useForm({
        layout: 'vertical',
        baseColProps: {
          span: 6,
        },
        schemas: schemas,
        showActionButtonGroup: false,
      });

      const [registerTask, { validate: validateTaskForm }] = useForm({
        layout: 'vertical',
        baseColProps: {
          span: 6,
        },
        schemas: taskSchemas,
        showActionButtonGroup: false,
      });

const [values, taskValues] = await Promise.all([validate(), validateTaskForm()]);
console.log('form data:', values, taskValues);

8、ES6 扩展运算符 三个点(…)

es6中引入扩展运算符(…),它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函数调用,数组合并等情形。因为typeScript是es6的超集,所以typeScript也支持扩展运算符

用法:
可变参数个数的函数调用
function push(array, ...items) {  
  array.push(...items);  
}  

function add(...vals){
  let sum=0;
  for(let i=0;i<vals.length;i++){
    sum+=vals[i];
  }
  return sum;
}

let arr = [1,2,3,4,5,6];
let sum = add(...arr);
console.log(sum);  //21
更便捷的数组合并
let arr1 = [1,2];
let arr2 = [5,6];
let newArr = [20];
//es5 旧写法
newArr = newArr.concat(arr1).concat(arr2); //[20,1,2,5,6]
console.log(newArr);
//es6 使用扩展运算符
newArr = [20,...arr1,...arr2];  //[20,1,2,5,6]
console.log(newArr);
替代es5的apply方法
// ES5 的写法  
function f(x, y, z) {  
// ...  
}  
var args = [0, 1, 2];  
f.apply(null, args);  
// ES6 的写法  
function f(x, y, z) {  
// ...  
}  
var args = [0, 1, 2];  
f(...args);  
求最大值Math.max()
// ES5 的写法  
Math.max.apply(null, [14, 3, 77])  
// ES6 的写法  
Math.max(...[14, 3, 77])  
//  等同于  
Math.max(14, 3, 77);  
通过push函数,将一个数组添加到另一个数组的尾部
// ES5 的写法  
var arr1 = [0, 1, 2];  
var arr2 = [3, 4, 5];  
Array.prototype.push.apply(arr1, arr2);  
// ES6 的写法  
var arr1 = [0, 1, 2];  
var arr2 = [3, 4, 5];  
arr1.push(...arr2);  
新建Date类型
// ES5  
new (Date.bind.apply(Date, [null, 2015, 1, 1]))  
// ES6  
new Date(...[2015, 1, 1]);  
与解构赋值结合,生成新数组
// ES5  
a = list[0], rest = list.slice(1)  
// ES6  
[a, ...rest] = list 
下面是另外一些例子。  
const [first, ...rest] = [1, 2, 3, 4, 5];  
first // 1  
rest // [2, 3, 4, 5]  
const [first, ...rest] = [];  
first // undefined  
rest // []:  
const [first, ...rest] = ["foo"];  
first // "foo"  
rest // [] 
将字符串转为真正的数组
[...'hello']  
// [ "h", "e", "l", "l", "o" ]  
将实现了 Iterator 接口的对象转为数组
var nodeList = document.querySelectorAll('div');  
var array = [...nodeList];  

//接第七点,解包values、taskValues两个对象
individualsubmit({ ...values, ...taskValues, mylist, ttype, wfnum }).then(function (response) {
            console.log(response);
            if (response == 'success') {
              createMessage.success('提交成功!');
              issubmit.value = !issubmit.value;
            }
          });

json对象做三元表达式判断

{
type: "refer",
key: "machineNumber",
label: "整机编号",
refinfo: "equipmentPool",
refName: "整机",
 isReturnCode: true,
clientParam: {
    EQ_isEnable: "1",
   // EQ_agent: JSON.parse(localStorage.getItem('_A_P_customer')).id || ''
...(JSON.parse(localStorage.getItem('_A_P_customer')).id ? { EQ_agent: JSON.parse(localStorage.getItem('_A_P_customer')).id } : {})
},

二、各组件接口方法

1、侧边抽屉

<template>
	<Drawer4 @register="register4" />
</template>

import Drawer4 from './Drawer4.vue';
  
export default defineComponent({
    components: {
      Drawer4,
    },
    setup() {
      const [register4, { openDrawer: openDrawer4 }] = useDrawer();
      function send() {
        openDrawer4(true, {
          data: 'content',
          info: 'Info',
        });
      }
      return {
        send,
        register4,
      };
    },
  });

2、进度条

<div class="progress" style="width: 200px">
                        <Progress :percent="item.percent" status="active" />
                      </div>

3、分步步骤条

<Steps :current="item.current - 1" progress-dot size="small">
                    <Step :title="i.status" v-for="i in item.workflowlist" :key="i.id">
                      <template #description>
                        <div v-show="i.handler">由{{ i.handler }}-{{ i.handleaction }}</div>
                        <p>{{ i.handletime }}</p>
                      </template>
                    </Step>

         <!-- <Step title="创建项目">
            <template #description>
                <div>Vben</div>
                <p>2016-12-12 12:32</p>
            </template>
        </Step>
        <Step title="部门初审">
            <template #description>
                <p>Chad</p>
            </template>
        </Step>
        <Step title="财务复核" /> 
        <Step title="完成" /> -->
</Steps>

标签:知识点,formActionType,const,vben,...,admin,组件,null,any
From: https://blog.csdn.net/weixin_44248903/article/details/142477102

相关文章

  • C/C++语言基础--C++类数据、静态与非静态、常成员、友员、成员变量与函数指针等相关知
    本专栏目的更新C/C++的基础语法,包括C++的一些新特性前言通过前面几节,我们介绍了C++的类与对象、构造与析构函数、拷贝等相关知识,这一篇将详细介绍了C++的成员变量相关的知识点与扩展C语言后面也会继续更新知识点,如内联汇编;本人现在正在写一个C语言的图书管理系统,1000多......
  • c语言中字符串输入的相关知识点
    (1)scanf只能接收非空格字符串遇到空格或者换行就算结束。代码如下:#include<stdio.h>#include<stdlib.h>intmain(){chararr[10];scanf("%s",&arr);printf("%s",arr);}(2)gets函数-能够接收空格,但是不能接收回车#include<stdio.h>#include&l......
  • 计算机组成原理408第五章中央处理器知识点快速回顾二轮复习
    CPU由运算器和控制器这样的两大部件来组成,那么运算器由ACC累加寄存器,乘商寄存器,还有若干个通用寄存器以及算术逻辑单元alu来组成。那除了这些寄存器,还有alu之外,还会有一些其他的重要的寄存器,我们在之前没有介绍过。运算器主要负责对数据进行处理,也就是算术运算和逻辑运......
  • AI大模型知识点梳理:大模型是什么?大模型发展历程、底层原理、优点和不足、如何学习大模
    一、AI大模型是什么AI大模型是指具有巨大参数量的深度学习模型,通常包含数十亿甚至数万亿个参数。这些模型可以通过学习大量的数据来提高预测能力,从而在自然语言处理、计算机视觉、自主驾驶等领域取得重要突破。AI大模型的定义具体可以根据参数规模来分类。根据OpenAI的分类方法,可以......
  • vue3开发中易遗漏的常见知识点
    组件样式的特性ScopedCSS之局部样式的泄露示例(vue3):父组件:<template><h4>AppTitle</h4><hello-world></hello-world></template><script>importHelloWorldfrom'./HelloWorld.vue';exportdefault{name:'App......
  • Vuex 和 Vue-router 知识点
    Vuexactions里面才能做异步操作(访问后端APIajax请求访问数据库中的数据)mutations原子操作,同步操作Vue-routermode:history路由配置该怎么配置就怎么配置route:[...]配置:path和component懒加载:component:对应一个函数,import导入这个组件。前面说过用import......
  • JavaScript 对象的基本操作及相关知识点详解
    在JavaScript中,对象是一种基本的数据结构,以键值对形式保存数据且数据没有顺序,它可以包含多种数据类型的属性和方法。1.创建对象的方法字面量写法: let自定义对象名={}构造函数写法:let自定义对象名=newObject();//字面量写法letperson={};//构造函数......
  • Python知识点:如何使用Python与Java进行互操作(Jython)
    开篇,先说一个好消息,截止到2025年1月1日前,翻到文末找到我,赠送定制版的开题报告和任务书,先到先得!过期不候!Jython是一种完全兼容Java的Python实现,它将Python代码编译成Java字节码,这样就可以在Java虚拟机(JVM)上运行。使用Jython,你可以无缝地调用Java类库和P......
  • python3 numpy的一些小知识点
    简介一个用python实现的科学计算,包括:1、一个强大的N维数组对象Array;2、比较成熟的(广播)函数库;3、用于整合C/C++和Fortran代码的工具包;4、实用的线性代数、傅里叶变换和随机数生成函数。numpy和稀疏矩阵运算包scipy配合使用更加方便。NumPy(NumericPython)提供了许多高级的数值......
  • 面试 知识点
    训练过程为什么需要Mask机制?两个原因。1.屏蔽未来信息,防止未来帧参与训练。2.处理不同长度的序列,在批处理时对较短的序列进行填充(padding),并确保这些填充不会影响到模型的输出。mask机制如何实现?1.屏蔽未来信息的Mask:在自注意力层中,通过构造一个上三角矩阵(对于解码器),其......