vue基础

<template>
    <!-- 树 -->
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
    <!-- 弹框 -->
    <el-dialog v-model="dialogVisible" title="Tips" width="30%">
        <!-- 表单 -->
        <el-form label-width="100px" :model="formLabelAlign" style="max-width: 460px">
            <el-form-item label="Name">
                <el-input v-model="formLabelAlign.name" />
            </el-form-item>
            <el-form-item label="Activity zone">
                <el-input v-model="formLabelAlign.region" />
            </el-form-item>
            <el-form-item label="Activity form">
                <el-input v-model="formLabelAlign.type" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="submitForm()">Confirm</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
interface Tree {
    label: string
    children?: Tree[]
}
//弹框开关
let dialogVisible = ref(false)
// el-tree初始化数据
const data: Tree[] = [
    {
        label: 'Level one 1',
        children: [
            {
                label: 'Level two 1-1',
                children: [
                    {
                        label: 'Level three 1-1-1',
                    },
                ],
            },
        ],
    },
]
const defaultProps = {
    children: 'children',
    label: 'label',
}
// 表单初始化数据
const formLabelAlign = reactive({
    name: '',
    region: '',
    type: '',
})

const handleNodeClick = (data: Tree) => {
    console.log(data)
    //点击第三级节点时，弹框显示
    if (data.label == "Level three 1-1-1") {
        //通过ref创建的变量赋值需要通过.value赋值
        dialogVisible.value = true
    }

}
const submitForm = () => {
    //表单的数据formLabelAlign
    console.log(formLabelAlign)
    dialogVisible.value = !dialogVisible.value
}
//v-model双向绑定  如表单中的v-model，绑定后输入框的值修改，formLabelAlign.name的值跟着修改
//v-band 缩写 :    动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
//v-on 缩写 @     绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
//v-for指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
//v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。
//v-else指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 false 值的时候被渲染。
//element plus中绑定的方法和属性 见element官网
</script>