pnpm第二课

cd TypeScript
pnpm install

Tree V2 虚拟化树形控件

<script setup lang="ts">
    // 接口Tree
    // 接口封装
    interface Tree {
        id: string
        label: string
        children?: Tree[]
    }
    // 函数名叫getkey接收两个参数prefix id
    const getKey = (prefix: string, id: number) => {
    return `${prefix}-${id}`
    }
    // 函数名叫createData 接受五个值
    const createData = (
        maxDeep: number,
        maxChildren: number,
        minNodesNumber: number,
        deep = 1,
        key = 'node'
    ): Tree[] => {
        // 定义id=0
        let id = 0
        return Array.from({ length: minNodesNumber })
            .fill(deep)
            .map(() => {
                // 随机数生成子节点名称
            const childrenNumber =
                deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren)
            const nodeKey = getKey(key, ++id)
            return {
                id: nodeKey,
                label: nodeKey,
                children: childrenNumber
                // 满足条件返回，不满足就
                ? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
                : undefined,
            }
        })
    }

    const props = {
        value: 'id',
        label: 'label',
        children: 'children',
    }
    const data = createData(4, 30, 40)
</script>

<template>
    <el-tree-v2 :data="data" :props="props" :height="228" />
</template>

环境

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
// elementUi
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import VForm3 from 'vform3-builds'  //引入VForm3库

import 'element-plus/dist/index.css'  //引入element-plus样式
import 'vform3-builds/dist/designer.style.css'  //引入VForm3样式
// 国际化
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

import App from './App.vue'
import router from './router'

const app = createApp(App)
// 挂载
app.use(ElementPlus, {
    locale: zhCn,
})
app.use(VForm3)
app.use(createPinia())
app.use(router)

app.mount('#app')

弹出框

<script setup lang="ts">
// import {ref} from 'vue';
// // 暗黑导包
// import 'element-plus/theme-chalk/dark/css-vars.css'
// import { useDark, useToggle } from '@vueuse/core'
// const isDark = useDark()
// const toggleDark = useToggle(isDark)
// //定义一个data值名叫value3是布尔类型
// const value3 = ref(true);
// //定义一个函数
// const changeBgColor= (val:boolean)=>{
//   if(val){
//     console.log("白");
//   }else{
//     toggleDark();
//     console.log("黑");
//   }
// };

// 弹出框
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
const dialogTableVisible = ref(false)

// 生成代码

  const formJson = reactive({"widgetList":[{"key":28076,"type":"input","icon":"text-field","formItemFlag":true,"options":{"name":"input51708","label":"请假理由","labelAlign":"","type":"text","defaultValue":"","placeholder":"请输入为什么请假","columnWidth":"200px","size":"","labelWidth":null,"labelHidden":false,"readonly":false,"disabled":false,"hidden":false,"clearable":true,"showPassword":false,"required":false,"requiredHint":"理由不为空","validation":"","validationHint":"","customClass":[],"labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"minLength":null,"maxLength":null,"showWordLimit":false,"prefixIcon":"","suffixIcon":"","appendButton":false,"appendButtonDisabled":false,"buttonIcon":"custom-search","onCreated":"","onMounted":"","onInput":"","onChange":"","onFocus":"","onBlur":"","onValidate":"","onAppendButtonClick":""},"id":"input51708"},{"key":34331,"type":"time-range","icon":"time-range-field","formItemFlag":true,"options":{"name":"timerange12367","label":"请假时间","labelAlign":"","defaultValue":null,"startPlaceholder":"","endPlaceholder":"","columnWidth":"200px","size":"","autoFullWidth":true,"labelWidth":null,"labelHidden":false,"readonly":false,"disabled":false,"hidden":false,"clearable":true,"editable":false,"format":"HH:mm:ss","required":false,"requiredHint":"","validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"onCreated":"","onMounted":"","onChange":"","onFocus":"","onBlur":"","onValidate":""},"id":"timerange12367"},{"key":103093,"type":"select","icon":"select-field","formItemFlag":true,"options":{"name":"select83682","label":"select","labelAlign":"","defaultValue":"0","placeholder":"","columnWidth":"200px","size":"","labelWidth":null,"labelHidden":false,"disabled":false,"hidden":false,"clearable":true,"filterable":false,"allowCreate":false,"remote":false,"automaticDropdown":false,"multiple":false,"multipleLimit":0,"optionItems":[{"label":"请选择","value":"0"},{"label":"刘总","value":"1"},{"label":"蛋总","value":"2"},{"value":"3","label":"王总"}],"required":false,"requiredHint":"","validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"onCreated":"","onMounted":"","onRemoteQuery":"","onChange":"","onFocus":"","onBlur":"","onValidate":""},"id":"select83682"},{"key":14359,"type":"button","icon":"button","formItemFlag":false,"options":{"name":"button5260","label":"button","columnWidth":"200px","size":"","displayStyle":"block","disabled":false,"hidden":false,"type":"success","plain":false,"round":true,"circle":false,"icon":null,"customClass":[],"onCreated":"","onMounted":"","onClick":""},"id":"button5260"}],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"top","size":"","labelAlign":"label-center-align","cssCode":"","customClass":[],"functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":""}})
  const formData = reactive({})
  const optionData = reactive({})
  const vFormRef = ref(null)

  const submitForm = () => {
    vFormRef.value.getFormData().then(formData => {
      // Form Validation OK
      alert( JSON.stringify(formData) )
    }).catch(error => {
      // Form Validation failed
      ElMessage.error(error)
    })
  }
  
</script>

<template>
   <!-- <el-switch
    v-model="value3"
    inline-prompt
    active-text="白天"
    inactive-text="黑夜"
    @change="changeBgColor"
  /> -->
  <el-button type="primary" @click="dialogTableVisible = true">请假</el-button>
  <!-- 弹出框 -->
  <el-dialog v-model="dialogTableVisible" title="Shipping address">
    <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
    </v-form-render>
    <el-button type="primary" @click="submitForm">Submit</el-button>
  </el-dialog>
</template>

VForm3安装

pnpm i vform3-builds

AI 小莓用AI

pnpm install element-plus